From 5c5fefffdd0352d68ba50a7590ae900eea9abc62 Mon Sep 17 00:00:00 2001 From: Gordon Smith Date: Mon, 11 Dec 2023 18:22:55 +0000 Subject: [PATCH] HPCC-31050 Use MS official theme migration code for ECL Watch Previously using sample code via cut/paste Signed-off-by: Gordon Smith --- esp/src/package-lock.json | 252 ++++ esp/src/package.json | 1 + esp/src/src-react/theme-shims/README.md | 8 - .../src-react/theme-shims/themeDuplicates.ts | 1099 ----------------- esp/src/src-react/theme-shims/v8ThemeShim.ts | 291 ----- esp/src/src-react/theme-shims/v9ThemeShim.ts | 216 ---- esp/src/src-react/themes.ts | 19 +- 7 files changed, 264 insertions(+), 1622 deletions(-) delete mode 100644 esp/src/src-react/theme-shims/README.md delete mode 100644 esp/src/src-react/theme-shims/themeDuplicates.ts delete mode 100644 esp/src/src-react/theme-shims/v8ThemeShim.ts delete mode 100644 esp/src/src-react/theme-shims/v9ThemeShim.ts diff --git a/esp/src/package-lock.json b/esp/src/package-lock.json index d45aa63db5e..ce1f6b7a7e9 100644 --- a/esp/src/package-lock.json +++ b/esp/src/package-lock.json @@ -14,6 +14,7 @@ "@fluentui/react-experiments": "8.14.95", "@fluentui/react-hooks": "8.6.29", "@fluentui/react-icons-mdl2": "1.3.47", + "@fluentui/react-migration-v8-v9": "9.4.41", "@hpcc-js/chart": "2.81.8", "@hpcc-js/codemirror": "2.61.0", "@hpcc-js/common": "2.71.13", @@ -118,6 +119,14 @@ "node": ">=6.9.0" } }, + "node_modules/@ctrl/tinycolor": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.3.4.tgz", + "integrity": "sha512-8vmPV/nIULFDWsnJalQJDqFLC2uTPx6A/ASA2t27QGp+7oXnbWWXCe0uV8xasIH2rGbI/XoB2vmkdP/94WvMrw==", + "engines": { + "node": ">=10" + } + }, "node_modules/@discoveryjs/json-ext": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", @@ -228,6 +237,58 @@ "tslib": "^2.1.0" } }, + "node_modules/@fluentui/fluent2-theme": { + "version": "8.107.53", + "resolved": "https://registry.npmjs.org/@fluentui/fluent2-theme/-/fluent2-theme-8.107.53.tgz", + "integrity": "sha512-1QdICHJyj75jVNOCXjOu17zd9MZLcXl/8o7yVx0No7iOgvBG5zKLY7SseI//NTUAZa6P3MKErTBdZv/A3cbX2Q==", + "dependencies": { + "@fluentui/react": "^8.113.1", + "@fluentui/set-version": "^8.2.13", + "tslib": "^2.1.0" + } + }, + "node_modules/@fluentui/fluent2-theme/node_modules/@fluentui/react": { + "version": "8.114.0", + "resolved": "https://registry.npmjs.org/@fluentui/react/-/react-8.114.0.tgz", + "integrity": "sha512-Ux/MYJ6qz7TaQEgMVUkB/vUQt2O/xUsRQX0v40XlXg76rQ3pQB3SzxJsi2d+CCaESkI9/YwVR4YVqXtCrvla/A==", + "dependencies": { + "@fluentui/date-time-utilities": "^8.5.15", + "@fluentui/font-icons-mdl2": "^8.5.28", + "@fluentui/foundation-legacy": "^8.2.48", + "@fluentui/merge-styles": "^8.5.14", + "@fluentui/react-focus": "^8.8.35", + "@fluentui/react-hooks": "^8.6.34", + "@fluentui/react-portal-compat-context": "^9.0.10", + "@fluentui/react-window-provider": "^2.2.17", + "@fluentui/set-version": "^8.2.13", + "@fluentui/style-utilities": "^8.9.21", + "@fluentui/theme": "^2.6.39", + "@fluentui/utilities": "^8.13.22", + "@microsoft/load-themed-styles": "^1.10.26", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <19.0.0", + "@types/react-dom": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0", + "react-dom": ">=16.8.0 <19.0.0" + } + }, + "node_modules/@fluentui/fluent2-theme/node_modules/@fluentui/react-hooks": { + "version": "8.6.34", + "resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.6.34.tgz", + "integrity": "sha512-FtfvsOHuNz4JfmACAUpJKyh/62i14s5K8lk4GGoe4soETyaKAlmYX9HbBOrFi9FkKk6scrFytLCViQ8sR15bDA==", + "dependencies": { + "@fluentui/react-window-provider": "^2.2.17", + "@fluentui/set-version": "^8.2.13", + "@fluentui/utilities": "^8.13.22", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0" + } + }, "node_modules/@fluentui/font-icons-mdl2": { "version": "8.5.28", "resolved": "https://registry.npmjs.org/@fluentui/font-icons-mdl2/-/font-icons-mdl2-8.5.28.tgz", @@ -1002,6 +1063,197 @@ "react-dom": ">=16.8.0 <19.0.0" } }, + "node_modules/@fluentui/react-migration-v8-v9": { + "version": "9.4.41", + "resolved": "https://registry.npmjs.org/@fluentui/react-migration-v8-v9/-/react-migration-v8-v9-9.4.41.tgz", + "integrity": "sha512-/Z0PbNWNgrYb8+4ki9aFrateGnr47cr1dxNPpsKUp1lbcF40Txn/SU8NqfsvTa8I0NVtEBg+sxUwmTI9g9YdVQ==", + "dependencies": { + "@ctrl/tinycolor": "3.3.4", + "@fluentui/fluent2-theme": "^8.107.53", + "@fluentui/react": "^8.113.1", + "@fluentui/react-components": "^9.43.3", + "@fluentui/react-icons": "^2.0.217", + "@fluentui/react-theme": "^9.1.16", + "@fluentui/react-utilities": "^9.15.4", + "@griffel/react": "^1.5.14", + "@swc/helpers": "^0.5.1" + }, + "peerDependencies": { + "@types/react": ">=16.14.0 <19.0.0", + "@types/react-dom": ">=16.14.0 <19.0.0", + "react": ">=16.14.0 <19.0.0", + "react-dom": ">=16.14.0 <19.0.0" + } + }, + "node_modules/@fluentui/react-migration-v8-v9/node_modules/@fluentui/react": { + "version": "8.114.0", + "resolved": "https://registry.npmjs.org/@fluentui/react/-/react-8.114.0.tgz", + "integrity": "sha512-Ux/MYJ6qz7TaQEgMVUkB/vUQt2O/xUsRQX0v40XlXg76rQ3pQB3SzxJsi2d+CCaESkI9/YwVR4YVqXtCrvla/A==", + "dependencies": { + "@fluentui/date-time-utilities": "^8.5.15", + "@fluentui/font-icons-mdl2": "^8.5.28", + "@fluentui/foundation-legacy": "^8.2.48", + "@fluentui/merge-styles": "^8.5.14", + "@fluentui/react-focus": "^8.8.35", + "@fluentui/react-hooks": "^8.6.34", + "@fluentui/react-portal-compat-context": "^9.0.10", + "@fluentui/react-window-provider": "^2.2.17", + "@fluentui/set-version": "^8.2.13", + "@fluentui/style-utilities": "^8.9.21", + "@fluentui/theme": "^2.6.39", + "@fluentui/utilities": "^8.13.22", + "@microsoft/load-themed-styles": "^1.10.26", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <19.0.0", + "@types/react-dom": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0", + "react-dom": ">=16.8.0 <19.0.0" + } + }, + "node_modules/@fluentui/react-migration-v8-v9/node_modules/@fluentui/react-alert": { + "version": "9.0.0-beta.97", + "resolved": "https://registry.npmjs.org/@fluentui/react-alert/-/react-alert-9.0.0-beta.97.tgz", + "integrity": "sha512-OR200TpeqMePgIaLHhRbSaF4WV18ogeyPaFqWJKMen8K9Uq411MDehzn2PdOoBfR9GWZRtdxx6Dw+E0C/cbCIA==", + "dependencies": { + "@fluentui/react-avatar": "^9.6.2", + "@fluentui/react-button": "^9.3.59", + "@fluentui/react-icons": "^2.0.217", + "@fluentui/react-jsx-runtime": "^9.0.22", + "@fluentui/react-tabster": "^9.16.0", + "@fluentui/react-theme": "^9.1.16", + "@fluentui/react-utilities": "^9.15.4", + "@griffel/react": "^1.5.14", + "@swc/helpers": "^0.5.1" + }, + "peerDependencies": { + "@types/react": ">=16.14.0 <19.0.0", + "@types/react-dom": ">=16.14.0 <19.0.0", + "react": ">=16.14.0 <19.0.0", + "react-dom": ">=16.14.0 <19.0.0" + } + }, + "node_modules/@fluentui/react-migration-v8-v9/node_modules/@fluentui/react-components": { + "version": "9.43.3", + "resolved": "https://registry.npmjs.org/@fluentui/react-components/-/react-components-9.43.3.tgz", + "integrity": "sha512-jtahuLDlhUgv/QwnbOkzOQijs9+kY6BW6NNSF0aL3hjD8zkIB0mnYa9ZsRgv8Iq0T/NK4g/1dyR2rEfNFdYpIA==", + "dependencies": { + "@fluentui/react-accordion": "^9.3.32", + "@fluentui/react-alert": "9.0.0-beta.97", + "@fluentui/react-avatar": "^9.6.2", + "@fluentui/react-badge": "^9.2.17", + "@fluentui/react-breadcrumb": "^9.0.5", + "@fluentui/react-button": "^9.3.59", + "@fluentui/react-card": "^9.0.58", + "@fluentui/react-checkbox": "^9.2.3", + "@fluentui/react-combobox": "^9.5.36", + "@fluentui/react-dialog": "^9.9.1", + "@fluentui/react-divider": "^9.2.53", + "@fluentui/react-drawer": "^9.0.5", + "@fluentui/react-field": "^9.1.45", + "@fluentui/react-image": "^9.1.50", + "@fluentui/react-infobutton": "9.0.0-beta.81", + "@fluentui/react-infolabel": "^9.0.9", + "@fluentui/react-input": "^9.4.55", + "@fluentui/react-label": "^9.1.53", + "@fluentui/react-link": "^9.2.2", + "@fluentui/react-menu": "^9.12.38", + "@fluentui/react-message-bar": "^9.0.10", + "@fluentui/react-overflow": "^9.1.3", + "@fluentui/react-persona": "^9.2.61", + "@fluentui/react-popover": "^9.8.26", + "@fluentui/react-portal": "^9.4.5", + "@fluentui/react-positioning": "^9.10.5", + "@fluentui/react-progress": "^9.1.55", + "@fluentui/react-provider": "^9.13.3", + "@fluentui/react-radio": "^9.1.60", + "@fluentui/react-select": "^9.1.55", + "@fluentui/react-shared-contexts": "^9.13.2", + "@fluentui/react-skeleton": "^9.0.43", + "@fluentui/react-slider": "^9.1.60", + "@fluentui/react-spinbutton": "^9.2.55", + "@fluentui/react-spinner": "^9.3.33", + "@fluentui/react-switch": "^9.1.60", + "@fluentui/react-table": "^9.10.16", + "@fluentui/react-tabs": "^9.4.1", + "@fluentui/react-tabster": "^9.16.0", + "@fluentui/react-tags": "^9.0.15", + "@fluentui/react-text": "^9.4.2", + "@fluentui/react-textarea": "^9.3.55", + "@fluentui/react-theme": "^9.1.16", + "@fluentui/react-toast": "^9.3.21", + "@fluentui/react-toolbar": "^9.1.60", + "@fluentui/react-tooltip": "^9.4.4", + "@fluentui/react-tree": "^9.4.18", + "@fluentui/react-utilities": "^9.15.4", + "@fluentui/react-virtualizer": "9.0.0-alpha.61", + "@griffel/react": "^1.5.14", + "@swc/helpers": "^0.5.1" + }, + "peerDependencies": { + "@types/react": ">=16.14.0 <19.0.0", + "@types/react-dom": ">=16.14.0 <19.0.0", + "react": ">=16.14.0 <19.0.0", + "react-dom": ">=16.14.0 <19.0.0", + "scheduler": "^0.19.0 || ^0.20.0" + } + }, + "node_modules/@fluentui/react-migration-v8-v9/node_modules/@fluentui/react-hooks": { + "version": "8.6.34", + "resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.6.34.tgz", + "integrity": "sha512-FtfvsOHuNz4JfmACAUpJKyh/62i14s5K8lk4GGoe4soETyaKAlmYX9HbBOrFi9FkKk6scrFytLCViQ8sR15bDA==", + "dependencies": { + "@fluentui/react-window-provider": "^2.2.17", + "@fluentui/set-version": "^8.2.13", + "@fluentui/utilities": "^8.13.22", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0" + } + }, + "node_modules/@fluentui/react-migration-v8-v9/node_modules/@fluentui/react-infobutton": { + "version": "9.0.0-beta.81", + "resolved": "https://registry.npmjs.org/@fluentui/react-infobutton/-/react-infobutton-9.0.0-beta.81.tgz", + "integrity": "sha512-gV380RvTtPtO06wXuNilzxXJYPcZwIKsYxiCtbP0Dlxf3r/G8UfcCxOm+xCgaegtwQZDVXBX3p6XVObSr4YXgQ==", + "dependencies": { + "@fluentui/react-icons": "^2.0.217", + "@fluentui/react-jsx-runtime": "^9.0.22", + "@fluentui/react-label": "^9.1.53", + "@fluentui/react-popover": "^9.8.26", + "@fluentui/react-tabster": "^9.16.0", + "@fluentui/react-theme": "^9.1.16", + "@fluentui/react-utilities": "^9.15.4", + "@griffel/react": "^1.5.14", + "@swc/helpers": "^0.5.1" + }, + "peerDependencies": { + "@types/react": ">=16.14.0 <19.0.0", + "@types/react-dom": ">=16.14.0 <19.0.0", + "react": ">=16.14.0 <19.0.0", + "react-dom": ">=16.14.0 <19.0.0" + } + }, + "node_modules/@fluentui/react-migration-v8-v9/node_modules/@fluentui/react-virtualizer": { + "version": "9.0.0-alpha.61", + "resolved": "https://registry.npmjs.org/@fluentui/react-virtualizer/-/react-virtualizer-9.0.0-alpha.61.tgz", + "integrity": "sha512-gGJmekqjcHXDJRE30TaAlOnCx+y+jt0vHc9sssAJgwxsQkExdvlK8tpRG7g+XB6kCLNH5rWM6kqGiQIuJ4/znQ==", + "dependencies": { + "@fluentui/react-jsx-runtime": "^9.0.22", + "@fluentui/react-shared-contexts": "^9.13.2", + "@fluentui/react-utilities": "^9.15.4", + "@griffel/react": "^1.5.14", + "@swc/helpers": "^0.5.1" + }, + "peerDependencies": { + "@types/react": ">=16.14.0 <19.0.0", + "@types/react-dom": ">=16.14.0 <19.0.0", + "react": ">=16.14.0 <19.0.0", + "react-dom": ">=16.14.0 <19.0.0" + } + }, "node_modules/@fluentui/react-motion-preview": { "version": "0.5.5", "resolved": "https://registry.npmjs.org/@fluentui/react-motion-preview/-/react-motion-preview-0.5.5.tgz", diff --git a/esp/src/package.json b/esp/src/package.json index 002f8fc5a3b..9976e84e0ba 100644 --- a/esp/src/package.json +++ b/esp/src/package.json @@ -40,6 +40,7 @@ "@fluentui/react-experiments": "8.14.95", "@fluentui/react-hooks": "8.6.29", "@fluentui/react-icons-mdl2": "1.3.47", + "@fluentui/react-migration-v8-v9": "9.4.41", "@hpcc-js/chart": "2.81.8", "@hpcc-js/codemirror": "2.61.0", "@hpcc-js/common": "2.71.13", diff --git a/esp/src/src-react/theme-shims/README.md b/esp/src/src-react/theme-shims/README.md deleted file mode 100644 index 9e13fa72fb3..00000000000 --- a/esp/src/src-react/theme-shims/README.md +++ /dev/null @@ -1,8 +0,0 @@ -# theme-shims - -_This folder contains a collection of shims to help migrating from FluentUI v8 to FluentUI v9._ - -For more information see: - -* [Theme Upgrade Documents](https://react.fluentui.dev/?path=/docs/concepts-upgrading-from-v8-components-theme-upgrade--page) -* [Shim sources](https://github.com/microsoft/fluentui/tree/master/apps/public-docsite-v9/src/shims/ThemeShim) diff --git a/esp/src/src-react/theme-shims/themeDuplicates.ts b/esp/src/src-react/theme-shims/themeDuplicates.ts deleted file mode 100644 index f2fd2bb722d..00000000000 --- a/esp/src/src-react/theme-shims/themeDuplicates.ts +++ /dev/null @@ -1,1099 +0,0 @@ -/** - * These colors have been copied here from react-theme because they are not exported from that package. - * They are necessary to build the theme shims. - */ - -import { BrandVariants } from "@fluentui/react-components"; - -/** - * Possible color variant values - */ -export type ColorVariants = { - shade50: string; - shade40: string; - shade30: string; - shade20: string; - shade10: string; - primary: string; - tint10: string; - tint20: string; - tint30: string; - tint40: string; - tint50: string; - tint60: string; -}; - -/** - * All the global shared colors and their shade/tint variants - */ -export type GlobalSharedColors = { - darkRed: ColorVariants; - burgundy: ColorVariants; - cranberry: ColorVariants; - red: ColorVariants; - darkOrange: ColorVariants; - bronze: ColorVariants; - pumpkin: ColorVariants; - orange: ColorVariants; - peach: ColorVariants; - marigold: ColorVariants; - yellow: ColorVariants; - gold: ColorVariants; - brass: ColorVariants; - brown: ColorVariants; - darkBrown: ColorVariants; - lime: ColorVariants; - forest: ColorVariants; - seafoam: ColorVariants; - lightGreen: ColorVariants; - green: ColorVariants; - darkGreen: ColorVariants; - lightTeal: ColorVariants; - teal: ColorVariants; - darkTeal: ColorVariants; - cyan: ColorVariants; - steel: ColorVariants; - lightBlue: ColorVariants; - blue: ColorVariants; - royalBlue: ColorVariants; - darkBlue: ColorVariants; - cornflower: ColorVariants; - navy: ColorVariants; - lavender: ColorVariants; - purple: ColorVariants; - darkPurple: ColorVariants; - orchid: ColorVariants; - grape: ColorVariants; - berry: ColorVariants; - lilac: ColorVariants; - pink: ColorVariants; - hotPink: ColorVariants; - magenta: ColorVariants; - plum: ColorVariants; - beige: ColorVariants; - mink: ColorVariants; - silver: ColorVariants; - platinum: ColorVariants; - anchor: ColorVariants; - charcoal: ColorVariants; -}; - -export type TextAlignment = - | "inherit" - | "initial" - | "revert" - | "unset" - | "center" - | "end" - | "start" - | "justify" - | "left" - | "match-parent" - | "right"; - -export type TextAlignments = { - start: TextAlignment; - center: TextAlignment; - end: TextAlignment; - justify: TextAlignment; -}; - -export type Greys = - | 0 - | 2 - | 4 - | 6 - | 8 - | 10 - | 12 - | 14 - | 16 - | 18 - | 20 - | 22 - | 24 - | 26 - | 28 - | 30 - | 32 - | 34 - | 36 - | 38 - | 40 - | 42 - | 44 - | 46 - | 48 - | 50 - | 52 - | 54 - | 56 - | 58 - | 60 - | 62 - | 64 - | 66 - | 68 - | 70 - | 72 - | 74 - | 76 - | 78 - | 80 - | 82 - | 84 - | 86 - | 88 - | 90 - | 92 - | 94 - | 96 - | 98 - | 100; - -export type AlphaColors = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90; - -export const grey: Record = { - "0": "#000000", - "2": "#050505", - "4": "#0a0a0a", - "6": "#0f0f0f", - "8": "#141414", - "10": "#1a1a1a", - "12": "#1f1f1f", - "14": "#242424", - "16": "#292929", - "18": "#2e2e2e", - "20": "#333333", - "22": "#383838", - "24": "#3d3d3d", - "26": "#424242", - "28": "#474747", - "30": "#4d4d4d", - "32": "#525252", - "34": "#575757", - "36": "#5c5c5c", - "38": "#616161", - "40": "#666666", - "42": "#6b6b6b", - "44": "#707070", - "46": "#757575", - "48": "#7a7a7a", - "50": "#808080", - "52": "#858585", - "54": "#8a8a8a", - "56": "#8f8f8f", - "58": "#949494", - "60": "#999999", - "62": "#9e9e9e", - "64": "#a3a3a3", - "66": "#a8a8a8", - "68": "#adadad", - "70": "#b3b3b3", - "72": "#b8b8b8", - "74": "#bdbdbd", - "76": "#c2c2c2", - "78": "#c7c7c7", - "80": "#cccccc", - "82": "#d1d1d1", - "84": "#d6d6d6", - "86": "#dbdbdb", - "88": "#e0e0e0", - "90": "#e6e6e6", - "92": "#ebebeb", - "94": "#f0f0f0", - "96": "#f5f5f5", - "98": "#fafafa", - "100": "#ffffff", -}; - -export const whiteAlpha: Record = { - "5": "rgba(255, 255, 255, 0.05)", - "10": "rgba(255, 255, 255, 0.1)", - "20": "rgba(255, 255, 255, 0.2)", - "30": "rgba(255, 255, 255, 0.3)", - "40": "rgba(255, 255, 255, 0.4)", - "50": "rgba(255, 255, 255, 0.5)", - "60": "rgba(255, 255, 255, 0.6)", - "70": "rgba(255, 255, 255, 0.7)", - "80": "rgba(255, 255, 255, 0.8)", - "90": "rgba(255, 255, 255, 0.9)", -}; - -export const blackAlpha: Record = { - "5": "rgba(0, 0, 0, 0.05)", - "10": "rgba(0, 0, 0, 0.1)", - "20": "rgba(0, 0, 0, 0.2)", - "30": "rgba(0, 0, 0, 0.3)", - "40": "rgba(0, 0, 0, 0.4)", - "50": "rgba(0, 0, 0, 0.5)", - "60": "rgba(0, 0, 0, 0.6)", - "70": "rgba(0, 0, 0, 0.7)", - "80": "rgba(0, 0, 0, 0.8)", - "90": "rgba(0, 0, 0, 0.9)", -}; - -export const grey10Alpha: Record = { - "5": "rgba(26, 26, 26, 0.05)", - "10": "rgba(26, 26, 26, 0.1)", - "20": "rgba(26, 26, 26, 0.2)", - "30": "rgba(26, 26, 26, 0.3)", - "40": "rgba(26, 26, 26, 0.4)", - "50": "rgba(26, 26, 26, 0.5)", - "60": "rgba(26, 26, 26, 0.6)", - "70": "rgba(26, 26, 26, 0.7)", - "80": "rgba(26, 26, 26, 0.8)", - "90": "rgba(26, 26, 26, 0.9)", -}; - -export const grey12Alpha: Record = { - "5": "rgba(31, 31, 31, 0.05)", - "10": "rgba(31, 31, 31, 0.1)", - "20": "rgba(31, 31, 31, 0.2)", - "30": "rgba(31, 31, 31, 0.3)", - "40": "rgba(31, 31, 31, 0.4)", - "50": "rgba(31, 31, 31, 0.5)", - "60": "rgba(31, 31, 31, 0.6)", - "70": "rgba(31, 31, 31, 0.7)", - "80": "rgba(31, 31, 31, 0.8)", - "90": "rgba(31, 31, 31, 0.9)", -}; - -export const grey14Alpha: Record = { - "5": "rgba(36, 36, 36, 0.05)", - "10": "rgba(36, 36, 36, 0.1)", - "20": "rgba(36, 36, 36, 0.2)", - "30": "rgba(36, 36, 36, 0.3)", - "40": "rgba(36, 36, 36, 0.4)", - "50": "rgba(36, 36, 36, 0.5)", - "60": "rgba(36, 36, 36, 0.6)", - "70": "rgba(36, 36, 36, 0.7)", - "80": "rgba(36, 36, 36, 0.8)", - "90": "rgba(36, 36, 36, 0.9)", -}; - -export const white = "#ffffff"; - -export const black = "#000000"; - -export const hcHyperlink = "#ffff00"; - -export const hcHighlight = "#1aebff"; - -export const hcDisabled = "#3ff23f"; - -export const hcCanvas = "#000000"; - -export const hcCanvasText = "#ffffff"; - -export const hcHighlightText = "#000000"; - -export const hcButtonText = "#000000"; - -export const hcButtonFace = "#ffffff"; - -const darkRed: ColorVariants = { - shade50: "#130204", - shade40: "#230308", - shade30: "#420610", - shade20: "#590815", - shade10: "#690a19", - primary: "#750b1c", - tint10: "#861b2c", - tint20: "#962f3f", - tint30: "#ac4f5e", - tint40: "#d69ca5", - tint50: "#e9c7cd", - tint60: "#f9f0f2", -}; - -const burgundy: ColorVariants = { - shade50: "#1a0607", - shade40: "#310b0d", - shade30: "#5c1519", - shade20: "#7d1d21", - shade10: "#942228", - primary: "#a4262c", - tint10: "#af393e", - tint20: "#ba4d52", - tint30: "#c86c70", - tint40: "#e4afb2", - tint50: "#f0d3d4", - tint60: "#fbf4f4", -}; - -const cranberry: ColorVariants = { - shade50: "#200205", - shade40: "#3b0509", - shade30: "#6e0811", - shade20: "#960b18", - shade10: "#b10e1c", - primary: "#c50f1f", - tint10: "#cc2635", - tint20: "#d33f4c", - tint30: "#dc626d", - tint40: "#eeacb2", - tint50: "#f6d1d5", - tint60: "#fdf3f4", -}; - -const red: ColorVariants = { - shade50: "#210809", - shade40: "#3f1011", - shade30: "#751d1f", - shade20: "#9f282b", - shade10: "#bc2f32", - primary: "#d13438", - tint10: "#d7494c", - tint20: "#dc5e62", - tint30: "#e37d80", - tint40: "#f1bbbc", - tint50: "#f8dadb", - tint60: "#fdf6f6", -}; - -const darkOrange: ColorVariants = { - shade50: "#230900", - shade40: "#411200", - shade30: "#7a2101", - shade20: "#a62d01", - shade10: "#c43501", - primary: "#da3b01", - tint10: "#de501c", - tint20: "#e36537", - tint30: "#e9835e", - tint40: "#f4bfab", - tint50: "#f9dcd1", - tint60: "#fdf6f3", -}; - -const bronze: ColorVariants = { - shade50: "#1b0a01", - shade40: "#321303", - shade30: "#5e2405", - shade20: "#7f3107", - shade10: "#963a08", - primary: "#a74109", - tint10: "#b2521e", - tint20: "#bc6535", - tint30: "#ca8057", - tint40: "#e5bba4", - tint50: "#f1d9cc", - tint60: "#fbf5f2", -}; - -const pumpkin: ColorVariants = { - shade50: "#200d03", - shade40: "#3d1805", - shade30: "#712d09", - shade20: "#9a3d0c", - shade10: "#b6480e", - primary: "#ca5010", - tint10: "#d06228", - tint20: "#d77440", - tint30: "#df8e64", - tint40: "#efc4ad", - tint50: "#f7dfd2", - tint60: "#fdf7f4", -}; - -const orange: ColorVariants = { - shade50: "#271002", - shade40: "#4a1e04", - shade30: "#8a3707", - shade20: "#bc4b09", - shade10: "#de590b", - primary: "#f7630c", - tint10: "#f87528", - tint20: "#f98845", - tint30: "#faa06b", - tint40: "#fdcfb4", - tint50: "#fee5d7", - tint60: "#fff9f5", -}; - -const peach: ColorVariants = { - shade50: "#291600", - shade40: "#4d2a00", - shade30: "#8f4e00", - shade20: "#c26a00", - shade10: "#e67e00", - primary: "#ff8c00", - tint10: "#ff9a1f", - tint20: "#ffa83d", - tint30: "#ffba66", - tint40: "#ffddb3", - tint50: "#ffedd6", - tint60: "#fffaf5", -}; - -const marigold: ColorVariants = { - shade50: "#251a00", - shade40: "#463100", - shade30: "#835b00", - shade20: "#b27c00", - shade10: "#d39300", - primary: "#eaa300", - tint10: "#edad1c", - tint20: "#efb839", - tint30: "#f2c661", - tint40: "#f9e2ae", - tint50: "#fcefd3", - tint60: "#fefbf4", -}; - -const yellow: ColorVariants = { - primary: "#fde300", - shade10: "#e4cc00", - shade20: "#c0ad00", - shade30: "#817400", - shade40: "#4c4400", - shade50: "#282400", - tint10: "#fde61e", - tint20: "#fdea3d", - tint30: "#feee66", - tint40: "#fef7b2", - tint50: "#fffad6", - tint60: "#fffef5", -}; - -const gold: ColorVariants = { - shade50: "#1f1900", - shade40: "#3a2f00", - shade30: "#6c5700", - shade20: "#937700", - shade10: "#ae8c00", - primary: "#c19c00", - tint10: "#c8a718", - tint20: "#d0b232", - tint30: "#dac157", - tint40: "#ecdfa5", - tint50: "#f5eece", - tint60: "#fdfbf2", -}; - -const brass: ColorVariants = { - shade50: "#181202", - shade40: "#2e2103", - shade30: "#553e06", - shade20: "#745408", - shade10: "#89640a", - primary: "#986f0b", - tint10: "#a47d1e", - tint20: "#b18c34", - tint30: "#c1a256", - tint40: "#e0cea2", - tint50: "#efe4cb", - tint60: "#fbf8f2", -}; - -const brown: ColorVariants = { - shade50: "#170e07", - shade40: "#2b1a0e", - shade30: "#50301a", - shade20: "#6c4123", - shade10: "#804d29", - primary: "#8e562e", - tint10: "#9c663f", - tint20: "#a97652", - tint30: "#bb8f6f", - tint40: "#ddc3b0", - tint50: "#edded3", - tint60: "#faf7f4", -}; - -const darkBrown: ColorVariants = { - shade50: "#0c0704", - shade40: "#170c08", - shade30: "#2b1710", - shade20: "#3a1f15", - shade10: "#452519", - primary: "#4d291c", - tint10: "#623a2b", - tint20: "#784d3e", - tint30: "#946b5c", - tint40: "#caada3", - tint50: "#e3d2cb", - tint60: "#f8f3f2", -}; - -const lime: ColorVariants = { - shade50: "#121b06", - shade40: "#23330b", - shade30: "#405f14", - shade20: "#57811b", - shade10: "#689920", - primary: "#73aa24", - tint10: "#81b437", - tint20: "#90be4c", - tint30: "#a4cc6c", - tint40: "#cfe5af", - tint50: "#e5f1d3", - tint60: "#f8fcf4", -}; - -const forest: ColorVariants = { - shade50: "#0c1501", - shade40: "#162702", - shade30: "#294903", - shade20: "#376304", - shade10: "#427505", - primary: "#498205", - tint10: "#599116", - tint20: "#6ba02b", - tint30: "#85b44c", - tint40: "#bdd99b", - tint50: "#dbebc7", - tint60: "#f6faf0", -}; - -const seafoam: ColorVariants = { - shade50: "#002111", - shade40: "#003d20", - shade30: "#00723b", - shade20: "#009b51", - shade10: "#00b85f", - primary: "#00cc6a", - tint10: "#19d279", - tint20: "#34d889", - tint30: "#5ae0a0", - tint40: "#a8f0cd", - tint50: "#cff7e4", - tint60: "#f3fdf8", -}; - -const lightGreen: ColorVariants = { - shade50: "#031a02", - shade40: "#063004", - shade30: "#0b5a08", - shade20: "#0e7a0b", - shade10: "#11910d", - primary: "#13a10e", - tint10: "#27ac22", - tint20: "#3db838", - tint30: "#5ec75a", - tint40: "#a7e3a5", - tint50: "#cef0cd", - tint60: "#f2fbf2", -}; - -const green: ColorVariants = { - shade50: "#031403", - shade40: "#052505", - shade30: "#094509", - shade20: "#0c5e0c", - shade10: "#0e700e", - primary: "#107c10", - tint10: "#218c21", - tint20: "#359b35", - tint30: "#54b054", - tint40: "#9fd89f", - tint50: "#c9eac9", - tint60: "#f1faf1", -}; - -const darkGreen: ColorVariants = { - shade50: "#021102", - shade40: "#032003", - shade30: "#063b06", - shade20: "#085108", - shade10: "#0a5f0a", - primary: "#0b6a0b", - tint10: "#1a7c1a", - tint20: "#2d8e2d", - tint30: "#4da64d", - tint40: "#9ad29a", - tint50: "#c6e7c6", - tint60: "#f0f9f0", -}; - -const lightTeal: ColorVariants = { - shade50: "#001d1f", - shade40: "#00373a", - shade30: "#00666d", - shade20: "#008b94", - shade10: "#00a5af", - primary: "#00b7c3", - tint10: "#18bfca", - tint20: "#32c8d1", - tint30: "#58d3db", - tint40: "#a6e9ed", - tint50: "#cef3f5", - tint60: "#f2fcfd", -}; - -const teal: ColorVariants = { - shade50: "#001516", - shade40: "#012728", - shade30: "#02494c", - shade20: "#026467", - shade10: "#037679", - primary: "#038387", - tint10: "#159195", - tint20: "#2aa0a4", - tint30: "#4cb4b7", - tint40: "#9bd9db", - tint50: "#c7ebec", - tint60: "#f0fafa", -}; - -const darkTeal: ColorVariants = { - shade50: "#001010", - shade40: "#001f1f", - shade30: "#003939", - shade20: "#004e4e", - shade10: "#005c5c", - primary: "#006666", - tint10: "#0e7878", - tint20: "#218b8b", - tint30: "#41a3a3", - tint40: "#92d1d1", - tint50: "#c2e7e7", - tint60: "#eff9f9", -}; - -const cyan: ColorVariants = { - shade50: "#00181e", - shade40: "#002e38", - shade30: "#005669", - shade20: "#00748f", - shade10: "#008aa9", - primary: "#0099bc", - tint10: "#18a4c4", - tint20: "#31afcc", - tint30: "#56bfd7", - tint40: "#a4deeb", - tint50: "#cdedf4", - tint60: "#f2fafc", -}; - -const steel: ColorVariants = { - shade50: "#000f12", - shade40: "#001b22", - shade30: "#00333f", - shade20: "#004555", - shade10: "#005265", - primary: "#005b70", - tint10: "#0f6c81", - tint20: "#237d92", - tint30: "#4496a9", - tint40: "#94c8d4", - tint50: "#c3e1e8", - tint60: "#eff7f9", -}; - -const lightBlue: ColorVariants = { - shade50: "#091823", - shade40: "#112d42", - shade30: "#20547c", - shade20: "#2c72a8", - shade10: "#3487c7", - primary: "#3a96dd", - tint10: "#4fa1e1", - tint20: "#65ade5", - tint30: "#83bdeb", - tint40: "#bfddf5", - tint50: "#dcedfa", - tint60: "#f6fafe", -}; - -const blue: ColorVariants = { - shade50: "#001322", - shade40: "#002440", - shade30: "#004377", - shade20: "#005ba1", - shade10: "#006cbf", - primary: "#0078d4", - tint10: "#1a86d9", - tint20: "#3595de", - tint30: "#5caae5", - tint40: "#a9d3f2", - tint50: "#d0e7f8", - tint60: "#f3f9fd", -}; - -const royalBlue: ColorVariants = { - shade50: "#000c16", - shade40: "#00172a", - shade30: "#002c4e", - shade20: "#003b6a", - shade10: "#00467e", - primary: "#004e8c", - tint10: "#125e9a", - tint20: "#286fa8", - tint30: "#4a89ba", - tint40: "#9abfdc", - tint50: "#c7dced", - tint60: "#f0f6fa", -}; - -const darkBlue: ColorVariants = { - shade50: "#000910", - shade40: "#00111f", - shade30: "#002039", - shade20: "#002b4e", - shade10: "#00335c", - primary: "#003966", - tint10: "#0e4a78", - tint20: "#215c8b", - tint30: "#4178a3", - tint40: "#92b5d1", - tint50: "#c2d6e7", - tint60: "#eff4f9", -}; - -const cornflower: ColorVariants = { - shade50: "#0d1126", - shade40: "#182047", - shade30: "#2c3c85", - shade20: "#3c51b4", - shade10: "#4760d5", - primary: "#4f6bed", - tint10: "#637cef", - tint20: "#778df1", - tint30: "#93a4f4", - tint40: "#c8d1fa", - tint50: "#e1e6fc", - tint60: "#f7f9fe", -}; - -const navy: ColorVariants = { - shade50: "#00061d", - shade40: "#000c36", - shade30: "#001665", - shade20: "#001e89", - shade10: "#0023a2", - primary: "#0027b4", - tint10: "#173bbd", - tint20: "#3050c6", - tint30: "#546fd2", - tint40: "#a3b2e8", - tint50: "#ccd5f3", - tint60: "#f2f4fc", -}; - -const lavender: ColorVariants = { - shade50: "#120f25", - shade40: "#221d46", - shade30: "#3f3682", - shade20: "#5649b0", - shade10: "#6656d1", - primary: "#7160e8", - tint10: "#8172eb", - tint20: "#9184ee", - tint30: "#a79cf1", - tint40: "#d2ccf8", - tint50: "#e7e4fb", - tint60: "#f9f8fe", -}; - -const purple: ColorVariants = { - shade50: "#0f0717", - shade40: "#1c0e2b", - shade30: "#341a51", - shade20: "#46236e", - shade10: "#532982", - primary: "#5c2e91", - tint10: "#6b3f9e", - tint20: "#7c52ab", - tint30: "#9470bd", - tint40: "#c6b1de", - tint50: "#e0d3ed", - tint60: "#f7f4fb", -}; - -const darkPurple: ColorVariants = { - shade50: "#0a0411", - shade40: "#130820", - shade30: "#240f3c", - shade20: "#311552", - shade10: "#3a1861", - primary: "#401b6c", - tint10: "#512b7e", - tint20: "#633e8f", - tint30: "#7e5ca7", - tint40: "#b9a3d3", - tint50: "#d8cce7", - tint60: "#f5f2f9", -}; - -const orchid: ColorVariants = { - shade50: "#16101d", - shade40: "#281e37", - shade30: "#4c3867", - shade20: "#674c8c", - shade10: "#795aa6", - primary: "#8764b8", - tint10: "#9373c0", - tint20: "#a083c9", - tint30: "#b29ad4", - tint40: "#d7caea", - tint50: "#e9e2f4", - tint60: "#f9f8fc", -}; - -const grape: ColorVariants = { - shade50: "#160418", - shade40: "#29072e", - shade30: "#4c0d55", - shade20: "#671174", - shade10: "#7a1589", - primary: "#881798", - tint10: "#952aa4", - tint20: "#a33fb1", - tint30: "#b55fc1", - tint40: "#d9a7e0", - tint50: "#eaceef", - tint60: "#faf2fb", -}; - -const berry: ColorVariants = { - shade50: "#1f091d", - shade40: "#3a1136", - shade30: "#6d2064", - shade20: "#932b88", - shade10: "#af33a1", - primary: "#c239b3", - tint10: "#c94cbc", - tint20: "#d161c4", - tint30: "#da7ed0", - tint40: "#edbbe7", - tint50: "#f5daf2", - tint60: "#fdf5fc", -}; - -const lilac: ColorVariants = { - shade50: "#1c0b1f", - shade40: "#35153a", - shade30: "#63276d", - shade20: "#863593", - shade10: "#9f3faf", - primary: "#b146c2", - tint10: "#ba58c9", - tint20: "#c36bd1", - tint30: "#cf87da", - tint40: "#e6bfed", - tint50: "#f2dcf5", - tint60: "#fcf6fd", -}; - -const pink: ColorVariants = { - shade50: "#24091b", - shade40: "#441232", - shade30: "#80215d", - shade20: "#ad2d7e", - shade10: "#cd3595", - primary: "#e43ba6", - tint10: "#e750b0", - tint20: "#ea66ba", - tint30: "#ef85c8", - tint40: "#f7c0e3", - tint50: "#fbddf0", - tint60: "#fef6fb", -}; - -const hotPink: ColorVariants = { - shade50: "#240016", - shade40: "#44002a", - shade30: "#7f004e", - shade20: "#ad006a", - shade10: "#cc007e", - primary: "#e3008c", - tint10: "#e61c99", - tint20: "#ea38a6", - tint30: "#ee5fb7", - tint40: "#f7adda", - tint50: "#fbd2eb", - tint60: "#fef4fa", -}; - -const magenta: ColorVariants = { - shade50: "#1f0013", - shade40: "#390024", - shade30: "#6b0043", - shade20: "#91005a", - shade10: "#ac006b", - primary: "#bf0077", - tint10: "#c71885", - tint20: "#ce3293", - tint30: "#d957a8", - tint40: "#eca5d1", - tint50: "#f5cee6", - tint60: "#fcf2f9", -}; - -const plum: ColorVariants = { - shade50: "#13000c", - shade40: "#240017", - shade30: "#43002b", - shade20: "#5a003b", - shade10: "#6b0045", - primary: "#77004d", - tint10: "#87105d", - tint20: "#98246f", - tint30: "#ad4589", - tint40: "#d696c0", - tint50: "#e9c4dc", - tint60: "#faf0f6", -}; - -const beige: ColorVariants = { - shade50: "#141313", - shade40: "#252323", - shade30: "#444241", - shade20: "#5d5958", - shade10: "#6e6968", - primary: "#7a7574", - tint10: "#8a8584", - tint20: "#9a9594", - tint30: "#afabaa", - tint40: "#d7d4d4", - tint50: "#eae8e8", - tint60: "#faf9f9", -}; - -const mink: ColorVariants = { - shade50: "#0f0e0e", - shade40: "#1c1b1a", - shade30: "#343231", - shade20: "#474443", - shade10: "#54514f", - primary: "#5d5a58", - tint10: "#706d6b", - tint20: "#84817e", - tint30: "#9e9b99", - tint40: "#cecccb", - tint50: "#e5e4e3", - tint60: "#f8f8f8", -}; - -const silver: ColorVariants = { - shade50: "#151818", - shade40: "#282d2e", - shade30: "#4a5356", - shade20: "#657174", - shade10: "#78868a", - primary: "#859599", - tint10: "#92a1a5", - tint20: "#a0aeb1", - tint30: "#b3bfc2", - tint40: "#d8dfe0", - tint50: "#eaeeef", - tint60: "#fafbfb", -}; - -const platinum: ColorVariants = { - shade50: "#111314", - shade40: "#1f2426", - shade30: "#3b4447", - shade20: "#505c60", - shade10: "#5f6d71", - primary: "#69797e", - tint10: "#79898d", - tint20: "#89989d", - tint30: "#a0adb2", - tint40: "#cdd6d8", - tint50: "#e4e9ea", - tint60: "#f8f9fa", -}; - -const anchor: ColorVariants = { - shade50: "#090a0b", - shade40: "#111315", - shade30: "#202427", - shade20: "#2b3135", - shade10: "#333a3f", - primary: "#394146", - tint10: "#4d565c", - tint20: "#626c72", - tint30: "#808a90", - tint40: "#bcc3c7", - tint50: "#dbdfe1", - tint60: "#f6f7f8", -}; - -const charcoal: ColorVariants = { - shade50: "#090909", - shade40: "#111111", - shade30: "#202020", - shade20: "#2b2b2b", - shade10: "#333333", - primary: "#393939", - tint10: "#515151", - tint20: "#686868", - tint30: "#888888", - tint40: "#c4c4c4", - tint50: "#dfdfdf", - tint60: "#f7f7f7", -}; - -export const sharedColors: GlobalSharedColors = { - darkRed, - burgundy, - cranberry, - red, - darkOrange, - bronze, - pumpkin, - orange, - peach, - marigold, - yellow, - gold, - brass, - brown, - darkBrown, - lime, - forest, - seafoam, - lightGreen, - green, - darkGreen, - lightTeal, - teal, - darkTeal, - cyan, - steel, - lightBlue, - blue, - royalBlue, - darkBlue, - cornflower, - navy, - lavender, - purple, - darkPurple, - orchid, - grape, - berry, - lilac, - pink, - hotPink, - magenta, - plum, - beige, - mink, - silver, - platinum, - anchor, - charcoal, -}; - -export const brandWeb: BrandVariants = { - 10: "#061724", - 20: "#082338", - 30: "#0a2e4a", - 40: "#0c3b5e", - 50: "#0e4775", - 60: "#0f548c", - 70: "#115ea3", - 80: "#0f6cbd", - 90: "#2886de", - 100: "#479ef5", - 110: "#62abf5", - 120: "#77b7f7", - 130: "#96c6fa", - 140: "#b4d6fa", - 150: "#cfe4fa", - 160: "#ebf3fc", -}; \ No newline at end of file diff --git a/esp/src/src-react/theme-shims/v8ThemeShim.ts b/esp/src/src-react/theme-shims/v8ThemeShim.ts deleted file mode 100644 index d5d90c0bd5d..00000000000 --- a/esp/src/src-react/theme-shims/v8ThemeShim.ts +++ /dev/null @@ -1,291 +0,0 @@ -import { createTheme, DefaultPalette, IPalette, Theme as ThemeV8, ISemanticColors, IFontStyles, IFontWeight, IEffects } from "@fluentui/react"; -import { BrandVariants, Theme as ThemeV9 } from "@fluentui/react-components"; -import { black, blackAlpha, grey, sharedColors, white, whiteAlpha } from "./themeDuplicates"; - -/** - * Creates a v8 palette given a brand ramp - */ -const mapPalette = (brandColors: BrandVariants): IPalette => { - return { - ...DefaultPalette, - - // map v9 chromatic - black: black, - blackTranslucent40: blackAlpha[40], - neutralDark: grey[8], - neutralPrimary: grey[14], - neutralPrimaryAlt: grey[22], - neutralSecondary: grey[36], - neutralSecondaryAlt: grey[52], - neutralTertiary: grey[62], - neutralTertiaryAlt: grey[78], - neutralQuaternary: grey[82], - neutralQuaternaryAlt: grey[88], - neutralLight: grey[92], - neutralLighter: grey[96], - neutralLighterAlt: grey[98], - accent: brandColors[80], - white: white, - whiteTranslucent40: whiteAlpha[40], - - // map v9 shared colors - yellowDark: sharedColors.marigold.shade10, - yellow: sharedColors.yellow.primary, - yellowLight: sharedColors.yellow.tint40, - orange: sharedColors.orange.primary, - orangeLight: sharedColors.orange.tint20, - orangeLighter: sharedColors.orange.tint40, - redDark: sharedColors.darkRed.primary, - red: sharedColors.red.primary, - magentaDark: sharedColors.magenta.shade30, - magenta: sharedColors.magenta.primary, - magentaLight: sharedColors.magenta.tint30, - purpleDark: sharedColors.darkPurple.primary, - purple: sharedColors.purple.primary, - purpleLight: sharedColors.purple.tint40, - blueDark: sharedColors.darkBlue.primary, - blueMid: sharedColors.royalBlue.primary, - blue: sharedColors.blue.primary, - blueLight: sharedColors.lightBlue.primary, - tealDark: sharedColors.darkTeal.primary, - teal: sharedColors.teal.primary, - tealLight: sharedColors.lightTeal.primary, - greenDark: sharedColors.darkGreen.primary, - green: sharedColors.green.primary, - greenLight: sharedColors.lightGreen.primary, - - // map the v9 brand ramp - themeDarker: brandColors[40], - themeDark: brandColors[60], - themeDarkAlt: brandColors[70], - themePrimary: brandColors[80], - themeSecondary: brandColors[90], - themeTertiary: brandColors[120], - themeLight: brandColors[140], - themeLighter: brandColors[150], - themeLighterAlt: brandColors[160], - }; -}; - -/** - * Returns v9 theme colors overlaid on a base set of v8 semantic colors - */ -const mapSemanticColors = (baseColors: ISemanticColors, theme: ThemeV9): ISemanticColors => { - return { - ...baseColors, - accentButtonBackground: theme.colorBrandBackground, - accentButtonText: theme.colorNeutralForegroundOnBrand, - actionLink: theme.colorNeutralForeground1, - actionLinkHovered: theme.colorNeutralForeground1Hover, - // blockingBackground, - // blockingIcon, - bodyBackground: theme.colorNeutralBackground1, - bodyBackgroundChecked: theme.colorNeutralBackground1Selected, - bodyBackgroundHovered: theme.colorNeutralBackground1Hover, - bodyDivider: theme.colorNeutralStroke2, - bodyFrameBackground: theme.colorNeutralBackground1, - bodyFrameDivider: theme.colorNeutralStroke2, - bodyStandoutBackground: theme.colorNeutralBackground2, - bodySubtext: theme.colorNeutralForeground2, - bodyText: theme.colorNeutralForeground1, - bodyTextChecked: theme.colorNeutralForeground1Selected, - buttonBackground: theme.colorNeutralBackground1, - buttonBackgroundChecked: theme.colorNeutralBackground1Selected, - buttonBackgroundCheckedHovered: theme.colorNeutralBackground1Hover, - buttonBackgroundDisabled: theme.colorNeutralBackgroundDisabled, - buttonBackgroundHovered: theme.colorNeutralBackground1Hover, - buttonBackgroundPressed: theme.colorNeutralBackground1Pressed, - buttonBorder: theme.colorNeutralStroke1, - buttonBorderDisabled: theme.colorNeutralStrokeDisabled, - buttonText: theme.colorNeutralForeground1, - buttonTextChecked: theme.colorNeutralForeground1, - buttonTextCheckedHovered: theme.colorNeutralForeground1, - buttonTextDisabled: theme.colorNeutralForegroundDisabled, - buttonTextHovered: theme.colorNeutralForeground1, - buttonTextPressed: theme.colorNeutralForeground1, - cardShadow: theme.shadow4, - cardShadowHovered: theme.shadow8, - cardStandoutBackground: theme.colorNeutralBackground1, - defaultStateBackground: theme.colorNeutralBackground2, - disabledBackground: theme.colorNeutralBackgroundDisabled, - disabledBodySubtext: theme.colorNeutralForegroundDisabled, - disabledBodyText: theme.colorNeutralForegroundDisabled, - disabledBorder: theme.colorNeutralStrokeDisabled, - disabledSubtext: theme.colorNeutralForegroundDisabled, - disabledText: theme.colorNeutralForegroundDisabled, - // errorBackground, - // errorIcon, - // errorText: , - focusBorder: theme.colorStrokeFocus2, - // infoBackground, - // infoIcon, - inputBackground: theme.colorNeutralBackground1, - inputBackgroundChecked: theme.colorBrandBackground, - inputBackgroundCheckedHovered: theme.colorBrandBackgroundHover, - inputBorder: theme.colorNeutralStrokeAccessible, - inputBorderHovered: theme.colorNeutralStrokeAccessibleHover, - inputFocusBorderAlt: theme.colorBrandStroke1, - inputForegroundChecked: theme.colorNeutralForegroundOnBrand, - inputIcon: theme.colorNeutralForeground3, - inputIconDisabled: theme.colorNeutralForegroundDisabled, - inputIconHovered: theme.colorNeutralForeground3, - inputPlaceholderBackgroundChecked: theme.colorBrandBackgroundInvertedSelected, - inputPlaceholderText: theme.colorNeutralForeground4, - inputText: theme.colorNeutralForeground1, - inputTextHovered: theme.colorNeutralForeground1Hover, - link: theme.colorBrandForegroundLink, - linkHovered: theme.colorBrandForegroundLinkHover, - listBackground: theme.colorNeutralBackground1, - listHeaderBackgroundHovered: theme.colorNeutralBackground1Hover, - listHeaderBackgroundPressed: theme.colorNeutralBackground1Pressed, - listItemBackgroundChecked: theme.colorNeutralBackground1Selected, - listItemBackgroundCheckedHovered: theme.colorNeutralBackground1Selected, - listItemBackgroundHovered: theme.colorNeutralBackground1Hover, - listText: theme.colorNeutralForeground1, - listTextColor: theme.colorNeutralForeground1, - menuBackground: theme.colorNeutralBackground1, - menuDivider: theme.colorNeutralStroke2, - menuHeader: theme.colorNeutralForeground3, - menuIcon: theme.colorNeutralForeground1, - menuItemBackgroundChecked: theme.colorNeutralBackground1, - menuItemBackgroundHovered: theme.colorNeutralBackground1Hover, - menuItemBackgroundPressed: theme.colorNeutralBackground1Hover, - menuItemText: theme.colorNeutralForeground1, - menuItemTextHovered: theme.colorNeutralForeground1Hover, - messageLink: theme.colorBrandForegroundLink, - messageLinkHovered: theme.colorBrandForegroundLinkHover, - messageText: theme.colorNeutralForeground1, - primaryButtonBackground: theme.colorBrandBackground, - primaryButtonBackgroundDisabled: theme.colorNeutralBackgroundDisabled, - primaryButtonBackgroundHovered: theme.colorBrandBackgroundHover, - primaryButtonBackgroundPressed: theme.colorBrandBackgroundPressed, - primaryButtonBorder: theme.colorTransparentStroke, - primaryButtonText: theme.colorNeutralForegroundOnBrand, - primaryButtonTextDisabled: theme.colorNeutralForegroundDisabled, - primaryButtonTextHovered: theme.colorNeutralForegroundOnBrand, - primaryButtonTextPressed: theme.colorNeutralForegroundOnBrand, - // severeWarningBackground, - // severeWarningIcon, - // smallInputBorder, - // successBackground, - // successIcon, - // successText: , - // variantBorder, - // variantBorderHovered, - // warningBackground, - // warningHighlight, - // warningIcon, - // warningText: , - }; -}; - -/** - * Overlays v9 fonts on a set of base v8 fonts. - */ -const mapFonts = (baseFonts: IFontStyles, theme: ThemeV9): IFontStyles => { - return { - ...baseFonts, - tiny: { - ...baseFonts.tiny, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeBase100, - fontWeight: theme.fontWeightRegular as IFontWeight, - }, - xSmall: { - ...baseFonts.xSmall, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeBase100, - fontWeight: theme.fontWeightRegular as IFontWeight, - }, - small: { - ...baseFonts.small, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeBase200, - fontWeight: theme.fontWeightRegular as IFontWeight, - }, - smallPlus: { - ...baseFonts.smallPlus, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeBase200, - fontWeight: theme.fontWeightRegular as IFontWeight, - }, - medium: { - ...baseFonts.medium, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeBase300, - fontWeight: theme.fontWeightRegular as IFontWeight, - }, - mediumPlus: { - ...baseFonts.mediumPlus, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeBase400, - fontWeight: theme.fontWeightRegular as IFontWeight, - }, - large: { - ...baseFonts.large, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeBase400, - fontWeight: theme.fontWeightRegular as IFontWeight, - }, - xLarge: { - ...baseFonts.xxLarge, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeBase500, - fontWeight: theme.fontWeightSemibold as IFontWeight, - }, - xxLarge: { - ...baseFonts.xxLarge, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeHero700, - fontWeight: theme.fontWeightSemibold as IFontWeight, - }, - superLarge: { - ...baseFonts.superLarge, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeHero900, - fontWeight: theme.fontWeightSemibold as IFontWeight, - }, - mega: { - ...baseFonts.mega, - fontFamily: theme.fontFamilyBase, - fontSize: theme.fontSizeHero1000, - fontWeight: theme.fontWeightSemibold as IFontWeight, - }, - }; -}; - -/** - * Overlays v9 shadows and border radii on a base set of v8 effects. - */ -const mapEffects = (baseEffects: IEffects, theme: ThemeV9): IEffects => { - return { - ...baseEffects, - elevation4: theme.shadow4, - elevation8: theme.shadow8, - elevation16: theme.shadow16, - elevation64: theme.shadow64, - roundedCorner2: theme.borderRadiusSmall, - roundedCorner4: theme.borderRadiusMedium, - roundedCorner6: theme.borderRadiusLarge, - }; -}; - -/** - * Creates a v8 theme from v9 brand colora and theme. - * You can optionally pass a v8 base theme. - * Otherwise the default v8 theme is used. - * - * The v9 colors, fonts, and effects are applied on top of the v8 theme - * to allow v8 components to look as much like v9 components as possible. - */ -export const createv8Theme = (brandColors: BrandVariants, themeV9: ThemeV9, themeV8?: ThemeV8): ThemeV8 => { - const baseTheme = themeV8 || createTheme(); - - return { - ...baseTheme, - palette: mapPalette(brandColors), - semanticColors: mapSemanticColors(baseTheme.semanticColors, themeV9), - fonts: mapFonts(baseTheme.fonts, themeV9), - effects: mapEffects(baseTheme.effects, themeV9), - }; -}; diff --git a/esp/src/src-react/theme-shims/v9ThemeShim.ts b/esp/src/src-react/theme-shims/v9ThemeShim.ts deleted file mode 100644 index 88b99a188f0..00000000000 --- a/esp/src/src-react/theme-shims/v9ThemeShim.ts +++ /dev/null @@ -1,216 +0,0 @@ -// See https://github.com/microsoft/fluentui/blob/master/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts - -import { IEffects, IPalette, Theme as ThemeV8 } from "@fluentui/react"; -import { - BorderRadiusTokens, - ColorTokens, - ShadowTokens, - Theme as ThemeV9, - webLightTheme, -} from "@fluentui/react-components"; -import { blackAlpha, whiteAlpha, grey, grey10Alpha, grey12Alpha } from "./themeDuplicates"; - -/** - * Creates v9 color tokens from a v8 palette. - */ -const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { - return { - colorNeutralForeground1: palette.neutralPrimary, - colorNeutralForeground1Hover: palette.neutralPrimary, - colorNeutralForeground1Pressed: palette.neutralPrimary, - colorNeutralForeground1Selected: palette.neutralPrimary, - colorNeutralForeground2: palette.neutralSecondary, - colorNeutralForeground2Hover: palette.neutralPrimary, - colorNeutralForeground2Pressed: palette.neutralPrimary, - colorNeutralForeground2Selected: palette.neutralPrimary, - colorNeutralForeground2BrandHover: palette.themePrimary, - colorNeutralForeground2BrandPressed: palette.themeDarkAlt, - colorNeutralForeground2BrandSelected: palette.themePrimary, - colorNeutralForeground3: palette.neutralTertiary, - colorNeutralForeground3Hover: palette.neutralSecondary, - colorNeutralForeground3Pressed: palette.neutralSecondary, - colorNeutralForeground3Selected: palette.neutralSecondary, - colorNeutralForeground3BrandHover: palette.themePrimary, - colorNeutralForeground3BrandPressed: palette.themeDarkAlt, - colorNeutralForeground3BrandSelected: palette.themePrimary, - colorNeutralForeground4: palette.neutralQuaternary, - colorNeutralForegroundDisabled: palette.neutralTertiaryAlt, - colorNeutralForegroundInvertedDisabled: whiteAlpha[40], - colorBrandForegroundLink: palette.themeDarkAlt, - colorBrandForegroundLinkHover: palette.themeDark, - colorBrandForegroundLinkPressed: palette.themeDarker, - colorBrandForegroundLinkSelected: palette.themeDarkAlt, - colorNeutralForeground2Link: palette.neutralSecondary, - colorNeutralForeground2LinkHover: palette.neutralPrimary, - colorNeutralForeground2LinkPressed: palette.neutralPrimary, - colorNeutralForeground2LinkSelected: palette.neutralPrimary, - colorCompoundBrandForeground1: palette.themePrimary, - colorCompoundBrandForeground1Hover: palette.themeDarkAlt, - colorCompoundBrandForeground1Pressed: palette.themeDark, - colorBrandForeground1: palette.themePrimary, - colorBrandForeground2: palette.themeDarkAlt, - colorBrandForeground2Hover: palette.themeDarkAlt, - colorBrandForeground2Pressed: palette.themeDarkAlt, - colorNeutralForeground1Static: palette.neutralPrimary, - colorNeutralForegroundInverted: palette.white, - colorNeutralForegroundInvertedHover: palette.white, - colorNeutralForegroundInvertedPressed: palette.white, - colorNeutralForegroundInvertedSelected: palette.white, - colorNeutralForegroundOnBrand: palette.white, - colorNeutralForegroundStaticInverted: palette.white, - colorNeutralForegroundInvertedLink: palette.white, - colorNeutralForegroundInvertedLinkHover: palette.white, - colorNeutralForegroundInvertedLinkPressed: palette.white, - colorNeutralForegroundInvertedLinkSelected: palette.white, - colorNeutralForegroundInverted2: palette.white, - colorBrandForegroundInverted: palette.themeSecondary, - colorBrandForegroundInvertedHover: palette.themeTertiary, - colorBrandForegroundInvertedPressed: palette.themeSecondary, - colorBrandForegroundOnLight: palette.themePrimary, - colorBrandForegroundOnLightHover: palette.themeDarkAlt, - colorBrandForegroundOnLightPressed: palette.themeDark, - colorBrandForegroundOnLightSelected: palette.themeDark, - colorNeutralBackground1: palette.white, - colorNeutralBackground1Hover: palette.neutralLighter, - colorNeutralBackground1Pressed: palette.neutralQuaternaryAlt, - colorNeutralBackground1Selected: palette.neutralLight, - colorNeutralBackground2: palette.neutralLighterAlt, - colorNeutralBackground2Hover: palette.neutralLighter, - colorNeutralBackground2Pressed: palette.neutralQuaternaryAlt, - colorNeutralBackground2Selected: palette.neutralLight, - colorNeutralBackground3: palette.neutralLighter, - colorNeutralBackground3Hover: palette.neutralLight, - colorNeutralBackground3Pressed: palette.neutralQuaternary, - colorNeutralBackground3Selected: palette.neutralQuaternaryAlt, - colorNeutralBackground4: palette.neutralLighter, - colorNeutralBackground4Hover: palette.neutralLighterAlt, - colorNeutralBackground4Pressed: palette.neutralLighter, - colorNeutralBackground4Selected: palette.white, - colorNeutralBackground5: palette.neutralLight, - colorNeutralBackground5Hover: palette.neutralLighter, - colorNeutralBackground5Pressed: palette.neutralLighter, - colorNeutralBackground5Selected: palette.neutralLighterAlt, - colorNeutralBackground6: palette.neutralLight, - colorNeutralBackgroundStatic: grey[20], - colorNeutralBackgroundInverted: palette.neutralSecondary, - colorNeutralBackgroundAlpha: inverted ? grey10Alpha[50] : whiteAlpha[50], - colorNeutralBackgroundAlpha2: inverted ? grey12Alpha[70] : whiteAlpha[80], - colorSubtleBackground: "transparent", - colorSubtleBackgroundHover: palette.neutralLighter, - colorSubtleBackgroundPressed: palette.neutralQuaternaryAlt, - colorSubtleBackgroundSelected: palette.neutralLight, - colorSubtleBackgroundLightAlphaHover: inverted ? whiteAlpha[10] : whiteAlpha[80], - colorSubtleBackgroundLightAlphaPressed: inverted ? whiteAlpha[5] : whiteAlpha[50], - colorSubtleBackgroundLightAlphaSelected: "transparent", - colorSubtleBackgroundInverted: "transparent", - colorSubtleBackgroundInvertedHover: blackAlpha[10], - colorSubtleBackgroundInvertedPressed: blackAlpha[30], - colorSubtleBackgroundInvertedSelected: blackAlpha[20], - colorTransparentBackground: "transparent", - colorTransparentBackgroundHover: "transparent", - colorTransparentBackgroundPressed: "transparent", - colorTransparentBackgroundSelected: "transparent", - colorNeutralBackgroundDisabled: palette.neutralLighter, - colorNeutralBackgroundInvertedDisabled: whiteAlpha[10], - colorNeutralStencil1: palette.neutralLight, - colorNeutralStencil2: palette.neutralLighterAlt, - colorNeutralStencil1Alpha: inverted ? whiteAlpha[10] : blackAlpha[10], - colorNeutralStencil2Alpha: inverted ? whiteAlpha[5] : blackAlpha[5], - colorBackgroundOverlay: blackAlpha[40], - colorScrollbarOverlay: blackAlpha[50], - colorBrandBackground: palette.themePrimary, - colorBrandBackgroundHover: palette.themeDarkAlt, - colorBrandBackgroundPressed: palette.themeDarker, - colorBrandBackgroundSelected: palette.themeDark, - colorCompoundBrandBackground: palette.themePrimary, - colorCompoundBrandBackgroundHover: palette.themeDarkAlt, - colorCompoundBrandBackgroundPressed: palette.themeDark, - colorBrandBackgroundStatic: palette.themePrimary, - colorBrandBackground2: palette.themeLighterAlt, - colorBrandBackground2Hover: palette.themeLighterAlt, - colorBrandBackground2Pressed: palette.themeLighterAlt, - colorBrandBackgroundInverted: palette.white, - colorBrandBackgroundInvertedHover: palette.themeLighterAlt, - colorBrandBackgroundInvertedPressed: palette.themeLight, - colorBrandBackgroundInvertedSelected: palette.themeLighter, - colorNeutralStrokeAccessible: palette.neutralSecondary, - colorNeutralStrokeAccessibleHover: palette.neutralSecondary, - colorNeutralStrokeAccessiblePressed: palette.neutralSecondary, - colorNeutralStrokeAccessibleSelected: palette.themePrimary, - colorNeutralStroke1: palette.neutralQuaternary, - colorNeutralStroke1Hover: palette.neutralTertiaryAlt, - colorNeutralStroke1Pressed: palette.neutralTertiaryAlt, - colorNeutralStroke1Selected: palette.neutralTertiaryAlt, - colorNeutralStroke2: palette.neutralQuaternaryAlt, - colorNeutralStroke3: palette.neutralLighter, - colorNeutralStrokeSubtle: palette.neutralQuaternaryAlt, - colorNeutralStrokeOnBrand: palette.white, - colorNeutralStrokeOnBrand2: palette.white, - colorNeutralStrokeOnBrand2Hover: palette.white, - colorNeutralStrokeOnBrand2Pressed: palette.white, - colorNeutralStrokeOnBrand2Selected: palette.white, - colorBrandStroke1: palette.themePrimary, - colorBrandStroke2: palette.themeLight, - colorBrandStroke2Hover: palette.themeLight, - colorBrandStroke2Pressed: palette.themeLight, - colorBrandStroke2Contrast: palette.themeLight, - colorCompoundBrandStroke: palette.themePrimary, - colorCompoundBrandStrokeHover: palette.themeDarkAlt, - colorCompoundBrandStrokePressed: palette.themeDark, - colorNeutralStrokeDisabled: palette.neutralQuaternaryAlt, - colorNeutralStrokeInvertedDisabled: whiteAlpha[40], - colorTransparentStroke: "transparent", - colorTransparentStrokeInteractive: "transparent", - colorTransparentStrokeDisabled: "transparent", - colorNeutralStrokeAlpha: inverted ? whiteAlpha[10] : blackAlpha[5], - colorNeutralStrokeAlpha2: whiteAlpha[20], - colorStrokeFocus1: palette.white, - colorStrokeFocus2: palette.black, - colorNeutralShadowAmbient: "rgba(0,0,0,0.12)", - colorNeutralShadowKey: "rgba(0,0,0,0.14)", - colorNeutralShadowAmbientLighter: "rgba(0,0,0,0.06)", - colorNeutralShadowKeyLighter: "rgba(0,0,0,0.07)", - colorNeutralShadowAmbientDarker: "rgba(0,0,0,0.20)", - colorNeutralShadowKeyDarker: "rgba(0,0,0,0.24)", - colorBrandShadowAmbient: "rgba(0,0,0,0.30)", - colorBrandShadowKey: "rgba(0,0,0,0.25)", - }; -}; - -/** - * Creates v9 shadow tokens from v8 effects. - */ -const mapShadowTokens = (effects: IEffects): Partial => { - return { - shadow4: effects.elevation4, - shadow8: effects.elevation8, - shadow16: effects.elevation16, - shadow64: effects.elevation64, - }; -}; - -/** - * Creates v9 border radius tokens from v8 effects - */ -const mapBorderRadiusTokens = (effects: IEffects): Partial => { - return { - borderRadiusSmall: effects.roundedCorner2, - borderRadiusMedium: effects.roundedCorner4, - borderRadiusLarge: effects.roundedCorner6, - }; -}; - -/** - * Creates a v9 theme from a v8 theme. - * You can optional pass a base v9 theme; otherwise webLightTheme is used. - */ -export const createv9Theme = (themeV8: ThemeV8, baseThemeV9?: ThemeV9): ThemeV9 => { - const baseTheme = baseThemeV9 ?? webLightTheme; - - return { - ...baseTheme, - ...mapAliasColors(themeV8.palette, themeV8.isInverted), - ...mapShadowTokens(themeV8.effects), - ...mapBorderRadiusTokens(themeV8.effects), - }; -}; \ No newline at end of file diff --git a/esp/src/src-react/themes.ts b/esp/src/src-react/themes.ts index f12e003ec6b..32cc98d1b52 100644 --- a/esp/src/src-react/themes.ts +++ b/esp/src/src-react/themes.ts @@ -6,8 +6,7 @@ import { createTheme, PartialTheme } from "@fluentui/react"; import { BrandVariants, createDarkTheme, createLightTheme } from "@fluentui/react-components"; -import { createv8Theme } from "./theme-shims/v8ThemeShim"; -import { createv9Theme } from "./theme-shims/v9ThemeShim"; +import { createV8Theme, createV9Theme } from "@fluentui/react-migration-v8-v9"; const lightThemeOld: PartialTheme = { palette: { @@ -120,21 +119,25 @@ const brandOffice: BrandVariants = { 160: "#f9dcd1", }; -const brandMode: "web" | "teams" | "office" = "web"; -const brand = brandMode === "web" ? brandWeb : brandMode === "teams" ? brandTeams : brandOffice; +const brands = { + "web": brandWeb, + "office": brandOffice, + "teams": brandTeams +}; +const brand = brands["web"]; namespace current { export const lightTheme = createTheme(lightThemeOld, true); export const darkTheme = createTheme(darkThemeOld, true); - export const lightThemeV9 = createv9Theme(lightTheme, createLightTheme(brand)); - export const darkThemeV9 = createv9Theme(darkTheme, createDarkTheme(brand)); + export const lightThemeV9 = createV9Theme(lightTheme, createLightTheme(brand)); + export const darkThemeV9 = createV9Theme(darkTheme, createDarkTheme(brand)); } namespace next { export const lightThemeV9 = createLightTheme(brand); export const darkThemeV9 = createDarkTheme(brand); - export const lightTheme = createv8Theme(brand, lightThemeV9, current.lightTheme); - export const darkTheme = createv8Theme(brand, darkThemeV9, current.darkTheme); + export const lightTheme = createV8Theme(brand, lightThemeV9, false, current.lightTheme); + export const darkTheme = createV8Theme(brand, darkThemeV9, true, current.darkTheme); } const useNext = false;