@microsoft/load-themed-styles 1.10.288 → 1.10.291

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/load-themed-styles",
-  "version": "1.10.288",
+  "version": "1.10.291",
   "description": "Loads themed styles.",
   "license": "MIT",
   "repository": {
@@ -14,14 +14,13 @@
   "keywords": [],
   "devDependencies": {
     "@rushstack/eslint-config": "3.0.0",
-    "@rushstack/heft": "0.47.3",
-    "@rushstack/heft-web-rig": "0.11.3",
+    "@rushstack/heft": "0.47.5",
+    "@rushstack/heft-web-rig": "0.11.6",
     "@types/heft-jest": "1.0.1",
     "@types/webpack-env": "1.13.0"
   },
   "scripts": {
     "build": "heft build --clean",
     "_phase:build": "heft build --clean"
-  },
-  "readme": "# @microsoft/load-themed-styles\n[![npm version](https://badge.fury.io/js/%40microsoft%2Fload-themed-styles.svg)](https://badge.fury.io/js/%40microsoft%2Fload-themed-styles)\n\n> Loads a string of style rules, but supports detokenizing theme constants built within it.\n\n## Install\n\nInstall with [npm](https://www.npmjs.com/)\n\n```\n$ npm install --save @microsoft/load-themed-styles\n```\n\n## Usage\n\nTo load a given string of styles, you can do this in TypeScript or ES6:\n\n```TypeScript\nimport { loadStyles } from '@microsoft/load-themed-styles';\n\nloadStyles('body { background: red; }');\n```\n\nThis will register any set of styles given. However, in the above example the color is hardcoded to red. To make this theme-able, replace it with the string token in this format:\n\n```\n\"[theme:{variableName}, default:{defaultValue}]\"\n```\n\nFor example:\n\n```js\nloadStyles('body { background: \"[theme:primaryBackgroundColor, default: blue]\"');\n```\n\nWhen loading, the background will use the default value, blue. Providing your own theme values using the `loadTheme` function:\n\n```js\nimport { loadStyles, loadTheme } from '@microsoft/load-themed-styles';\n\nloadTheme({\n  primaryBackgroundColor: \"#EAEAEA\"\n});\n\nloadStyles('body { background: \"[theme:primaryBackgroundColor, default: #FFAAFA]\"');\n```\n\nThis will register #EAEAEA as the body's background color. If you call `loadTheme` again after styles have already been registered, it will replace the style elements with retokenized values.\n\n## Security considerations\n\nIn order for `style` elements to be added to the DOM, a `nonce` attribute may need to be attached to the elements to adhere to a CSP requirements. To provide the value, you can specify the `nonce` value by defining a `CSPSettings` object on the page in global scope:\n\n```js\nwindow.CSPSettings = {\n  nonce: 'nonce'\n};\n```\n\n## Links\n\n- [CHANGELOG.md](\n  https://github.com/microsoft/rushstack/blob/main/libraries/load-themed-styles/CHANGELOG.md) - Find\n  out what's new in the latest version\n\n`@microsoft/load-themed-styles` is part of the [Rush Stack](https://rushstack.io/) family of projects.\n"
+  }
 }