{"_id":"@fluentui/react-theming","_rev":"52-416f8a702f082eb25ef3cb9d74e01369","name":"@fluentui/react-theming","dist-tags":{"canary":"0.31.1-alpha.6224","latest":"0.50.0","experimental":"0.47.10-experimental.0","patch":"0.47.15"},"versions":{"0.41.1":{"name":"@fluentui/react-theming","version":"0.41.1","license":"MIT","_id":"@fluentui/react-theming@0.41.1","maintainers":[{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"}],"homepage":"https://github.com/microsoft/fluent-ui#readme","bugs":{"url":"https://github.com/microsoft/fluent-ui/issues"},"dist":{"shasum":"3458f55ef4fb19e7a8774d9d490d30a9638b0c00","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.41.1.tgz","fileCount":91,"integrity":"sha512-xy8fLB/DJsptpMgdvaa1LdIxRc7Cs5OS96RGzMpX+jh2BPDPaomD8v6+as2HHghbtded6dx7chsTXPU13kzVSw==","signatures":[{"sig":"MEUCIA4JJBqA+d6Nw4d/KOkZkxtox21SQPqwfdNZ/WIVkV0OAiEAt6S54vgQCN+iuD70m++ntoa40KImka3nGjDZuK0PYt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8B6GCRA9TVsSAnZWagAAZhoP/jrCS7xIxOVD0iHqe89I\nJFkzKT9NPpfJkxgHqUcA1aW5BNTSJwRqtVAPRBTxxkoicF9bJvBhdchpMGDg\nKe8DvwVuNKKcxamT9n4JOytvozVxfnUtyMyiWerEFP5Se1UdzFeOjK6B7Jr0\nlR5IDU6hcew1REiJsdM6Per94+2OdQcpq7PL/Ie3FJed6j+hms/cNwQPQPiq\nrsgYpY2U1wyMlSjDD7ouRJD3R3O1hO5PREWEVyWDnZlRIQpHQ55C5afj6n60\n3RPy6N5ojFMIqCkxiWU/zaQMo18OdhZ0hprTh2YWPhYSD+RXf50Xeln2E3sB\n23JehNZdBVakyYDS/n0QgKhWIZ/Ge/1Mz66HZqHN01bSQHoC57rvzSpo1Y7z\nTN6ySkrC23XOSDbJsrqikjqcnnuM6HOoRzBRQr+PPETtoqhg9rq4HNheCdrA\nhF4ThACRI9j5PPufhnLzHyzP6vM4lK/QxxwBqLrf9clTtsZ+ndtWwgOZxOx8\nT1jI7s5R/NMHe5ydQEuLHIsOueVMYHToot3jrChTLP+Fo+sZflRsuJq1opZp\nYS11/hcs+F0hFR+gCdeSYNsxukQwQH7qSc5SgfL4x+y1AabnPt89wM46tiYB\nuYWGBrimzZlH9Dx5UDl9EG24+/V2Eb5QCLlx2KoIvA/3k81CsrPlK3HmgHVj\n8YuV\r\n=C3FC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","gitHead":"0bdfb5773c214f11887bba5786ca7bb0b1669c92","scripts":{"just":"just-scripts","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","start-test":"just-scripts test:watch","update-snapshots":"just-scripts jest:snapshots"},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/microsoft/fluent-ui.git","type":"git"},"_npmVersion":"lerna/3.11.1/node@v10.15.3+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"10.15.3","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.5.0","@uifabric/merge-styles":"^7.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^16.8.0","@types/jss":"^9.5.8","@types/react":"^16.8.10","@fluentui/scripts":"^0.41.1"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.41.1_1576017541580_0.2947313108184264","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@fluentui/react-theming","version":"0.42.0","license":"MIT","_id":"@fluentui/react-theming@0.42.0","maintainers":[{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"}],"homepage":"https://github.com/microsoft/fluent-ui#readme","bugs":{"url":"https://github.com/microsoft/fluent-ui/issues"},"dist":{"shasum":"7f98e88bf403a707e26a63444bc1d4b1cdc0d3f2","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.42.0.tgz","fileCount":91,"integrity":"sha512-e5SzPSUNvl6shHRz4zODLpC17d9tHS7nJ3V+0i4TAAwC0SJWMiZCcQ1yyS5puIS6mae+FlDO67YcnBE9iiaHlA==","signatures":[{"sig":"MEQCIA2GxPFH5clZfkPia4yqJ4viIWJb/yGg5aDcx4uk6hBQAiA/qRNCneN6pnEIul0Eq66lkFcps9RvJEQQC6EbkDF4Rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8zIjCRA9TVsSAnZWagAAiAsP+wSFNWc3qgmj3JyC/UsK\np3B5p3OEqnTgy+UUaeF4wl3fW9ESgNuLXfBFKhF5zB6QqIh0ol/QFfsrLi0m\nzQQhM0HvP5/gIJv1l1C6mA0qlYTaW1TOIVJH6nJO+g53LwJKPm9mqIAbqJUR\nvM+9/EBvSWxkB03mXsH7dSK5ZxzsFKpynH8Iq6Uiefy7DX3556G6sYS2sVAB\nYhzDztUm5g20brljTwJE6KctSO5ejkKGubZgDsAUNWhdOsrB12VLmI58NzTc\n5Na29ZLP9EGRcmcjwI4JvEkzZijo6emauK3oUxA55eKSHxQjZHSGZKlSNAMl\njYarwVSwnGxFSvCBdJybL/DvJbUrYebtm8ow0s0QjJe2cB69feM+Y3MIq5pF\nFXRSOwy1ch2kJYOE89KOZYiFlEXLh8wtzia6C1pEZfRmjWOqxuF79KBQ7PNA\n/9TEWHTDRpp3dvZ7u/2mY+Uj6FaRWP2vCWw9AXyRMR04wiX1pe5/63CPdCAF\nHcrJTeiy8rpb2Z3bsxGiKrdIIvJW1WffKF87Ba0xvkan46zOzWZKn09E8lZf\n+s5E/l/93I3Tx0ofsNyOG147KrwuTBEb5UjfMhsLAnRId0kcG//zDGXff1x1\niO3n0Q6mrnFuNgn7riXr8I3TEGDHtIQQPO+E5OnFO6kaioyFzf2i+pfbFE30\nRRoK\r\n=q3BK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","gitHead":"c0b48da35e009d4b635b2fb8cf242e8b0719d576","scripts":{"just":"just-scripts","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","start-test":"just-scripts test:watch","update-snapshots":"just-scripts jest:snapshots"},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/microsoft/fluent-ui.git","type":"git"},"_npmVersion":"lerna/3.11.1/node@v10.15.3+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"10.15.3","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.5.0","@uifabric/merge-styles":"^7.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^16.8.0","@types/jss":"^9.5.8","@types/react":"^16.8.10","@fluentui/scripts":"^0.42.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.42.0_1576219171415_0.6109770114289048","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@fluentui/react-theming","version":"0.43.0","license":"MIT","_id":"@fluentui/react-theming@0.43.0","maintainers":[{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"}],"homepage":"https://github.com/microsoft/fluent-ui#readme","bugs":{"url":"https://github.com/microsoft/fluent-ui/issues"},"dist":{"shasum":"e03dd6f3c42654370cb70d421b5556775a172791","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.43.0.tgz","fileCount":91,"integrity":"sha512-jVJ3d8kHTVX2K3Flma12Z933pGzMLIsT/yu1H/gTHCqGEzgu7cZPlDLn1QyDpMEJtPCmEWdZX2Y2ZZtx6LQNmQ==","signatures":[{"sig":"MEUCIQDIkyaLHWoztmYIK8ei8oxW8BVppctx2fc7YgzkU3VzCAIgV4cpPgpcdRpQYgsTMjLPmzJfhesKdW7mLKWulOQSXcY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFgddCRA9TVsSAnZWagAAjLUP/AlKTobY8HhAepDdkoFI\nS70dlkGNglGYdn9hTBCTW0YyPiwQye4/s0S9SzNMMLwDyu+CAsyAwyWLfJ3v\nIO9TSNRr40rxPEdoGFQsLPcDEQ1Q8khDeWOzWXvDZKNAUZoBDzipUcOx7ivG\n6hXRzaEJL1AMbHZWE51ULl9dhxhkj/LGR1wlEaVENY/TfETRvoQYF5DamLML\nngCTFSBdA4yOL7/jqeg4bCLWVzOaAzU7BrZ/yqCRhk1auOor4biJ6GpbyRU8\nV+j9WkqMwIHuMKfSZnWeZlCIDwGxG113i2wExQAEkx59RhTqDuV0HTEMf92D\ngsf5cO+4isTHtYX7l7Fg90d28SlteBNmR7UECHUe55vIah3RI4zMv/fjg2Hn\nnDaQGFCAqipDMVf8TN6bBHjopnV/tFM5raibr9Hnf8WoYZ5MHFFBL1ERL/Ly\nMuf6KmDgZRnsD9N/4cXPqcPOcABx/AqiXcu2azfaK7Ftl/5yqRC1YQLSMnhy\nukot6QRH6D4nwqZ/HvuAXyetQ3kexYuDH5Ya0CEsQPV2If3ybvHTJMoEgusd\nhQWyVSbQ5KA/ObxmaGwIga6CakSNrnbbR3pV1V6AjpTtuS4mWubpaS4YEFo3\nkRu7k/+bJ1fU94rkNeVe6pVrO1uuA23F8UM+uVNUv0LD2Fbvl0n5jlSN8ubg\nKT7y\r\n=mskX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","gitHead":"11ce526692385deea568b0c014828a783940a8b6","scripts":{"just":"just-scripts","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","start-test":"just-scripts test:watch","update-snapshots":"just-scripts jest:snapshots"},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/microsoft/fluent-ui.git","type":"git"},"_npmVersion":"lerna/3.11.1/node@v10.15.3+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"10.15.3","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.5.0","@uifabric/merge-styles":"^7.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^16.8.0","@types/jss":"^9.5.8","@types/react":"^16.8.10","@fluentui/scripts":"^0.43.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.43.0_1578501980611_0.6113828689424219","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@fluentui/react-theming","version":"0.44.0","license":"MIT","_id":"@fluentui/react-theming@0.44.0","maintainers":[{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"}],"homepage":"https://github.com/microsoft/fluent-ui#readme","bugs":{"url":"https://github.com/microsoft/fluent-ui/issues"},"dist":{"shasum":"3a21762418e5325727ad5540bbff36d17ed9c3a3","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.44.0.tgz","fileCount":91,"integrity":"sha512-YWCqyYDtkCtWnYd5ILoWLYbUiEDSlvkooP1rNtd+m3h/gzL++sfOwYYBC6pO26jShMZibIjhDPCb7+Gry7fxEg==","signatures":[{"sig":"MEUCIQD4kbwFeekVgWyKjenQaiUvhdCNybTtHAWfo0RO3kBVEAIgBx3unasxz0CbeTLf672y1IkU2BusyymmyJNOmsCoKpI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOq7ACRA9TVsSAnZWagAAWoQP+we441xBnXAmnZ1xN2Ju\nmz0ww9K2Fos6FkqJxsK07l1SzG+1WmkZiN/50gjPbgTclPO5SIBDjRXrFFtC\nlwbXWMdcvm7NVtAAfijkF7aVUR3t7/rZq7+XfBrYPbSmJyekJb8TFebSu56m\nZ0VN2SGqO3B4vrUyKp/Otr67o2CutYVrsP6IJMIsTQT6bNeSQyDy+/33oOyE\nty2i8g7tUsb+NTrXWQtwkVkdaXSSk4BYuki1iwTuWjFu+UgU5RbX4zjco40N\nLI73p0p0SBOnbzIQ+VxdDF6/HVxCcNqyty6oFwBkl8xylIH3QH8LssdmVRV/\ny37YrcM7FHSiPV1qRLIXxd0sp8vsPQVnAzyp+zSIrDvCtO+qcUz9zxeCZ+jI\n7I99K6vl8fLN5KJ+GK3qFRGKDzVEsWV3S+moTnffB30fCPEGoakEOs4zhZ7D\nCAG069fEV232KOH5EOdS67uqq3iQoFua/agvEIFSP9u2wluQF89yjQzTJbvD\nKnV69NLbj+uSu/aKBtCLkbUsNwnRyET6eQAjJM8flims5sT0vwsldgYqyQjz\no0fFTL7UAt05yKV8KFOFC1RSRStZ2vuYXR232605aYdQXeQV1HkTPxxTG06d\n7N6y2l0s2IazfwZKySJLS/jilJF9/7mDO6alJ/F9OpDTeFsKPbLlez+4jY1l\nsoz6\r\n=nh9z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","gitHead":"39b6d1fbd11d7444d2808a8ff5d06ca2e997fe3b","scripts":{"just":"just-scripts","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","start-test":"just-scripts test:watch","update-snapshots":"just-scripts jest:snapshots"},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/microsoft/fluent-ui.git","type":"git"},"_npmVersion":"lerna/3.11.1/node@v10.15.3+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"10.15.3","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.5.0","@uifabric/merge-styles":"^7.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^16.8.0","@types/jss":"^9.5.8","@types/react":"^16.8.10","@fluentui/scripts":"^0.44.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.44.0_1580904128385_0.16651199664251526","host":"s3://npm-registry-packages"}},"0.31.1-alpha.6224":{"name":"@fluentui/react-theming","version":"0.31.1-alpha.6224","license":"MIT","_id":"@fluentui/react-theming@0.31.1-alpha.6224","maintainers":[{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"}],"homepage":"https://github.com/microsoft/fluent-ui#readme","bugs":{"url":"https://github.com/microsoft/fluent-ui/issues"},"dist":{"shasum":"1b21ab218daa19c426400528587e5cf056f22690","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.31.1-alpha.6224.tgz","fileCount":91,"integrity":"sha512-OgR7WZkk/cvQFq2qbagUhMa0MZuXaaqBY47GDFBLoV+MK1XLucnK991roS/rh2m+OeL1ZCy6fkaK2GvXAFoKUg==","signatures":[{"sig":"MEYCIQDys33BQUkQJBlpKKn/wGaLlK2o+ZU0FIaCrFC7a1OdpgIhAOr2nUYIj6lygHSaHd6bZNh3gMSKkkKst1xHlFkFp7aq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":152023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVUPDCRA9TVsSAnZWagAA9tYQAJt4HYrfq2/dv3CBw7pQ\nYnn1kJvSXrbcXz2PEQjE3BMT5ILHfKFBJX+6AGLdaaRa+UIEa6TVizAOwKun\np6MlckrYw+ayidratqMIz+mVcAonZ5ECBfXe5QaMTVmkf5zXnapswi17v0JA\nTQb8uHLvk67ze5QrA96YDU0/Cl+sVqW81jAzbqAqVf/0bEU9tNsDER6Ul9VI\nGWItjf6Z4zkMUlwRWHCGOb9Ifqk2HN0kOkyAxWayXLlKWwfWNOR86fAtxX6r\nw/GKFz0GavoMPOKA3gMSk7GmH3kV+FnjS3F8jcxNEEI1urHQl5TedeeHH4NE\nREFowkeKscpIT2J8kfPUXsetC+KBBrZw5hDcfYX8O9/64oAZ1txdiwaaYd2b\noyzjy4tiyaEc/oX+qiiHS6MeUCw5OgWSUsOspk+c0zU7elpTWgKYzRAY/Fcq\nRDmSY273AS11PGbbFmwDT2ICgWhoEpjdUs8e2IfSBIiY0YMLiXRTJ+CAHfrE\nOm6FnbdsK/7CEKrBYZjRjDhvDL2nj4zFcghmpMgnmm4UCQUMHq7jIbqpAOmy\nsGBLaanrJntypOdPVM76k3XMQ6I6cuuB/4R+ObuX24IjDLqNdf7fPBvaur5r\nXMi3Dd15nMdne928AIzuySPeM03dl0eq8uttnwo28ux+2VfHH7BCQvkUEaNQ\n2zH0\r\n=L5kw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","readme":"# Summary\n\n`react-compose` provides a set of tools for creating themable components. The `compose` tool takes a functional component and, given default options and contextual overrides provided through React context, computes injected props including `classes`, `slots`, and `slotProps`. Styles are computed only when encountering unique theme objects per component, resulting in optimized performance.\n\nExample:\n\n```\nimport { SliderBase } from './Slider.base';\nimport { compose } from '@fluentui/react-theming';\n\nexport const Slider = compose(SliderBase, {\n  // the themable name of the component\n  name: 'Slider'\n\n  // the set of replacement tokens to be injected into the styles\n  tokens,\n\n  // The css styling to be injected as a `classes` prop\n  styles\n\n  // A dictionary of React components representing the actual subcomponents to be used by the Slider\n  slots\n});\n\n// Composed components can be recomposed to offer slightly different permutations.\nexport const RedSlider = compose(Slider, {\n  tokens: { railColor: 'red' }\n});\n```\n\nTheming can be achieved through applications using a `ThemeProvider` component, also provided in the library:\n\n```tsx\n// Create a theme with a token override for the Slider.\nconst theme = createTheme({\n  components: {\n    Slider: {\n      tokens: {\n        railColor: 'green'\n      }\n    }\n  }\n});\n\n// Render the slider using the theme.\nconst App = () => (\n  <ThemeProvider theme={theme}>\n    <Slider />\n  </ThemeProvider>\n);\n```\n\n## Principles\n\n`compose` follows 3 principles:\n\n- Prefer faster components over more flexible components (if a decision between the 2 must be made.)\n\n- Decouple theming/styling from implementation in order to ensure the styling approach can be replaced without rewriting the component.\n\n- Keep it simple; avoid adding too many concepts for developers to learn.\n\n## Who is `compose` for?\n\nComponents created with `compose` are meant for use by anyone.\n\n`compose` itself is primarily intended for use by component authors; it provides a consistent means of attaching to a \"themed context\".\n\n`compose` can also be used by application developers to enable a greater level of customization when the \"theme\" does not provide enough flexibility.\n\n## When should I use `compose`?\n\n- When creating a component that should be themeable.\n- When overriding major details of an existing component. (Explained\n  later in \\\"Overriding (tokens\\|slots) with a new component\\\".)\n\n## What\\'s in a theme?\n\nA Fluent UI theme contains several major sections. At at high level, it\ncontains detail about colors, types, effects, spacing, and animation.\nFurthermore, a theme has the ability to override major details about\neach and every component\\'s look and feel as well as behavior.\n\n> TODO: document theme\n\n# Using components created with `compose`\n\nThere is no requirement around using components build with `compose`. If you use them without a theme, they will render with whichever default token/styling values, if any, are provided.\n\nIt is recommended the default styling provide very limited styling, leaving tokens as the preferred method for customizing the component.\n\n## Styling components with a theme\n\nDefault styling and tokens can always be overridden using theme.\n\n> TODO: how would one replace styling completely, instead of overriding it?\n\n## Customizing with tokens\n\nFrequently, individual products design needs conflict with that of the\nbase style. To accomodate necessary changes, `Tokens` exist to allow easy\nmodification of most all aspects of look and feel.\n\nA token is a key that corresponds to a value, usually from from the\napplied theme. Examples of tokens might be `fontSize`, `fontFamily`,\n`borderRadius`, `animationDuration`, and `labelHoveredbBackground`.\n\n### Setting tokens with a theme\n\nTo understand the set of tokens that a specific component understands,\nrefer to the documentation of that component. For this example, we will\nassume that a `Button` component exists that supports the following\ntokens:\n\n- `backgroundColor`\n- `fontSize`\n- `backgroundHoverColor`\n\nTo override any (or all) of the Button\\'s tokens, an object should be\nprovided within the theme under:\n\n```{.json}\n{\n  \"components\": {\n    \"Button\": {\n      \"tokens\": {\n        \"values\": \"here...\"\n      }\n    }\n  }\n}\n```\n\nTokens are represented by the following:\n\n1.  Function\n\n    A functional token is the preferred method of adjusting look and\n    feel. Functional tokens reference values in the applied theme.\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": t => t.fonts.base,\n            \"backgroundColor\": t => t.colors.brand[2]\n          }\n        }\n      }\n    }\n    ```\n\n2.  Literal value\n\n    A literal value allows a token to be hard-coded. It is considered\n    the least desirable (as it will never be affected by other changes\n    in the theme).\n\n    A literal token in practice looks like:\n\n    ```{.json}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": 12\n          }\n        }\n      }\n    }\n    ```\n\n3.  Dependent value\n\n    There are several cases where the value of a token is based on a\n    calculation of another value. For instance, the background hover\n    color of a button might be desired to be a shade lighter than the\n    default background color of the button. (In order to specify this,\n    assume we have a `lighten()` function available.)\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"backgroundHoverColor\": {\n              dependsOn: ['backgroundColor'],\n              value: ([backgroundColor: Color]) => lighten(backgroundColor)\n            }\n          }\n        }\n      }\n    }\n    ```\n\n### Customizing tokens by creating variants\n\nIf adjusting all instances of a component with a token override is not\ndesirable, then it is possible to create a component variant using\n`compose`.\n\nFor instance, it might be the case that most `Button` instances should\nlook a certain way, but `Button` instances in a toolbar should not\ninherit the same tokens.\n\nThe solution is to create a component that can apply different tokens,\nbut retains the same underlying behavior.\n\nTo create a new component that can be targeted separately from the base\ncomponent, simply call `compose` and optionally provide new tokens.\n\n```{.javascript org-language=\"js\"}\nconst ToolbarButton = compose(Button, {\n  tokens: {\n    fontSize: t => t.font.small\n  }\n});\n```\n\n## Customizing with slots\n\nWhile tokens affect the look and feel of rendered elements, `slots`\nprovides a way to make more significant adjustments to a component\\'s\nstructure and behavior.\n\nA slot is a rendered DOM element or higher level control that can be\nreplaced at runtime.\n\nAs an example, a `Checkbox` might choose to render a `label` element to\nhold descriptive text. If a use-case called for a proprietary\n`<MyLabel />` control instead of a `label`, that slot could be targeted\nfor replacement.\n\n### Overriding slots with a theme\n\nTo override a slot from a theme, specify a reference to the component in\nthe theme.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n{\n  \"components\": {\n    \"Checkbox\": {\n      \"slots\": {\n        \"label\": MyLabel\n      }\n    }\n  }\n}\n```\n\n### Overriding slots with a new component\n\n`compose` can also specify slot assignments directly.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n\nconst MyCheckbox = compse(Checkbox, {\n  slots: {\n    label: MyLabel\n  }\n});\n```\n\n# Creating a component meant for use with `compose`\n\nComponents that work well with compose consist of 2 parts: an unstlyled\nbased component and a composed layer that glues look and feel to the\nbase component.\n\nThis section first describes how tokens and styles are calculated, then\nexplains what an unstyled base component must do in order to be a good\ncitizen in the compose world.\n\n## Understanding tokens\n\nTokens are the exclusive means of getting data from a theme into a\ncomponent. Tokens should be specified for every aspect of a control\\'s\nlook and feel.\n\nTokens should be named according to the following anatomy:\n\n    {slot (or none for root)}{property}{state (or none for default)}\n\nExamples:\n\n- `thumbSizeHovered`\n- `backgroundColor`\n- `labelBorderDisabled`\n\nTODO: Exhaustive description of token declarations\n\n## Understanding styles\n\nAfter evaluating tokens, the tokens are passed to a `style` function.\nThe `style` function should return an object which can be rendered by\n`JSS`.\n\nExample:\n\n```{.javascript org-language=\"js\"}\nconst styles = (tokens: MyComponentTokens) => {\n  return {\n    root: {\n      backgroundColor: tokens.backgroundColor,\n      '&:hover': {\n        backgroundColor: tokens.backgroundHoverColor\n      }\n    },\n    widget: {\n      borderColor: tokens.borderColor\n    }\n  };\n}\n```\n\n## Understanding slots\n\nComponents should define a set of logical elements that are reasonable\nto replace. Additionally, sensible defaults should be provided. Slots\nprovide an opportunity for callers to late-bind sections for\nreplacement.\n\nTODO: examples of more slots\n\n## Writing the base component\n\nAny functional component can be used with `compose`. However, there are\nseveral conventions that should be respected in order to make the user\nexperience predictable.\n\nA good base component deviates from a run-of-the-mill component in 3\nways:\n\n- It should have no built-in opinion of styling. When styled via\n  `compose`, class names will be passed in via `slotProps` to provide\n  styling.\n- It accepts a prop named `slots`, which define the component to use\n  for subcomponents.\n- It accepts a prop named `slotProps`, which will be handed off to\n  subcomponents.\n\n### States\n\nEach component should ennumerate the possible set of states as a set of\nboolean flags.\n\nFor instance, a checkbox might declare these flags:\n\n- `checked`\n- `readonly`\n- `disabled`\n- `labeled`\n\n**NB:** States should be **boolean** values only.\n\nThese states affect what classNames are selected to render on the root\nelement of a component.\n\nFor instance, in the case of a checkbox, the previous states would cause\nthose selectors to appear on the root making them available to all\ndownlevel slots.\n\n### Slots\n\nTODO: Describe how to interact with slots\n\n### Slot Props\n\nTODO: Describe how to interact with slotProps\n\n### Building in practice\n\nA simple base component that renders a button might look like the\nfollowing:\n\n```{.javascript org-language=\"js\"}\ninterface Props {\n  slots;\n  slotProps;\n  children;\n  onClick;\n}\nconst BaseButton: React.FunctionComponent<Props> = (props: Props) => {\n\n  // First, define the slots\n  // define `Root` as a const which renders the root.\n  // Default to a button element.\n  const { root: Root = 'button' } = props.slots || {};\n\n  // Break out slot props to be passed to various components.\n  // Mix in the props specified directly in props.\n  const { root: rootProps } = props.slotProps || {};\n\n  const resolvedRootProps = { ...rootProps, onClick: props.onClick };\n\n  // Finally, render the component\n  return <Root {...resolvedRootProps}>{props.children}</Root>\n}\n```\n\nAs components grow and become more complex, it is expected that hooks\nwill be developed to resolve state and intelligently merge `props` into\n`slotProps`.\n\n## Conformance\n\nTODO: Describe how to run conformance tests to make sure that base\ncomponents appropriately react to theme changes.\n","gitHead":"be9aee6d058ea6c56610326ee60d278234815c04","private":false,"scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx .","update-snapshots":"just-scripts jest:snapshots"},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/microsoft/fluent-ui.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.12.4","@uifabric/merge-styles":"^7.8.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.31.1-alpha.6224_1582646211255_0.8217450218651767","host":"s3://npm-registry-packages"}},"0.45.0":{"name":"@fluentui/react-theming","version":"0.45.0","license":"MIT","_id":"@fluentui/react-theming@0.45.0","maintainers":[{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"afa1825760746a6132bddba340fb3e95e11333a9","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.45.0.tgz","fileCount":91,"integrity":"sha512-CV0IFLlCEKmFkQ6uKQrq/NUwaS31YYTtioy2CPkXBDYZNb4VqMt5xGRwtR1kTCv5bhCLDLH7ihY9x2s+Cob7jw==","signatures":[{"sig":"MEUCIB5XOY+yflGY3owXfSxjggOG8oCBoFsAdvSWubtRSjMVAiEA0/dLIuJZdn08SeFi6ZTrYzYWQa6sdL/c1tr9Qzr6pAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":203124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXR4SCRA9TVsSAnZWagAAXqsP/jzIsuLrM7SaQwz5Cio+\n8xdsiHdOX4Oklw3lrCBCM+V/KHLYZqSD1djO0IRxT+/J9kjuw344MI2eJqHO\nvZEoFvZj+Nh2JM6B9WyO6M4U5aLq5pwRe4VJ/jhC+C0yjJe+8qNo+C5iPOfQ\nrV1cxSC0VJ2c0wYC7w2G/3Wv2qwpSiTw5Rt/PfkPJ9nbOrTDfm/J8D98lDWE\nUnDF9pgpPbqwO9ZviWZTsziFbbDeJV/9WTN1pUT4R3E2XpIxm7t0QM5ZMazc\n1T7fgwInzo+4ouoq9vV0BRMpzInVOdC9MXSNdgEOPQ5KiJPv1qSBdJ1Q77ZK\nJ0D/FNz6zYBQylHIvCSn1iEPJ4mSMK8DEQX1/XVz5QWTfMkMf3Fi0tqS5ywG\n7a9wPckGEWMfIx/JIckXHn3qDBaWI5VMXDSPb1xVTmyTqbVuTZRiiuBLMXfm\nQNeAtcwrUHA941iMP1eQkUAVaKvdEem2yveghA4kYAYwd/2U0w6xSEXpO0NZ\n7Hn+tGSFJRS7YBJ0M1/txQ+bMn1cFlAZaMVEI2fNGOMrItnBeQa2d4UEKHsI\ntyZd5KgF8qV1KuSlNN6QSr5butEEZw7+5T++zlU96rxUvtLtaF9Yu0qVgvsR\nbPQucsbbwvOENaczQ0wKr143v1+LVxheeNboZlt0204ye3lxFlI9+L/8vE78\no/wT\r\n=QdEi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","gitHead":"d08e21664e66fd0203260f1d2f441007bca02915","private":false,"scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.12.5","@uifabric/merge-styles":"^7.8.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.45.0_1583160850403_0.29821555459879034","host":"s3://npm-registry-packages"}},"0.46.0":{"name":"@fluentui/react-theming","version":"0.46.0","license":"MIT","_id":"@fluentui/react-theming@0.46.0","maintainers":[{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"ed63f2c205428557fa25a80d099ecc52d23e085b","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.46.0.tgz","fileCount":90,"integrity":"sha512-rCAOO5uTzUowS8lltdpYR0cqQiX3Ufh6ELhh805OSFw23/PEjiUrH74Z4bRMa94qvqn08Ll2pY2Amg12PFwc1w==","signatures":[{"sig":"MEUCIQDkV+rzsA+5cIq6fFQxeAadfhiXwT4GVXmyFHE9xVEiSQIgTp8/ZmouTJPikNzrACOqmbHQP5eqmniW+2SXBBrFbXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYSgjCRA9TVsSAnZWagAAScoP/2ECJgr8EeQzZJZRfa9a\n52rSIqZl0kWUIYKCgF3Rf2ARKCEmea49U2/4kUxKoByOiCTpMCUNCrOqrGL7\nYPg2kg0b9Kvl8qiOqKpEgWO76HPnnh3UY/w5D7ccyPrNGnRHksO1S39/hwXZ\nx6IPk2edpPxVbYU2uW8uc1c85dC2jV8xWvWm4upf6O8lq9oRHLYVYp7IGsZU\nTxjSpxVvWoP6AKPVATi5PmfUPo5/K0JJPtoIw3TvoOiq+wJXloIwVrR41dI2\nO27LZQkGRpETAiVswiDfbiAfu3imI6K6Dv1j229tvtDSqsq5faEhkj4pucq+\nhWKCVtwhRtp9c2uuaiT19Uc20vsOj1rA792n6UQ2a5JpTAjbz5neL66aTq67\nxulKckM6IWFG+TTsF/OhaiamFXPimX/HG9A7e3T45//bp9QAGZTYinNkow5Y\nXEeNmBE4B0U6qBoSoBCqlDBsyovT+VXR/0uvs1GMto8huYj+G2MWFQs46oj7\nAE7X2MsFU4Psm+MlEKg+k4Ri8+wwFumUmtR4yh3NLYyFvlV0XJreNF4f5Ao1\nn2CeN2lTVzvC5kz7iVgN4tWXG+20FBGC07+GyzmoMhd9wzj+8lghcGvSsCCS\nsGFf6rNjPjkUAaHholgIZ/IU39RGeIPjzkIPvbE8E1DZawgXZWUEgYYSu3BC\nl3D0\r\n=5xKr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","gitHead":"04b131d5bd3209f5d3daf8c6d5c49f2cc0894730","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.13.0","@uifabric/merge-styles":"^7.8.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.46.0_1583425571315_0.5673938796122449","host":"s3://npm-registry-packages"}},"0.47.0":{"name":"@fluentui/react-theming","version":"0.47.0","license":"MIT","_id":"@fluentui/react-theming@0.47.0","maintainers":[{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"7c3e6db4d9737f337ab1e7a920533e77adbe0f08","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.47.0.tgz","fileCount":90,"integrity":"sha512-iV9qHgnsiMafBliAPNZYm4xj/KKRqfwrLptZG0PM8YiFwKxJCJ41mcJpfN9HSdBYrWMgF4Zdl6wSIaUzxbTzLQ==","signatures":[{"sig":"MEYCIQCauYIwOQYlKYu70mHBA5fdla7ffXN+bRoQGPAyOIM79gIhAJLxuOk2k9Rfry9wUewTS5v8QMcPmcmhQdP7XhI5QgoW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec4yLCRA9TVsSAnZWagAAgmwP/RQb3/6bnSMfCN8AuJMv\nHgfBv975MEpP+4dGyKqo3pwqFiafJbfW+IxE3N0kTsswfB/CnJoDGPuTRZjv\nIkk48tFVZ5g8DxUhgBPtO9t1i6O4VU3xJQHYbL/7MLl8hp9pw2NdqBCDpwy1\nsBCIuTdi+8noWkisTNUoP4lsgr4G62YM1GQQ2VVooUGrayya+1zWwvYGiDZF\n7QKKF23ONVAj6L9aenvCxWoj8mGE3ZRThmOB8oPMht/IB1Q3qMnGqwHwhgXq\nK4L6LBqDcgjPQlS+9hAdn+M37qZFGNro7HZ6WOw+CYd/0SdsII5ZE1idw6sd\nuV24dYpZHB0XiSGJB8sQkb7Z+IYoH8rvUwPGa6m+AZw2uwsJ1uM493wltq4V\n+UgdumqTDhMhVCfy0NBOwGXXs7KALB7Xzsp1h+2taQSN9pLAn8unsuFDDp14\ngBv9kjcfyhWHXQ+Dn+VHt8Ww5VLVCGmtg8yL3wLKoXNN+mF8cFJ4qM/VHmVS\nx245Ay7PF+TtJgHUsxNI2BkBIIQaoJIfdMvEtGZpGzBKc3Cn1Uw/7GLadz+F\nkZ8ekj+Kpn8FLv0VXLF7NXYgBqDLiyHmtmgFTxa2rdDCx7MJGoIAFOBUVvEc\nUOhGddh1D71lXqcHs6U7P5OiTrydisdwapOqzpzCgBPIHOg817S5j5hF70+y\n2TbX\r\n=9EhV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","gitHead":"36ed94b0250ee3316e9aaec4697ced1cf229dcb1","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.15.1","@uifabric/merge-styles":"^7.8.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.47.0_1584630922838_0.5806847150143173","host":"s3://npm-registry-packages"}},"0.48.0":{"name":"@fluentui/react-theming","version":"0.48.0","license":"MIT","_id":"@fluentui/react-theming@0.48.0","maintainers":[{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"7d009bdfd4faa89b723a6b91cd96683f07eae7f2","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.48.0.tgz","fileCount":90,"integrity":"sha512-d9z4agq2RA3PY94HLc7ygYDHAGgWQWCjUSCX2PyCIo95Sx86Uc1pRvSvoEKKCkPQb6vnjwfzgRBBInJVSTu71A==","signatures":[{"sig":"MEQCIFncdizCzQCR+p8f8/ED2dKT90Vw4fPLeX7ET3by6/QIAiBxrXZrJjNWz1yYxnpwDDDAaY0y8gzt8iZv8q6SS+gLzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelup1CRA9TVsSAnZWagAASAQP/1Zwq192Xt9lEuJH5pO0\nOmTQOUn+6URSirndZ/waCf1KkDzErCf8sTbQtF5A4kYoeuRroZjE8d7oMCwB\n1y1D1yqbJ4bNODH9B+IXBXyOrRD5+Vwju6NB3p6hpa89MJDFjYG4s9tHS4Vz\nzofGX47WNKKquJLkd1KJoEeRNCFB38+1HSb1qxAGNoHAcw1e5/iwSrhuXmEb\nIEtD14Nn/A7R//x7hRyttVFLtutPypjijB+GTDWTTTfUWFv1sI94P+Qxs5Tg\niiyuuXF1ZggSmWQAcZo+7keCPFjjiDztIyxhUoCucopfsG9UQf+M9vFITll0\nPRbbN2NiRAKLxXssrzgmSXJD7jDD9QhzpA/sZj10r7OVC/QBRis4XR6hIiny\nmOVK9FXHJUCpV1pyEp5QDe57gE/ityStqVXcy5UlFqVWSCib96L2zJ2qqZr1\nFfSDzizY3/S19pyrXNm/5K7NGIjnBmwpopQ0XLS0DRGnH6+s1sVMkGxeraVH\neQw85I5nsW4hvE6oKf835L2aEvMiogKinza4zJsiDuLZ7p5X9AtCMYxsjOr5\nfyRg2rEJFmhQaLHWU7aW76DuIFgcE16QwR9dgShh8iG6UkCFOWPM7+VtwFI2\n/4FLnc7nKWRlmN4bWE8UUJ81WrapER8VdlEvKtRGRvwT4G9rPVKiPyYSLNqH\n5EMM\r\n=14DI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","gitHead":"0b9847bc9bfdc1c4a0cb35ce0cfcfdc32880500b","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.15.6","@uifabric/merge-styles":"^7.8.11"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.25","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.48.0_1586948724937_0.7577477769123848","host":"s3://npm-registry-packages"}},"0.47.1":{"name":"@fluentui/react-theming","version":"0.47.1","license":"MIT","_id":"@fluentui/react-theming@0.47.1","maintainers":[{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"8215a9ba73bea301f18083251867f9ed6c4bbb4a","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.47.1.tgz","fileCount":90,"integrity":"sha512-cBGxuXS+yHAxuWxuUteZ8PAsEQozg9TpKQHSCxDuCt7tgGDyevksL0p+IrDcrOXC6RWQ/y22MbotWJBL/+mAPA==","signatures":[{"sig":"MEUCIQCKDbup0PlEFFUMvBniEjIrXTIZHoZ6k2+BfPhcJ/MiaQIgRfKh1IYtV/Ar/qor8OhAkHpJfkAqD+ZkNmVAsqOloiw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelv5ACRA9TVsSAnZWagAAtVkP+we2LkjDHuBxXLVQeU2u\n+r6XIZIYKv9XM8KJ1o2SAlETmIr6cnSL0aVOtMiCL0OdYZK6JyWJDjZJ2g8q\nSzWIx3fO/vEwBzWsGSJyo4lXvoqaqINTGyiQ8bVTwiM39cdwrwoyeNOP5QMw\nRhRjZc6/xoRfFKwiHwNDuiL0gmNpbUZa8fuQSUZZXg/Il0q21AeqbS/0Zqoc\njoomIEO1EclBFetBV2gYRfQcxE73PcuxuXS3RKI0PwfnWEOM+ffOWuyKjm3i\n3zoQAdSigvgoja6WDxids4GO6/G20ZasBzrz4bv3O/yIPY5q3+p3Wx+TzYM0\n8h271xd9PuCIa9uvYG2MhWnqLyb2oSYynLQPb55m/r4J1YccFEP8/tJkhl+N\nqLTTBoGfxJ7TKH9ScvF2Lo4J7NFyyWMKLlLmh64xo9mxKO9rJF4mHs4BpRs8\nN1MU+7yoDBhTsYKTTaQkakp4p4SaBSYtHaP0g9HYbRhcUwZnAgN5m1dvaDDq\nNnbWqcddPphasNd7W3HXTH9cZeXPjeHrLA3f0SnoEb/h4z40k00oQV43DRKF\nbAgPpEDxiP8r6esKRHBsiH+Mq19W2dmEObk2AzLttBkh6Peaz0NxkUhNw6h1\nrlRcVMTcs/Vh90cSSD9gcXSHn6Y6bmHdOY4KWigYFNp7KDc0KRZw3/s4406D\nYQOf\r\n=Jiy5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","readme":"# Summary\n\n`react-compose` provides a set of tools for creating themable components. The `compose` tool takes a functional component and, given default options and contextual overrides provided through React context, computes injected props including `classes`, `slots`, and `slotProps`. Styles are computed only when encountering unique theme objects per component, resulting in optimized performance.\n\nExample:\n\n```\nimport { SliderBase } from './Slider.base';\nimport { compose } from '@fluentui/react-theming';\n\nexport const Slider = compose(SliderBase, {\n  // the themable name of the component\n  name: 'Slider'\n\n  // the set of replacement tokens to be injected into the styles\n  tokens,\n\n  // The css styling to be injected as a `classes` prop\n  styles\n\n  // A dictionary of React components representing the actual subcomponents to be used by the Slider\n  slots\n});\n\n// Composed components can be recomposed to offer slightly different permutations.\nexport const RedSlider = compose(Slider, {\n  tokens: { railColor: 'red' }\n});\n```\n\nTheming can be achieved through applications using a `ThemeProvider` component, also provided in the library:\n\n```tsx\n// Create a theme with a token override for the Slider.\nconst theme = createTheme({\n  components: {\n    Slider: {\n      tokens: {\n        railColor: 'green',\n      },\n    },\n  },\n});\n\n// Render the slider using the theme.\nconst App = () => (\n  <ThemeProvider theme={theme}>\n    <Slider />\n  </ThemeProvider>\n);\n```\n\n## Principles\n\n`compose` follows 3 principles:\n\n- Prefer faster components over more flexible components (if a decision between the 2 must be made.)\n\n- Decouple theming/styling from implementation in order to ensure the styling approach can be replaced without rewriting the component.\n\n- Keep it simple; avoid adding too many concepts for developers to learn.\n\n## Who is `compose` for?\n\nComponents created with `compose` are meant for use by anyone.\n\n`compose` itself is primarily intended for use by component authors; it provides a consistent means of attaching to a \"themed context\".\n\n`compose` can also be used by application developers to enable a greater level of customization when the \"theme\" does not provide enough flexibility.\n\n## When should I use `compose`?\n\n- When creating a component that should be themeable.\n- When overriding major details of an existing component. (Explained\n  later in \\\"Overriding (tokens\\|slots) with a new component\\\".)\n\n## What\\'s in a theme?\n\nA Fluent UI theme contains several major sections. At at high level, it\ncontains detail about colors, types, effects, spacing, and animation.\nFurthermore, a theme has the ability to override major details about\neach and every component\\'s look and feel as well as behavior.\n\n> TODO: document theme\n\n# Using components created with `compose`\n\nThere is no requirement around using components build with `compose`. If you use them without a theme, they will render with whichever default token/styling values, if any, are provided.\n\nIt is recommended the default styling provide very limited styling, leaving tokens as the preferred method for customizing the component.\n\n## Styling components with a theme\n\nDefault styling and tokens can always be overridden using theme.\n\n> TODO: how would one replace styling completely, instead of overriding it?\n\n## Customizing with tokens\n\nFrequently, individual products design needs conflict with that of the\nbase style. To accomodate necessary changes, `Tokens` exist to allow easy\nmodification of most all aspects of look and feel.\n\nA token is a key that corresponds to a value, usually from from the\napplied theme. Examples of tokens might be `fontSize`, `fontFamily`,\n`borderRadius`, `animationDuration`, and `labelHoveredbBackground`.\n\n### Setting tokens with a theme\n\nTo understand the set of tokens that a specific component understands,\nrefer to the documentation of that component. For this example, we will\nassume that a `Button` component exists that supports the following\ntokens:\n\n- `backgroundColor`\n- `fontSize`\n- `backgroundHoverColor`\n\nTo override any (or all) of the Button\\'s tokens, an object should be\nprovided within the theme under:\n\n```{.json}\n{\n  \"components\": {\n    \"Button\": {\n      \"tokens\": {\n        \"values\": \"here...\"\n      }\n    }\n  }\n}\n```\n\nTokens are represented by the following:\n\n1.  Function\n\n    A functional token is the preferred method of adjusting look and\n    feel. Functional tokens reference values in the applied theme.\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": t => t.fonts.base,\n            \"backgroundColor\": t => t.colors.brand[2]\n          }\n        }\n      }\n    }\n    ```\n\n2.  Literal value\n\n    A literal value allows a token to be hard-coded. It is considered\n    the least desirable (as it will never be affected by other changes\n    in the theme).\n\n    A literal token in practice looks like:\n\n    ```{.json}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": 12\n          }\n        }\n      }\n    }\n    ```\n\n3.  Dependent value\n\n    There are several cases where the value of a token is based on a\n    calculation of another value. For instance, the background hover\n    color of a button might be desired to be a shade lighter than the\n    default background color of the button. (In order to specify this,\n    assume we have a `lighten()` function available.)\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"backgroundHoverColor\": {\n              dependsOn: ['backgroundColor'],\n              value: ([backgroundColor: Color]) => lighten(backgroundColor)\n            }\n          }\n        }\n      }\n    }\n    ```\n\n### Customizing tokens by creating variants\n\nIf adjusting all instances of a component with a token override is not\ndesirable, then it is possible to create a component variant using\n`compose`.\n\nFor instance, it might be the case that most `Button` instances should\nlook a certain way, but `Button` instances in a toolbar should not\ninherit the same tokens.\n\nThe solution is to create a component that can apply different tokens,\nbut retains the same underlying behavior.\n\nTo create a new component that can be targeted separately from the base\ncomponent, simply call `compose` and optionally provide new tokens.\n\n```{.javascript org-language=\"js\"}\nconst ToolbarButton = compose(Button, {\n  tokens: {\n    fontSize: t => t.font.small\n  }\n});\n```\n\n## Customizing with slots\n\nWhile tokens affect the look and feel of rendered elements, `slots`\nprovides a way to make more significant adjustments to a component\\'s\nstructure and behavior.\n\nA slot is a rendered DOM element or higher level control that can be\nreplaced at runtime.\n\nAs an example, a `Checkbox` might choose to render a `label` element to\nhold descriptive text. If a use-case called for a proprietary\n`<MyLabel />` control instead of a `label`, that slot could be targeted\nfor replacement.\n\n### Overriding slots with a theme\n\nTo override a slot from a theme, specify a reference to the component in\nthe theme.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n{\n  \"components\": {\n    \"Checkbox\": {\n      \"slots\": {\n        \"label\": MyLabel\n      }\n    }\n  }\n}\n```\n\n### Overriding slots with a new component\n\n`compose` can also specify slot assignments directly.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n\nconst MyCheckbox = compse(Checkbox, {\n  slots: {\n    label: MyLabel\n  }\n});\n```\n\n# Creating a component meant for use with `compose`\n\nComponents that work well with compose consist of 2 parts: an unstlyled\nbased component and a composed layer that glues look and feel to the\nbase component.\n\nThis section first describes how tokens and styles are calculated, then\nexplains what an unstyled base component must do in order to be a good\ncitizen in the compose world.\n\n## Understanding tokens\n\nTokens are the exclusive means of getting data from a theme into a\ncomponent. Tokens should be specified for every aspect of a control\\'s\nlook and feel.\n\nTokens should be named according to the following anatomy:\n\n    {slot (or none for root)}{property}{state (or none for default)}\n\nExamples:\n\n- `thumbSizeHovered`\n- `backgroundColor`\n- `labelBorderDisabled`\n\nTODO: Exhaustive description of token declarations\n\n## Understanding styles\n\nAfter evaluating tokens, the tokens are passed to a `style` function.\nThe `style` function should return an object which can be rendered by\n`JSS`.\n\nExample:\n\n```{.javascript org-language=\"js\"}\nconst styles = (tokens: MyComponentTokens) => {\n  return {\n    root: {\n      backgroundColor: tokens.backgroundColor,\n      '&:hover': {\n        backgroundColor: tokens.backgroundHoverColor\n      }\n    },\n    widget: {\n      borderColor: tokens.borderColor\n    }\n  };\n}\n```\n\n## Understanding slots\n\nComponents should define a set of logical elements that are reasonable\nto replace. Additionally, sensible defaults should be provided. Slots\nprovide an opportunity for callers to late-bind sections for\nreplacement.\n\nTODO: examples of more slots\n\n## Writing the base component\n\nAny functional component can be used with `compose`. However, there are\nseveral conventions that should be respected in order to make the user\nexperience predictable.\n\nA good base component deviates from a run-of-the-mill component in 3\nways:\n\n- It should have no built-in opinion of styling. When styled via\n  `compose`, class names will be passed in via `slotProps` to provide\n  styling.\n- It accepts a prop named `slots`, which define the component to use\n  for subcomponents.\n- It accepts a prop named `slotProps`, which will be handed off to\n  subcomponents.\n\n### States\n\nEach component should ennumerate the possible set of states as a set of\nboolean flags.\n\nFor instance, a checkbox might declare these flags:\n\n- `checked`\n- `readonly`\n- `disabled`\n- `labeled`\n\n**NB:** States should be **boolean** values only.\n\nThese states affect what classNames are selected to render on the root\nelement of a component.\n\nFor instance, in the case of a checkbox, the previous states would cause\nthose selectors to appear on the root making them available to all\ndownlevel slots.\n\n### Slots\n\nTODO: Describe how to interact with slots\n\n### Slot Props\n\nTODO: Describe how to interact with slotProps\n\n### Building in practice\n\nA simple base component that renders a button might look like the\nfollowing:\n\n```{.javascript org-language=\"js\"}\ninterface Props {\n  slots;\n  slotProps;\n  children;\n  onClick;\n}\nconst BaseButton: React.FunctionComponent<Props> = (props: Props) => {\n\n  // First, define the slots\n  // define `Root` as a const which renders the root.\n  // Default to a button element.\n  const { root: Root = 'button' } = props.slots || {};\n\n  // Break out slot props to be passed to various components.\n  // Mix in the props specified directly in props.\n  const { root: rootProps } = props.slotProps || {};\n\n  const resolvedRootProps = { ...rootProps, onClick: props.onClick };\n\n  // Finally, render the component\n  return <Root {...resolvedRootProps}>{props.children}</Root>\n}\n```\n\nAs components grow and become more complex, it is expected that hooks\nwill be developed to resolve state and intelligently merge `props` into\n`slotProps`.\n\n## Conformance\n\nTODO: Describe how to run conformance tests to make sure that base\ncomponents appropriately react to theme changes.\n","gitHead":"01266e5787e27cc2b928e2c8fc72191e6074666d","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.15.1","@uifabric/merge-styles":"^7.8.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.47.1_1586953791732_0.011459302508553648","host":"s3://npm-registry-packages"}},"0.49.0":{"name":"@fluentui/react-theming","version":"0.49.0","license":"MIT","_id":"@fluentui/react-theming@0.49.0","maintainers":[{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"1361d42a02e3fa014a4102387e03717498ed5b92","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.49.0.tgz","fileCount":90,"integrity":"sha512-op9d24FEbB5RP6o53H4w75JPXb4nQlQmN4Lhr2EhWp97t1AgmodB6z806yjHbg/KCyKbWJTFolkWOkP1VjMZ3g==","signatures":[{"sig":"MEYCIQCItPkpLzQ0Uv+qHGHfhT4ctZrcxy4LR9yuguAMveEe/gIhAM1FgfRjdRXQJF93bpnqTpCqEhKrCnWrlJT4J5E3yyXn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJet68dCRA9TVsSAnZWagAAnXUP/0X5OlLjT90OG6QzZJ0d\n4ngG/FOwNmqhG9ZKEDTfrYWPO1cOTpD3BtoflPJbOzdjbfoQfLUDFXCDgy8F\nWR5dtXZC/yChT37X4MxK0IPc81KR4gzlfLSwjolGRA0TnNe0roxhqSI2uTyX\nFF3mJ+lFBTanmg1XyFIKDpmVcl87bl9YpOv1g8Kn6b88kcG/4VLIX3QhLjgx\nr0iUPga6OqWio/xTGbTf7//QydA2Lw5QqSzdmMpZM2VGEazojs2Za0Pkv/p/\nwgJvBQ56YxcnmoWO4Z63JCjr6ThYbpTr58VuPwDNDS13LxyW2d7SNCBkKdMn\nUYpAKSHRccjWKsOk0uUF3vkNsRV2Da/QDxBWw+ZjiyDcRoSqYwVpy6aLFQqY\ngXpa3mpDP5T/hVErax4Kgpy5AptPhJtq3eJryAK4hWMTwDlxabcqpTkrignc\nBlnbO3yTwuYByRykwpWAN4FTMrMJcPlQzMjI6eV1oyuXEBKLco2KR9tvtLcB\ndjMyB+cWDUNpdV+9c7ZKqxqsjczK1cz5LnZaxg+fyLNM6++J7vOQOoiuboX2\nfLlQv/xAtQ518ZPIUAxrVv1gbseWAnT+e2nnv3q0JgUnnRy/UPg4KtBZQBvR\n/+/iMfdFJUPvpdOPiG+SKc5tJXOs7VL9CU8PEt11CpqgmyvhZyg1cvIq/dgK\n6pI/\r\n=GhhH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","gitHead":"288ce25b226dfc850712e9b37b8212a226dc14ce","scripts":{"just":"just-scripts","lint":"eslint --ext .js,.ts,.tsx .","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint --fix","start-test":"just-scripts test:watch"},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.16.3","@uifabric/merge-styles":"^7.11.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.25","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.49.0_1589096221474_0.02322870849530978","host":"s3://npm-registry-packages"}},"0.47.2":{"name":"@fluentui/react-theming","version":"0.47.2","license":"MIT","_id":"@fluentui/react-theming@0.47.2","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"6c859364d99a16d025ecfd8562ad0b5515b27384","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.47.2.tgz","fileCount":90,"integrity":"sha512-30GblCIyjrgZqcq8x+57vKTQSva4KWdLmJ9LRiVV/5bO53yIo5SC0HkarKwm+5a3nKRFMzPrUa5EMASJA+2bYA==","signatures":[{"sig":"MEUCIAImVglU72H9jjp2jLXDxUVmjTb4LtV7IxjMJ/7vzh5aAiEA0RyjCIrnxJr0qwATUgRQAkVAsouCmgPUT0TQjr4hZSU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVFkCRA9TVsSAnZWagAAYLAP/RT28EgybeZUyikESgt8\nyfejOOA+6aQPlaxbK+EWjAp5EmnyzWbP72dsy0b/fq2wMdGYIFrHB/J8RtxN\n6f0Yo+lbpYc+MIwBCW0ydCK4mHRTolZDHrskbBYjKGJv4q7+VVIYQxzvk95t\ny97/iRbDnshN6iSTLG+xQXYkiE6YzNHSKws/1MhCbt1Pe9TT+bM1pAVciRTO\nSqiXoAzwgzBCrVkYmpFQQJ65yOq+73seF5Fh9BR8+ff32/7KBRJNfDDW0ZDg\nbrtCghSd9QZMGxD1SKAiZQbbvvPvBiGcXGLxjQmi9NZGWXh3yvo7xnE/aNxv\nBl+h79lKjbzZAAWYSlOAGSYxbiO8q/8BIhB82v9w58Rm91h+fydvDs8ryT/b\n2hkYN8nj8xWM9+S9gxB4HSZHeJU7xTmHUoWGsMVHt3j6ewIKk1GrrNcUO4fo\nykkeuBtq5nHMnFeUc/VtPnvWIr5I0wm55w8P3mxLUVMkGktAi8x1NNdGCRbr\nrRuHyvKWHcMVD6rKNmfiBzv6Gd7++soWQAXvP2DIYqpt84aIu+THnM6bMrz9\nOu4yltI/0tIwTptadqMHp6hGUpArUBRyY4ulOSSEaFo6Th+nv4JPQLWReS6E\ndYgKyKzidpGbNNzvpd6r8M0NHTt3mGGWJtVb00e9ZJTfsxbUEu+q0MWUpPDb\nVxR/\r\n=rPak\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","readme":"# Summary\n\n`react-compose` provides a set of tools for creating themable components. The `compose` tool takes a functional component and, given default options and contextual overrides provided through React context, computes injected props including `classes`, `slots`, and `slotProps`. Styles are computed only when encountering unique theme objects per component, resulting in optimized performance.\n\nExample:\n\n```\nimport { SliderBase } from './Slider.base';\nimport { compose } from '@fluentui/react-theming';\n\nexport const Slider = compose(SliderBase, {\n  // the themable name of the component\n  name: 'Slider'\n\n  // the set of replacement tokens to be injected into the styles\n  tokens,\n\n  // The css styling to be injected as a `classes` prop\n  styles\n\n  // A dictionary of React components representing the actual subcomponents to be used by the Slider\n  slots\n});\n\n// Composed components can be recomposed to offer slightly different permutations.\nexport const RedSlider = compose(Slider, {\n  tokens: { railColor: 'red' }\n});\n```\n\nTheming can be achieved through applications using a `ThemeProvider` component, also provided in the library:\n\n```tsx\n// Create a theme with a token override for the Slider.\nconst theme = createTheme({\n  components: {\n    Slider: {\n      tokens: {\n        railColor: 'green',\n      },\n    },\n  },\n});\n\n// Render the slider using the theme.\nconst App = () => (\n  <ThemeProvider theme={theme}>\n    <Slider />\n  </ThemeProvider>\n);\n```\n\n## Principles\n\n`compose` follows 3 principles:\n\n- Prefer faster components over more flexible components (if a decision between the 2 must be made.)\n\n- Decouple theming/styling from implementation in order to ensure the styling approach can be replaced without rewriting the component.\n\n- Keep it simple; avoid adding too many concepts for developers to learn.\n\n## Who is `compose` for?\n\nComponents created with `compose` are meant for use by anyone.\n\n`compose` itself is primarily intended for use by component authors; it provides a consistent means of attaching to a \"themed context\".\n\n`compose` can also be used by application developers to enable a greater level of customization when the \"theme\" does not provide enough flexibility.\n\n## When should I use `compose`?\n\n- When creating a component that should be themeable.\n- When overriding major details of an existing component. (Explained\n  later in \\\"Overriding (tokens\\|slots) with a new component\\\".)\n\n## What\\'s in a theme?\n\nA Fluent UI theme contains several major sections. At at high level, it\ncontains detail about colors, types, effects, spacing, and animation.\nFurthermore, a theme has the ability to override major details about\neach and every component\\'s look and feel as well as behavior.\n\n> TODO: document theme\n\n# Using components created with `compose`\n\nThere is no requirement around using components build with `compose`. If you use them without a theme, they will render with whichever default token/styling values, if any, are provided.\n\nIt is recommended the default styling provide very limited styling, leaving tokens as the preferred method for customizing the component.\n\n## Styling components with a theme\n\nDefault styling and tokens can always be overridden using theme.\n\n> TODO: how would one replace styling completely, instead of overriding it?\n\n## Customizing with tokens\n\nFrequently, individual products design needs conflict with that of the\nbase style. To accomodate necessary changes, `Tokens` exist to allow easy\nmodification of most all aspects of look and feel.\n\nA token is a key that corresponds to a value, usually from from the\napplied theme. Examples of tokens might be `fontSize`, `fontFamily`,\n`borderRadius`, `animationDuration`, and `labelHoveredbBackground`.\n\n### Setting tokens with a theme\n\nTo understand the set of tokens that a specific component understands,\nrefer to the documentation of that component. For this example, we will\nassume that a `Button` component exists that supports the following\ntokens:\n\n- `backgroundColor`\n- `fontSize`\n- `backgroundHoverColor`\n\nTo override any (or all) of the Button\\'s tokens, an object should be\nprovided within the theme under:\n\n```{.json}\n{\n  \"components\": {\n    \"Button\": {\n      \"tokens\": {\n        \"values\": \"here...\"\n      }\n    }\n  }\n}\n```\n\nTokens are represented by the following:\n\n1.  Function\n\n    A functional token is the preferred method of adjusting look and\n    feel. Functional tokens reference values in the applied theme.\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": t => t.fonts.base,\n            \"backgroundColor\": t => t.colors.brand[2]\n          }\n        }\n      }\n    }\n    ```\n\n2.  Literal value\n\n    A literal value allows a token to be hard-coded. It is considered\n    the least desirable (as it will never be affected by other changes\n    in the theme).\n\n    A literal token in practice looks like:\n\n    ```{.json}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": 12\n          }\n        }\n      }\n    }\n    ```\n\n3.  Dependent value\n\n    There are several cases where the value of a token is based on a\n    calculation of another value. For instance, the background hover\n    color of a button might be desired to be a shade lighter than the\n    default background color of the button. (In order to specify this,\n    assume we have a `lighten()` function available.)\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"backgroundHoverColor\": {\n              dependsOn: ['backgroundColor'],\n              value: ([backgroundColor: Color]) => lighten(backgroundColor)\n            }\n          }\n        }\n      }\n    }\n    ```\n\n### Customizing tokens by creating variants\n\nIf adjusting all instances of a component with a token override is not\ndesirable, then it is possible to create a component variant using\n`compose`.\n\nFor instance, it might be the case that most `Button` instances should\nlook a certain way, but `Button` instances in a toolbar should not\ninherit the same tokens.\n\nThe solution is to create a component that can apply different tokens,\nbut retains the same underlying behavior.\n\nTo create a new component that can be targeted separately from the base\ncomponent, simply call `compose` and optionally provide new tokens.\n\n```{.javascript org-language=\"js\"}\nconst ToolbarButton = compose(Button, {\n  tokens: {\n    fontSize: t => t.font.small\n  }\n});\n```\n\n## Customizing with slots\n\nWhile tokens affect the look and feel of rendered elements, `slots`\nprovides a way to make more significant adjustments to a component\\'s\nstructure and behavior.\n\nA slot is a rendered DOM element or higher level control that can be\nreplaced at runtime.\n\nAs an example, a `Checkbox` might choose to render a `label` element to\nhold descriptive text. If a use-case called for a proprietary\n`<MyLabel />` control instead of a `label`, that slot could be targeted\nfor replacement.\n\n### Overriding slots with a theme\n\nTo override a slot from a theme, specify a reference to the component in\nthe theme.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n{\n  \"components\": {\n    \"Checkbox\": {\n      \"slots\": {\n        \"label\": MyLabel\n      }\n    }\n  }\n}\n```\n\n### Overriding slots with a new component\n\n`compose` can also specify slot assignments directly.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n\nconst MyCheckbox = compse(Checkbox, {\n  slots: {\n    label: MyLabel\n  }\n});\n```\n\n# Creating a component meant for use with `compose`\n\nComponents that work well with compose consist of 2 parts: an unstlyled\nbased component and a composed layer that glues look and feel to the\nbase component.\n\nThis section first describes how tokens and styles are calculated, then\nexplains what an unstyled base component must do in order to be a good\ncitizen in the compose world.\n\n## Understanding tokens\n\nTokens are the exclusive means of getting data from a theme into a\ncomponent. Tokens should be specified for every aspect of a control\\'s\nlook and feel.\n\nTokens should be named according to the following anatomy:\n\n    {slot (or none for root)}{property}{state (or none for default)}\n\nExamples:\n\n- `thumbSizeHovered`\n- `backgroundColor`\n- `labelBorderDisabled`\n\nTODO: Exhaustive description of token declarations\n\n## Understanding styles\n\nAfter evaluating tokens, the tokens are passed to a `style` function.\nThe `style` function should return an object which can be rendered by\n`JSS`.\n\nExample:\n\n```{.javascript org-language=\"js\"}\nconst styles = (tokens: MyComponentTokens) => {\n  return {\n    root: {\n      backgroundColor: tokens.backgroundColor,\n      '&:hover': {\n        backgroundColor: tokens.backgroundHoverColor\n      }\n    },\n    widget: {\n      borderColor: tokens.borderColor\n    }\n  };\n}\n```\n\n## Understanding slots\n\nComponents should define a set of logical elements that are reasonable\nto replace. Additionally, sensible defaults should be provided. Slots\nprovide an opportunity for callers to late-bind sections for\nreplacement.\n\nTODO: examples of more slots\n\n## Writing the base component\n\nAny functional component can be used with `compose`. However, there are\nseveral conventions that should be respected in order to make the user\nexperience predictable.\n\nA good base component deviates from a run-of-the-mill component in 3\nways:\n\n- It should have no built-in opinion of styling. When styled via\n  `compose`, class names will be passed in via `slotProps` to provide\n  styling.\n- It accepts a prop named `slots`, which define the component to use\n  for subcomponents.\n- It accepts a prop named `slotProps`, which will be handed off to\n  subcomponents.\n\n### States\n\nEach component should ennumerate the possible set of states as a set of\nboolean flags.\n\nFor instance, a checkbox might declare these flags:\n\n- `checked`\n- `readonly`\n- `disabled`\n- `labeled`\n\n**NB:** States should be **boolean** values only.\n\nThese states affect what classNames are selected to render on the root\nelement of a component.\n\nFor instance, in the case of a checkbox, the previous states would cause\nthose selectors to appear on the root making them available to all\ndownlevel slots.\n\n### Slots\n\nTODO: Describe how to interact with slots\n\n### Slot Props\n\nTODO: Describe how to interact with slotProps\n\n### Building in practice\n\nA simple base component that renders a button might look like the\nfollowing:\n\n```{.javascript org-language=\"js\"}\ninterface Props {\n  slots;\n  slotProps;\n  children;\n  onClick;\n}\nconst BaseButton: React.FunctionComponent<Props> = (props: Props) => {\n\n  // First, define the slots\n  // define `Root` as a const which renders the root.\n  // Default to a button element.\n  const { root: Root = 'button' } = props.slots || {};\n\n  // Break out slot props to be passed to various components.\n  // Mix in the props specified directly in props.\n  const { root: rootProps } = props.slotProps || {};\n\n  const resolvedRootProps = { ...rootProps, onClick: props.onClick };\n\n  // Finally, render the component\n  return <Root {...resolvedRootProps}>{props.children}</Root>\n}\n```\n\nAs components grow and become more complex, it is expected that hooks\nwill be developed to resolve state and intelligently merge `props` into\n`slotProps`.\n\n## Conformance\n\nTODO: Describe how to run conformance tests to make sure that base\ncomponents appropriately react to theme changes.\n","gitHead":"302a3d1918c205cc35648a92c9aff97255413605","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.15.1","@uifabric/merge-styles":"^7.8.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.47.2_1589465444299_0.14908255597334064","host":"s3://npm-registry-packages"}},"0.47.3":{"name":"@fluentui/react-theming","version":"0.47.3","license":"MIT","_id":"@fluentui/react-theming@0.47.3","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"118f72476e210215fae7148540a5483cd822e25f","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.47.3.tgz","fileCount":90,"integrity":"sha512-qZyChyYuVPCuiM1z1X8QOxAvbc3nVRutz+hfHmosP2QYS40SrBfw66rRBZLDtRufUNtwkFEl5FNo1IGyqo19Bw==","signatures":[{"sig":"MEUCIQDGDDVx+lBn+aOJN48TroJIwvg1wunhMdXWByGzH9UIIwIgbvcBME01XubrIrcXa/hQqQrG9UjRNEY8UeR5Oi885Xo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1lHHCRA9TVsSAnZWagAAWlkP/0me1T8us4A51jE4GV5W\nJbXTQzGcDGo0sAbXGqETN/bmNkcxHvOB0Q39ETp2WtwhI8ToU1rHPPKmu0g3\nFp6TyaBZ4WL8f+J5yEUvD5097qwsESWhiW2w/9jr02UmmnGrUZZDb0z8w72U\nhiMB3h05U642HzknYpNuaRIEgxQYQtr7hiKNW03u+OkvsaKZh1JkfVmevDbt\nx8kqBi+N/7UlWXV/j8w/rLWopfE/hJ/eoVTDOXK8XqBZaUqCTuAXAyd1xR9F\n5Eec3MptCAT/k6Ms9XACCsM52Lhjc/ZlJsa1nDn5BgijTQWK5ruGsROAR++q\nJ0mDbByoi4eOj1KCSU+FwNiVDlw01481nBZ/v33Jq6xdqwljEcG+UdS/3kRT\nVWdmW0g1SLMP/ilJ6lwViLO/OgiNe8vsVaILn+1cHZRiiNEb3OLqIOJxGRgK\nZmjGWAiE6R8eAhjGFzmRx5E6AxurkcYoBcmXpODBtFquGai7y/RsLqXdqo1x\naePqTZHCks5CLvLWywT6FIVnvUt9nijiIVvb3L5xxjyXE4YOMMEz0xGq30TR\nogfsM1H6rW7frlucYWIsdNZJPSZld6mDQh5CTBOCCt3ZLZu7DBua32A3Ej0i\nqeIb3O8TGKU7E3oEojdrA3Mdk2PbM2+qzEBvjF2xGpaajdTcK3sClvhGHzVW\nbgqq\r\n=CK9E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","readme":"# Summary\n\n`react-compose` provides a set of tools for creating themable components. The `compose` tool takes a functional component and, given default options and contextual overrides provided through React context, computes injected props including `classes`, `slots`, and `slotProps`. Styles are computed only when encountering unique theme objects per component, resulting in optimized performance.\n\nExample:\n\n```\nimport { SliderBase } from './Slider.base';\nimport { compose } from '@fluentui/react-theming';\n\nexport const Slider = compose(SliderBase, {\n  // the themable name of the component\n  name: 'Slider'\n\n  // the set of replacement tokens to be injected into the styles\n  tokens,\n\n  // The css styling to be injected as a `classes` prop\n  styles\n\n  // A dictionary of React components representing the actual subcomponents to be used by the Slider\n  slots\n});\n\n// Composed components can be recomposed to offer slightly different permutations.\nexport const RedSlider = compose(Slider, {\n  tokens: { railColor: 'red' }\n});\n```\n\nTheming can be achieved through applications using a `ThemeProvider` component, also provided in the library:\n\n```tsx\n// Create a theme with a token override for the Slider.\nconst theme = createTheme({\n  components: {\n    Slider: {\n      tokens: {\n        railColor: 'green',\n      },\n    },\n  },\n});\n\n// Render the slider using the theme.\nconst App = () => (\n  <ThemeProvider theme={theme}>\n    <Slider />\n  </ThemeProvider>\n);\n```\n\n## Principles\n\n`compose` follows 3 principles:\n\n- Prefer faster components over more flexible components (if a decision between the 2 must be made.)\n\n- Decouple theming/styling from implementation in order to ensure the styling approach can be replaced without rewriting the component.\n\n- Keep it simple; avoid adding too many concepts for developers to learn.\n\n## Who is `compose` for?\n\nComponents created with `compose` are meant for use by anyone.\n\n`compose` itself is primarily intended for use by component authors; it provides a consistent means of attaching to a \"themed context\".\n\n`compose` can also be used by application developers to enable a greater level of customization when the \"theme\" does not provide enough flexibility.\n\n## When should I use `compose`?\n\n- When creating a component that should be themeable.\n- When overriding major details of an existing component. (Explained\n  later in \\\"Overriding (tokens\\|slots) with a new component\\\".)\n\n## What\\'s in a theme?\n\nA Fluent UI theme contains several major sections. At at high level, it\ncontains detail about colors, types, effects, spacing, and animation.\nFurthermore, a theme has the ability to override major details about\neach and every component\\'s look and feel as well as behavior.\n\n> TODO: document theme\n\n# Using components created with `compose`\n\nThere is no requirement around using components build with `compose`. If you use them without a theme, they will render with whichever default token/styling values, if any, are provided.\n\nIt is recommended the default styling provide very limited styling, leaving tokens as the preferred method for customizing the component.\n\n## Styling components with a theme\n\nDefault styling and tokens can always be overridden using theme.\n\n> TODO: how would one replace styling completely, instead of overriding it?\n\n## Customizing with tokens\n\nFrequently, individual products design needs conflict with that of the\nbase style. To accomodate necessary changes, `Tokens` exist to allow easy\nmodification of most all aspects of look and feel.\n\nA token is a key that corresponds to a value, usually from from the\napplied theme. Examples of tokens might be `fontSize`, `fontFamily`,\n`borderRadius`, `animationDuration`, and `labelHoveredbBackground`.\n\n### Setting tokens with a theme\n\nTo understand the set of tokens that a specific component understands,\nrefer to the documentation of that component. For this example, we will\nassume that a `Button` component exists that supports the following\ntokens:\n\n- `backgroundColor`\n- `fontSize`\n- `backgroundHoverColor`\n\nTo override any (or all) of the Button\\'s tokens, an object should be\nprovided within the theme under:\n\n```{.json}\n{\n  \"components\": {\n    \"Button\": {\n      \"tokens\": {\n        \"values\": \"here...\"\n      }\n    }\n  }\n}\n```\n\nTokens are represented by the following:\n\n1.  Function\n\n    A functional token is the preferred method of adjusting look and\n    feel. Functional tokens reference values in the applied theme.\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": t => t.fonts.base,\n            \"backgroundColor\": t => t.colors.brand[2]\n          }\n        }\n      }\n    }\n    ```\n\n2.  Literal value\n\n    A literal value allows a token to be hard-coded. It is considered\n    the least desirable (as it will never be affected by other changes\n    in the theme).\n\n    A literal token in practice looks like:\n\n    ```{.json}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": 12\n          }\n        }\n      }\n    }\n    ```\n\n3.  Dependent value\n\n    There are several cases where the value of a token is based on a\n    calculation of another value. For instance, the background hover\n    color of a button might be desired to be a shade lighter than the\n    default background color of the button. (In order to specify this,\n    assume we have a `lighten()` function available.)\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"backgroundHoverColor\": {\n              dependsOn: ['backgroundColor'],\n              value: ([backgroundColor: Color]) => lighten(backgroundColor)\n            }\n          }\n        }\n      }\n    }\n    ```\n\n### Customizing tokens by creating variants\n\nIf adjusting all instances of a component with a token override is not\ndesirable, then it is possible to create a component variant using\n`compose`.\n\nFor instance, it might be the case that most `Button` instances should\nlook a certain way, but `Button` instances in a toolbar should not\ninherit the same tokens.\n\nThe solution is to create a component that can apply different tokens,\nbut retains the same underlying behavior.\n\nTo create a new component that can be targeted separately from the base\ncomponent, simply call `compose` and optionally provide new tokens.\n\n```{.javascript org-language=\"js\"}\nconst ToolbarButton = compose(Button, {\n  tokens: {\n    fontSize: t => t.font.small\n  }\n});\n```\n\n## Customizing with slots\n\nWhile tokens affect the look and feel of rendered elements, `slots`\nprovides a way to make more significant adjustments to a component\\'s\nstructure and behavior.\n\nA slot is a rendered DOM element or higher level control that can be\nreplaced at runtime.\n\nAs an example, a `Checkbox` might choose to render a `label` element to\nhold descriptive text. If a use-case called for a proprietary\n`<MyLabel />` control instead of a `label`, that slot could be targeted\nfor replacement.\n\n### Overriding slots with a theme\n\nTo override a slot from a theme, specify a reference to the component in\nthe theme.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n{\n  \"components\": {\n    \"Checkbox\": {\n      \"slots\": {\n        \"label\": MyLabel\n      }\n    }\n  }\n}\n```\n\n### Overriding slots with a new component\n\n`compose` can also specify slot assignments directly.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n\nconst MyCheckbox = compse(Checkbox, {\n  slots: {\n    label: MyLabel\n  }\n});\n```\n\n# Creating a component meant for use with `compose`\n\nComponents that work well with compose consist of 2 parts: an unstlyled\nbased component and a composed layer that glues look and feel to the\nbase component.\n\nThis section first describes how tokens and styles are calculated, then\nexplains what an unstyled base component must do in order to be a good\ncitizen in the compose world.\n\n## Understanding tokens\n\nTokens are the exclusive means of getting data from a theme into a\ncomponent. Tokens should be specified for every aspect of a control\\'s\nlook and feel.\n\nTokens should be named according to the following anatomy:\n\n    {slot (or none for root)}{property}{state (or none for default)}\n\nExamples:\n\n- `thumbSizeHovered`\n- `backgroundColor`\n- `labelBorderDisabled`\n\nTODO: Exhaustive description of token declarations\n\n## Understanding styles\n\nAfter evaluating tokens, the tokens are passed to a `style` function.\nThe `style` function should return an object which can be rendered by\n`JSS`.\n\nExample:\n\n```{.javascript org-language=\"js\"}\nconst styles = (tokens: MyComponentTokens) => {\n  return {\n    root: {\n      backgroundColor: tokens.backgroundColor,\n      '&:hover': {\n        backgroundColor: tokens.backgroundHoverColor\n      }\n    },\n    widget: {\n      borderColor: tokens.borderColor\n    }\n  };\n}\n```\n\n## Understanding slots\n\nComponents should define a set of logical elements that are reasonable\nto replace. Additionally, sensible defaults should be provided. Slots\nprovide an opportunity for callers to late-bind sections for\nreplacement.\n\nTODO: examples of more slots\n\n## Writing the base component\n\nAny functional component can be used with `compose`. However, there are\nseveral conventions that should be respected in order to make the user\nexperience predictable.\n\nA good base component deviates from a run-of-the-mill component in 3\nways:\n\n- It should have no built-in opinion of styling. When styled via\n  `compose`, class names will be passed in via `slotProps` to provide\n  styling.\n- It accepts a prop named `slots`, which define the component to use\n  for subcomponents.\n- It accepts a prop named `slotProps`, which will be handed off to\n  subcomponents.\n\n### States\n\nEach component should ennumerate the possible set of states as a set of\nboolean flags.\n\nFor instance, a checkbox might declare these flags:\n\n- `checked`\n- `readonly`\n- `disabled`\n- `labeled`\n\n**NB:** States should be **boolean** values only.\n\nThese states affect what classNames are selected to render on the root\nelement of a component.\n\nFor instance, in the case of a checkbox, the previous states would cause\nthose selectors to appear on the root making them available to all\ndownlevel slots.\n\n### Slots\n\nTODO: Describe how to interact with slots\n\n### Slot Props\n\nTODO: Describe how to interact with slotProps\n\n### Building in practice\n\nA simple base component that renders a button might look like the\nfollowing:\n\n```{.javascript org-language=\"js\"}\ninterface Props {\n  slots;\n  slotProps;\n  children;\n  onClick;\n}\nconst BaseButton: React.FunctionComponent<Props> = (props: Props) => {\n\n  // First, define the slots\n  // define `Root` as a const which renders the root.\n  // Default to a button element.\n  const { root: Root = 'button' } = props.slots || {};\n\n  // Break out slot props to be passed to various components.\n  // Mix in the props specified directly in props.\n  const { root: rootProps } = props.slotProps || {};\n\n  const resolvedRootProps = { ...rootProps, onClick: props.onClick };\n\n  // Finally, render the component\n  return <Root {...resolvedRootProps}>{props.children}</Root>\n}\n```\n\nAs components grow and become more complex, it is expected that hooks\nwill be developed to resolve state and intelligently merge `props` into\n`slotProps`.\n\n## Conformance\n\nTODO: Describe how to run conformance tests to make sure that base\ncomponents appropriately react to theme changes.\n","gitHead":"e71dee3738133cf691c3fecfd36cb391290d8669","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.15.1","@uifabric/merge-styles":"^7.8.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.47.3_1591103942877_0.008603020172037734","host":"s3://npm-registry-packages"}},"0.47.4":{"name":"@fluentui/react-theming","version":"0.47.4","license":"MIT","_id":"@fluentui/react-theming@0.47.4","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"d4053701fd6bd94c8fbe9a53bc47b65c122fb8ef","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.47.4.tgz","fileCount":90,"integrity":"sha512-cITr/yqpj8fLufQToJBpXQzjLk4WqugpWD3LRQ3Mh0Fy4PiKYbZQGgCae6bSpNPKJrWyEAYA7U/3jKyGPUV8ig==","signatures":[{"sig":"MEUCIAmVM+G51ZXte2yUT22Edsw2GVVE2zL10ongnBK5bBIsAiEAhywMoLIrzM19A9gNP/rxY8IQimSTztz2ErUt0Dry/Ks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe57iHCRA9TVsSAnZWagAAff0P/2at+mCkYv2L8fJKSy/p\n3bLWCibLQ5qDJqQXPupsISgPi8hKfIbgKc6UuBw3DR5md8BB69d5ecCfdDXX\n7Pa6ywKEFLbZloHHvthrI9FsiZKfDr6VOxwFnrLCqlDBwj3nsa6I64p6qufC\nzMuZkdTqhRLTkOP0ISXSaZqpM+m9ACc5H8+09YzT6iOrXOy0+Xc4ibe17Jdg\nXVTphkj32Bft7QMR7/AFVzahMsN6JLMUiMvPtG4q07SuVsfl74Q0bCohjEoV\nlqpVS6DLIyPDVjyPGWBS7/lzk9bu4RddGkWu+v6rngkscfK4Ft/C0OjjpaGv\nOSRGpr650JA2ecjduUfnoZwDKw/70RHPdtspjJtxDthFoWKCv3xDWKQmn+j4\n//qx5k94x4ecEaAweMGtC7HZkUfWRgkW2oLRfCzyuqpn1NTrwe08GPEYLzhN\nmacRexSOCJZkoT520U7RemLyZf71iGAsknBWZEfO9FmSVvVaaJLBFZqZMx8L\nZLlDp2lpcLznhWJAQqEEQAOE/Uv28zYsa9Uw5nEAs93h5FEJ+HvGV5AtEZoD\nk1PUFZfJyrmZACmP8W2OQC72OfGRgiE1GR0IWgw5Dh6r9vOrqZhMHZRyyDM1\nNfHEEsdB/pg3yOeUI64Bde3GZFOFBKUNNe8zujHdQvcJk0HfD8Ex+WeIvchD\nTERJ\r\n=mxmU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","readme":"# Summary\n\n`react-compose` provides a set of tools for creating themable components. The `compose` tool takes a functional component and, given default options and contextual overrides provided through React context, computes injected props including `classes`, `slots`, and `slotProps`. Styles are computed only when encountering unique theme objects per component, resulting in optimized performance.\n\nExample:\n\n```\nimport { SliderBase } from './Slider.base';\nimport { compose } from '@fluentui/react-theming';\n\nexport const Slider = compose(SliderBase, {\n  // the themable name of the component\n  name: 'Slider'\n\n  // the set of replacement tokens to be injected into the styles\n  tokens,\n\n  // The css styling to be injected as a `classes` prop\n  styles\n\n  // A dictionary of React components representing the actual subcomponents to be used by the Slider\n  slots\n});\n\n// Composed components can be recomposed to offer slightly different permutations.\nexport const RedSlider = compose(Slider, {\n  tokens: { railColor: 'red' }\n});\n```\n\nTheming can be achieved through applications using a `ThemeProvider` component, also provided in the library:\n\n```tsx\n// Create a theme with a token override for the Slider.\nconst theme = createTheme({\n  components: {\n    Slider: {\n      tokens: {\n        railColor: 'green',\n      },\n    },\n  },\n});\n\n// Render the slider using the theme.\nconst App = () => (\n  <ThemeProvider theme={theme}>\n    <Slider />\n  </ThemeProvider>\n);\n```\n\n## Principles\n\n`compose` follows 3 principles:\n\n- Prefer faster components over more flexible components (if a decision between the 2 must be made.)\n\n- Decouple theming/styling from implementation in order to ensure the styling approach can be replaced without rewriting the component.\n\n- Keep it simple; avoid adding too many concepts for developers to learn.\n\n## Who is `compose` for?\n\nComponents created with `compose` are meant for use by anyone.\n\n`compose` itself is primarily intended for use by component authors; it provides a consistent means of attaching to a \"themed context\".\n\n`compose` can also be used by application developers to enable a greater level of customization when the \"theme\" does not provide enough flexibility.\n\n## When should I use `compose`?\n\n- When creating a component that should be themeable.\n- When overriding major details of an existing component. (Explained\n  later in \\\"Overriding (tokens\\|slots) with a new component\\\".)\n\n## What\\'s in a theme?\n\nA Fluent UI theme contains several major sections. At at high level, it\ncontains detail about colors, types, effects, spacing, and animation.\nFurthermore, a theme has the ability to override major details about\neach and every component\\'s look and feel as well as behavior.\n\n> TODO: document theme\n\n# Using components created with `compose`\n\nThere is no requirement around using components build with `compose`. If you use them without a theme, they will render with whichever default token/styling values, if any, are provided.\n\nIt is recommended the default styling provide very limited styling, leaving tokens as the preferred method for customizing the component.\n\n## Styling components with a theme\n\nDefault styling and tokens can always be overridden using theme.\n\n> TODO: how would one replace styling completely, instead of overriding it?\n\n## Customizing with tokens\n\nFrequently, individual products design needs conflict with that of the\nbase style. To accomodate necessary changes, `Tokens` exist to allow easy\nmodification of most all aspects of look and feel.\n\nA token is a key that corresponds to a value, usually from from the\napplied theme. Examples of tokens might be `fontSize`, `fontFamily`,\n`borderRadius`, `animationDuration`, and `labelHoveredbBackground`.\n\n### Setting tokens with a theme\n\nTo understand the set of tokens that a specific component understands,\nrefer to the documentation of that component. For this example, we will\nassume that a `Button` component exists that supports the following\ntokens:\n\n- `backgroundColor`\n- `fontSize`\n- `backgroundHoverColor`\n\nTo override any (or all) of the Button\\'s tokens, an object should be\nprovided within the theme under:\n\n```{.json}\n{\n  \"components\": {\n    \"Button\": {\n      \"tokens\": {\n        \"values\": \"here...\"\n      }\n    }\n  }\n}\n```\n\nTokens are represented by the following:\n\n1.  Function\n\n    A functional token is the preferred method of adjusting look and\n    feel. Functional tokens reference values in the applied theme.\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": t => t.fonts.base,\n            \"backgroundColor\": t => t.colors.brand[2]\n          }\n        }\n      }\n    }\n    ```\n\n2.  Literal value\n\n    A literal value allows a token to be hard-coded. It is considered\n    the least desirable (as it will never be affected by other changes\n    in the theme).\n\n    A literal token in practice looks like:\n\n    ```{.json}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": 12\n          }\n        }\n      }\n    }\n    ```\n\n3.  Dependent value\n\n    There are several cases where the value of a token is based on a\n    calculation of another value. For instance, the background hover\n    color of a button might be desired to be a shade lighter than the\n    default background color of the button. (In order to specify this,\n    assume we have a `lighten()` function available.)\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"backgroundHoverColor\": {\n              dependsOn: ['backgroundColor'],\n              value: ([backgroundColor: Color]) => lighten(backgroundColor)\n            }\n          }\n        }\n      }\n    }\n    ```\n\n### Customizing tokens by creating variants\n\nIf adjusting all instances of a component with a token override is not\ndesirable, then it is possible to create a component variant using\n`compose`.\n\nFor instance, it might be the case that most `Button` instances should\nlook a certain way, but `Button` instances in a toolbar should not\ninherit the same tokens.\n\nThe solution is to create a component that can apply different tokens,\nbut retains the same underlying behavior.\n\nTo create a new component that can be targeted separately from the base\ncomponent, simply call `compose` and optionally provide new tokens.\n\n```{.javascript org-language=\"js\"}\nconst ToolbarButton = compose(Button, {\n  tokens: {\n    fontSize: t => t.font.small\n  }\n});\n```\n\n## Customizing with slots\n\nWhile tokens affect the look and feel of rendered elements, `slots`\nprovides a way to make more significant adjustments to a component\\'s\nstructure and behavior.\n\nA slot is a rendered DOM element or higher level control that can be\nreplaced at runtime.\n\nAs an example, a `Checkbox` might choose to render a `label` element to\nhold descriptive text. If a use-case called for a proprietary\n`<MyLabel />` control instead of a `label`, that slot could be targeted\nfor replacement.\n\n### Overriding slots with a theme\n\nTo override a slot from a theme, specify a reference to the component in\nthe theme.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n{\n  \"components\": {\n    \"Checkbox\": {\n      \"slots\": {\n        \"label\": MyLabel\n      }\n    }\n  }\n}\n```\n\n### Overriding slots with a new component\n\n`compose` can also specify slot assignments directly.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n\nconst MyCheckbox = compse(Checkbox, {\n  slots: {\n    label: MyLabel\n  }\n});\n```\n\n# Creating a component meant for use with `compose`\n\nComponents that work well with compose consist of 2 parts: an unstlyled\nbased component and a composed layer that glues look and feel to the\nbase component.\n\nThis section first describes how tokens and styles are calculated, then\nexplains what an unstyled base component must do in order to be a good\ncitizen in the compose world.\n\n## Understanding tokens\n\nTokens are the exclusive means of getting data from a theme into a\ncomponent. Tokens should be specified for every aspect of a control\\'s\nlook and feel.\n\nTokens should be named according to the following anatomy:\n\n    {slot (or none for root)}{property}{state (or none for default)}\n\nExamples:\n\n- `thumbSizeHovered`\n- `backgroundColor`\n- `labelBorderDisabled`\n\nTODO: Exhaustive description of token declarations\n\n## Understanding styles\n\nAfter evaluating tokens, the tokens are passed to a `style` function.\nThe `style` function should return an object which can be rendered by\n`JSS`.\n\nExample:\n\n```{.javascript org-language=\"js\"}\nconst styles = (tokens: MyComponentTokens) => {\n  return {\n    root: {\n      backgroundColor: tokens.backgroundColor,\n      '&:hover': {\n        backgroundColor: tokens.backgroundHoverColor\n      }\n    },\n    widget: {\n      borderColor: tokens.borderColor\n    }\n  };\n}\n```\n\n## Understanding slots\n\nComponents should define a set of logical elements that are reasonable\nto replace. Additionally, sensible defaults should be provided. Slots\nprovide an opportunity for callers to late-bind sections for\nreplacement.\n\nTODO: examples of more slots\n\n## Writing the base component\n\nAny functional component can be used with `compose`. However, there are\nseveral conventions that should be respected in order to make the user\nexperience predictable.\n\nA good base component deviates from a run-of-the-mill component in 3\nways:\n\n- It should have no built-in opinion of styling. When styled via\n  `compose`, class names will be passed in via `slotProps` to provide\n  styling.\n- It accepts a prop named `slots`, which define the component to use\n  for subcomponents.\n- It accepts a prop named `slotProps`, which will be handed off to\n  subcomponents.\n\n### States\n\nEach component should ennumerate the possible set of states as a set of\nboolean flags.\n\nFor instance, a checkbox might declare these flags:\n\n- `checked`\n- `readonly`\n- `disabled`\n- `labeled`\n\n**NB:** States should be **boolean** values only.\n\nThese states affect what classNames are selected to render on the root\nelement of a component.\n\nFor instance, in the case of a checkbox, the previous states would cause\nthose selectors to appear on the root making them available to all\ndownlevel slots.\n\n### Slots\n\nTODO: Describe how to interact with slots\n\n### Slot Props\n\nTODO: Describe how to interact with slotProps\n\n### Building in practice\n\nA simple base component that renders a button might look like the\nfollowing:\n\n```{.javascript org-language=\"js\"}\ninterface Props {\n  slots;\n  slotProps;\n  children;\n  onClick;\n}\nconst BaseButton: React.FunctionComponent<Props> = (props: Props) => {\n\n  // First, define the slots\n  // define `Root` as a const which renders the root.\n  // Default to a button element.\n  const { root: Root = 'button' } = props.slots || {};\n\n  // Break out slot props to be passed to various components.\n  // Mix in the props specified directly in props.\n  const { root: rootProps } = props.slotProps || {};\n\n  const resolvedRootProps = { ...rootProps, onClick: props.onClick };\n\n  // Finally, render the component\n  return <Root {...resolvedRootProps}>{props.children}</Root>\n}\n```\n\nAs components grow and become more complex, it is expected that hooks\nwill be developed to resolve state and intelligently merge `props` into\n`slotProps`.\n\n## Conformance\n\nTODO: Describe how to run conformance tests to make sure that base\ncomponents appropriately react to theme changes.\n","gitHead":"52d662336bf9fc5ac397c302f6decd3700d1dffd","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.15.1","@uifabric/merge-styles":"^7.8.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.47.4_1592244359407_0.07323946662440872","host":"s3://npm-registry-packages"}},"0.47.5":{"name":"@fluentui/react-theming","version":"0.47.5","license":"MIT","_id":"@fluentui/react-theming@0.47.5","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"a7f05a33241b13cdf09cda0829a0b16c72ca33d1","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.47.5.tgz","fileCount":90,"integrity":"sha512-Wv480x6Zl53/Jv047X6nTXF+kZ6zovW32Z2JZ+Cimxgd0s6qLz8EuNFStVxnf+r9Heg2J4qp8rCy4IgeT77KQQ==","signatures":[{"sig":"MEUCIBO31sZsXzxOnv9+dngDO57IqKcygbg5UHmJrQ/9rg+0AiEAl1NFEHqNZjyJ4mdC3jHXy7Ph2znAHs/i0Ttw0495+cY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe58FJCRA9TVsSAnZWagAAiM4P/09+BrONyyQofdmNWwlG\n/VhuzLjVXFe/wm1awHDs63GHnQ4xmKsBgFHczCFiyw7Gm3XQTpydfi6TE0hK\nmSkXCafOGDAAyaXLvdH3bujHcCvL31EXLudjTFhEO1k5tZh+Zu8+V31PEec1\nzS5u38OB3cttmNkSEyHXgJuLWCAS1yJfUzKIbDe64vPerwUtOwowsa4l5/eD\nw3MDQBccK9SqNEu0VrTo2Cr2pmoUolkmX/7SYBgeTosl9g8HQL4FUkq7uHvP\nMPO3fIBVWxh8tBuHSi5TzucqMxqyLze3oTtmwbX2+JjhzmpxpiNPrH9x0phY\nM+7hDkTDbS+qa3EODYJ4uU1uhyriioQ/2mPtuhhyT13FbqnyFI9DIOkJf8JM\nKa0Y3nrPPLyPBthPlOIiacdgbDmVy1CufPE7fTjL+8G9c5g0aV5ytyMpVd5h\n4LMKQa4WBkgzOKIH5TIKzkSju42VkutUlQwxM9SOH5PyEcadZ8OHJiGZ/B/p\nwVtg6a/9Kff8uPtCI7N3ArG8w3rBpT7asBABBayKHbIYxx2fqc9VQ32oYZ4z\nz7Q+pBj7tYV8pYFzW6AjoizK+j97ZtJFwZjXojvXfVitFoBm4W18yQygv3dj\nhXbdNzueQQggv4O23OqbSJEoM571Vn20Ln0EzxHxrRbk6SKGVYM6gMRcFTQN\nCl9E\r\n=h1DI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","readme":"# Summary\n\n`react-compose` provides a set of tools for creating themable components. The `compose` tool takes a functional component and, given default options and contextual overrides provided through React context, computes injected props including `classes`, `slots`, and `slotProps`. Styles are computed only when encountering unique theme objects per component, resulting in optimized performance.\n\nExample:\n\n```\nimport { SliderBase } from './Slider.base';\nimport { compose } from '@fluentui/react-theming';\n\nexport const Slider = compose(SliderBase, {\n  // the themable name of the component\n  name: 'Slider'\n\n  // the set of replacement tokens to be injected into the styles\n  tokens,\n\n  // The css styling to be injected as a `classes` prop\n  styles\n\n  // A dictionary of React components representing the actual subcomponents to be used by the Slider\n  slots\n});\n\n// Composed components can be recomposed to offer slightly different permutations.\nexport const RedSlider = compose(Slider, {\n  tokens: { railColor: 'red' }\n});\n```\n\nTheming can be achieved through applications using a `ThemeProvider` component, also provided in the library:\n\n```tsx\n// Create a theme with a token override for the Slider.\nconst theme = createTheme({\n  components: {\n    Slider: {\n      tokens: {\n        railColor: 'green',\n      },\n    },\n  },\n});\n\n// Render the slider using the theme.\nconst App = () => (\n  <ThemeProvider theme={theme}>\n    <Slider />\n  </ThemeProvider>\n);\n```\n\n## Principles\n\n`compose` follows 3 principles:\n\n- Prefer faster components over more flexible components (if a decision between the 2 must be made.)\n\n- Decouple theming/styling from implementation in order to ensure the styling approach can be replaced without rewriting the component.\n\n- Keep it simple; avoid adding too many concepts for developers to learn.\n\n## Who is `compose` for?\n\nComponents created with `compose` are meant for use by anyone.\n\n`compose` itself is primarily intended for use by component authors; it provides a consistent means of attaching to a \"themed context\".\n\n`compose` can also be used by application developers to enable a greater level of customization when the \"theme\" does not provide enough flexibility.\n\n## When should I use `compose`?\n\n- When creating a component that should be themeable.\n- When overriding major details of an existing component. (Explained\n  later in \\\"Overriding (tokens\\|slots) with a new component\\\".)\n\n## What\\'s in a theme?\n\nA Fluent UI theme contains several major sections. At at high level, it\ncontains detail about colors, types, effects, spacing, and animation.\nFurthermore, a theme has the ability to override major details about\neach and every component\\'s look and feel as well as behavior.\n\n> TODO: document theme\n\n# Using components created with `compose`\n\nThere is no requirement around using components build with `compose`. If you use them without a theme, they will render with whichever default token/styling values, if any, are provided.\n\nIt is recommended the default styling provide very limited styling, leaving tokens as the preferred method for customizing the component.\n\n## Styling components with a theme\n\nDefault styling and tokens can always be overridden using theme.\n\n> TODO: how would one replace styling completely, instead of overriding it?\n\n## Customizing with tokens\n\nFrequently, individual products design needs conflict with that of the\nbase style. To accomodate necessary changes, `Tokens` exist to allow easy\nmodification of most all aspects of look and feel.\n\nA token is a key that corresponds to a value, usually from from the\napplied theme. Examples of tokens might be `fontSize`, `fontFamily`,\n`borderRadius`, `animationDuration`, and `labelHoveredbBackground`.\n\n### Setting tokens with a theme\n\nTo understand the set of tokens that a specific component understands,\nrefer to the documentation of that component. For this example, we will\nassume that a `Button` component exists that supports the following\ntokens:\n\n- `backgroundColor`\n- `fontSize`\n- `backgroundHoverColor`\n\nTo override any (or all) of the Button\\'s tokens, an object should be\nprovided within the theme under:\n\n```{.json}\n{\n  \"components\": {\n    \"Button\": {\n      \"tokens\": {\n        \"values\": \"here...\"\n      }\n    }\n  }\n}\n```\n\nTokens are represented by the following:\n\n1.  Function\n\n    A functional token is the preferred method of adjusting look and\n    feel. Functional tokens reference values in the applied theme.\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": t => t.fonts.base,\n            \"backgroundColor\": t => t.colors.brand[2]\n          }\n        }\n      }\n    }\n    ```\n\n2.  Literal value\n\n    A literal value allows a token to be hard-coded. It is considered\n    the least desirable (as it will never be affected by other changes\n    in the theme).\n\n    A literal token in practice looks like:\n\n    ```{.json}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": 12\n          }\n        }\n      }\n    }\n    ```\n\n3.  Dependent value\n\n    There are several cases where the value of a token is based on a\n    calculation of another value. For instance, the background hover\n    color of a button might be desired to be a shade lighter than the\n    default background color of the button. (In order to specify this,\n    assume we have a `lighten()` function available.)\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"backgroundHoverColor\": {\n              dependsOn: ['backgroundColor'],\n              value: ([backgroundColor: Color]) => lighten(backgroundColor)\n            }\n          }\n        }\n      }\n    }\n    ```\n\n### Customizing tokens by creating variants\n\nIf adjusting all instances of a component with a token override is not\ndesirable, then it is possible to create a component variant using\n`compose`.\n\nFor instance, it might be the case that most `Button` instances should\nlook a certain way, but `Button` instances in a toolbar should not\ninherit the same tokens.\n\nThe solution is to create a component that can apply different tokens,\nbut retains the same underlying behavior.\n\nTo create a new component that can be targeted separately from the base\ncomponent, simply call `compose` and optionally provide new tokens.\n\n```{.javascript org-language=\"js\"}\nconst ToolbarButton = compose(Button, {\n  tokens: {\n    fontSize: t => t.font.small\n  }\n});\n```\n\n## Customizing with slots\n\nWhile tokens affect the look and feel of rendered elements, `slots`\nprovides a way to make more significant adjustments to a component\\'s\nstructure and behavior.\n\nA slot is a rendered DOM element or higher level control that can be\nreplaced at runtime.\n\nAs an example, a `Checkbox` might choose to render a `label` element to\nhold descriptive text. If a use-case called for a proprietary\n`<MyLabel />` control instead of a `label`, that slot could be targeted\nfor replacement.\n\n### Overriding slots with a theme\n\nTo override a slot from a theme, specify a reference to the component in\nthe theme.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n{\n  \"components\": {\n    \"Checkbox\": {\n      \"slots\": {\n        \"label\": MyLabel\n      }\n    }\n  }\n}\n```\n\n### Overriding slots with a new component\n\n`compose` can also specify slot assignments directly.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n\nconst MyCheckbox = compse(Checkbox, {\n  slots: {\n    label: MyLabel\n  }\n});\n```\n\n# Creating a component meant for use with `compose`\n\nComponents that work well with compose consist of 2 parts: an unstlyled\nbased component and a composed layer that glues look and feel to the\nbase component.\n\nThis section first describes how tokens and styles are calculated, then\nexplains what an unstyled base component must do in order to be a good\ncitizen in the compose world.\n\n## Understanding tokens\n\nTokens are the exclusive means of getting data from a theme into a\ncomponent. Tokens should be specified for every aspect of a control\\'s\nlook and feel.\n\nTokens should be named according to the following anatomy:\n\n    {slot (or none for root)}{property}{state (or none for default)}\n\nExamples:\n\n- `thumbSizeHovered`\n- `backgroundColor`\n- `labelBorderDisabled`\n\nTODO: Exhaustive description of token declarations\n\n## Understanding styles\n\nAfter evaluating tokens, the tokens are passed to a `style` function.\nThe `style` function should return an object which can be rendered by\n`JSS`.\n\nExample:\n\n```{.javascript org-language=\"js\"}\nconst styles = (tokens: MyComponentTokens) => {\n  return {\n    root: {\n      backgroundColor: tokens.backgroundColor,\n      '&:hover': {\n        backgroundColor: tokens.backgroundHoverColor\n      }\n    },\n    widget: {\n      borderColor: tokens.borderColor\n    }\n  };\n}\n```\n\n## Understanding slots\n\nComponents should define a set of logical elements that are reasonable\nto replace. Additionally, sensible defaults should be provided. Slots\nprovide an opportunity for callers to late-bind sections for\nreplacement.\n\nTODO: examples of more slots\n\n## Writing the base component\n\nAny functional component can be used with `compose`. However, there are\nseveral conventions that should be respected in order to make the user\nexperience predictable.\n\nA good base component deviates from a run-of-the-mill component in 3\nways:\n\n- It should have no built-in opinion of styling. When styled via\n  `compose`, class names will be passed in via `slotProps` to provide\n  styling.\n- It accepts a prop named `slots`, which define the component to use\n  for subcomponents.\n- It accepts a prop named `slotProps`, which will be handed off to\n  subcomponents.\n\n### States\n\nEach component should ennumerate the possible set of states as a set of\nboolean flags.\n\nFor instance, a checkbox might declare these flags:\n\n- `checked`\n- `readonly`\n- `disabled`\n- `labeled`\n\n**NB:** States should be **boolean** values only.\n\nThese states affect what classNames are selected to render on the root\nelement of a component.\n\nFor instance, in the case of a checkbox, the previous states would cause\nthose selectors to appear on the root making them available to all\ndownlevel slots.\n\n### Slots\n\nTODO: Describe how to interact with slots\n\n### Slot Props\n\nTODO: Describe how to interact with slotProps\n\n### Building in practice\n\nA simple base component that renders a button might look like the\nfollowing:\n\n```{.javascript org-language=\"js\"}\ninterface Props {\n  slots;\n  slotProps;\n  children;\n  onClick;\n}\nconst BaseButton: React.FunctionComponent<Props> = (props: Props) => {\n\n  // First, define the slots\n  // define `Root` as a const which renders the root.\n  // Default to a button element.\n  const { root: Root = 'button' } = props.slots || {};\n\n  // Break out slot props to be passed to various components.\n  // Mix in the props specified directly in props.\n  const { root: rootProps } = props.slotProps || {};\n\n  const resolvedRootProps = { ...rootProps, onClick: props.onClick };\n\n  // Finally, render the component\n  return <Root {...resolvedRootProps}>{props.children}</Root>\n}\n```\n\nAs components grow and become more complex, it is expected that hooks\nwill be developed to resolve state and intelligently merge `props` into\n`slotProps`.\n\n## Conformance\n\nTODO: Describe how to run conformance tests to make sure that base\ncomponents appropriately react to theme changes.\n","gitHead":"0c8a2bb411a36a509399dd15665e67cbe7c2e618","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.15.1","@uifabric/merge-styles":"^7.8.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.47.5_1592246601248_0.4614920016046793","host":"s3://npm-registry-packages"}},"0.50.0":{"name":"@fluentui/react-theming","version":"0.50.0","license":"MIT","_id":"@fluentui/react-theming@0.50.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"a07a29f6b30dc9c3867a39da1e6a232c2101fdc5","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.50.0.tgz","fileCount":90,"integrity":"sha512-d4F6o23+tycBKit0dLGTYFutsnLBY7coNUh4yMUQcl8Xel1ZUzU2f4LCgwdq7kT4FLzvw0JG+OWfMgdgLYRblA==","signatures":[{"sig":"MEYCIQDHaNJ/8khMXvGwzpU8sIxRtExTL981P5VZhpmR0TYvZAIhAPYYNUS71ijc6gxzG4QbcLO4g4wuwusc4xO/6KnL1fya","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":201964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2HggCRA9TVsSAnZWagAATPAQAIUVI6yWldgxQ/gQ+11w\nv3aERGymzAJ73GSeiodInPRJU/EMC86aV24rChFfGNV5sn3NsLi9J0+7EzvR\ndu/RS4CzArDEcu+0d2sxFXY/WnC6n4wXtsZoyC4rSpox4Up70QgoPKm0Es0b\nwgpwPpdKpS/0KpwpEdkeDUrNwdsuWzmukZGQ36WEu+doZJHqgg7YlmRkUjLq\nfcTsIxs2mChPwniCblpykbKyKL+2/oWcP2R1z96VkaHdvU3+SGay+xs8ec7C\nsuT7EhXiHfW0MbJffkqDNWL3Zev2ASF7WN/GV/ui84r371ZvT+35Vmt7WyGz\ny2yciBUM1pCU3bUr9oCt/131Qn2o/VrZd0jpZ25C8ic0p9cBL667hOiSswuo\n+sMd6CZLkenIcE2yXDArmAfjiHtpZja+yX6whO+AbHaIOn41iqBO9wyssuI7\nwuRngM18zmcvvO61WjFXoSoqwk7dLeLy4f/y3PVe/rQTnoXE+qVD+93w+h7T\n8Uj2eIMAU3qGqQBVqAG6i9J7B1bE13otZoRTubfZw/iMZJqxFSOAKqlvg4r7\nkVPtGtxSxwmz0+rLpgvGhjMmtCLz1jD0lOOQaKOwVuE0vXvpBG38cjj9w00d\nkJDLQXmiH4JbvcNo4rTswTP06ISHhOzU8abfb7s+kAzAEvSSDzWvMJBej7kM\ncVsa\r\n=I1hv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","gitHead":"f986757f9fccfef210e85163dfe9d795cf54f8af","scripts":{"just":"just-scripts","lint":"eslint --ext .js,.ts,.tsx .","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint --fix","start-test":"just-scripts test:watch"},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.21.0","@uifabric/merge-styles":"^7.14.1","@fluentui/react-theme-provider":"^0.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.25","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.50.0_1592319746356_0.22351615750440335","host":"s3://npm-registry-packages"}},"0.47.6":{"name":"@fluentui/react-theming","version":"0.47.6","license":"MIT","_id":"@fluentui/react-theming@0.47.6","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"fd0ed2786edf319565317973e7ae250bb6bae221","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.47.6.tgz","fileCount":90,"integrity":"sha512-fqvBGoW5hticN2sHGm1cYLtApR9xC0otCMso4fbPr0L+PiH3sORJbeUqKBCFFKrD11QSQV9d/i3k+E5bslZGAg==","signatures":[{"sig":"MEYCIQCBUAuG/NCxFimfJevmDnuWHiEOLB0iLQk2H7klvwRgyQIhAIXfrPjscuIUZmL9lzSF+V8WMGMPaYX3QStMNzYfjdP8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7NMgCRA9TVsSAnZWagAArrkP/3FM+Esa9AXRuKHqEZi8\neXF4Zecr2UaZU4EvBYo63uiXwxuQwRVOqjIf7qA3+4eaYpeDObrTewc2WHHe\n66+a01mvfi1pAmZesNv0EAuS1qeuv/4JOjuXdBl9UUgtqk7XU+8Kr0uJgHGf\nljfRRuJAnHuMi6WnQAz1SQWbPhAAXNWx3nKBFHZBff1IR1K2RG9QbOgKAcEH\n61PecIulKWDYWqkSA1tvMQ20FtjsvuUv6Ie+15CGOsgKLOrS3oWNQZhpygKT\ncX7GXP8AvR8CueYFCzIQe3vPesb+GM2okexBMDUpX/HI3EVMZhVALinF7Ng/\n/2FTW7qFyOvSbqpluFvUP4wZ7mLYGL/qA4JkAOiqNJNAxWKr4wuYMwnHIwxz\nvO63nOmgjAh+FO4H0Mh7yKsv2IoiXcKHRQ+7/wYPqxqEHn8iT8Lwn4bTsGud\nKNsEejqYwW2a1W9pR1AmfQ7uhpQuxFLKC/InJhjONRi0ojVvqm2VjB8+Wkdg\nTBxw7yC3iN/57tOb1VfctctpA+mwdcAMVbMdub3cAq/b1OQhZp88quMK3579\nL0g5b01av3dBuX7UxPwNlqzKKk4ge4ZQ2nqZh8pPdTwAMR7pYiYM/wHl3T2e\njy2nPlQA6oMWo5QnASi+NFPW54qCF/dq+wERWzyNbL6xr0HAmejoPwp3G+Cu\nmzuk\r\n=e9nN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","readme":"# Summary\n\n`react-compose` provides a set of tools for creating themable components. The `compose` tool takes a functional component and, given default options and contextual overrides provided through React context, computes injected props including `classes`, `slots`, and `slotProps`. Styles are computed only when encountering unique theme objects per component, resulting in optimized performance.\n\nExample:\n\n```\nimport { SliderBase } from './Slider.base';\nimport { compose } from '@fluentui/react-theming';\n\nexport const Slider = compose(SliderBase, {\n  // the themable name of the component\n  name: 'Slider'\n\n  // the set of replacement tokens to be injected into the styles\n  tokens,\n\n  // The css styling to be injected as a `classes` prop\n  styles\n\n  // A dictionary of React components representing the actual subcomponents to be used by the Slider\n  slots\n});\n\n// Composed components can be recomposed to offer slightly different permutations.\nexport const RedSlider = compose(Slider, {\n  tokens: { railColor: 'red' }\n});\n```\n\nTheming can be achieved through applications using a `ThemeProvider` component, also provided in the library:\n\n```tsx\n// Create a theme with a token override for the Slider.\nconst theme = createTheme({\n  components: {\n    Slider: {\n      tokens: {\n        railColor: 'green',\n      },\n    },\n  },\n});\n\n// Render the slider using the theme.\nconst App = () => (\n  <ThemeProvider theme={theme}>\n    <Slider />\n  </ThemeProvider>\n);\n```\n\n## Principles\n\n`compose` follows 3 principles:\n\n- Prefer faster components over more flexible components (if a decision between the 2 must be made.)\n\n- Decouple theming/styling from implementation in order to ensure the styling approach can be replaced without rewriting the component.\n\n- Keep it simple; avoid adding too many concepts for developers to learn.\n\n## Who is `compose` for?\n\nComponents created with `compose` are meant for use by anyone.\n\n`compose` itself is primarily intended for use by component authors; it provides a consistent means of attaching to a \"themed context\".\n\n`compose` can also be used by application developers to enable a greater level of customization when the \"theme\" does not provide enough flexibility.\n\n## When should I use `compose`?\n\n- When creating a component that should be themeable.\n- When overriding major details of an existing component. (Explained\n  later in \\\"Overriding (tokens\\|slots) with a new component\\\".)\n\n## What\\'s in a theme?\n\nA Fluent UI theme contains several major sections. At at high level, it\ncontains detail about colors, types, effects, spacing, and animation.\nFurthermore, a theme has the ability to override major details about\neach and every component\\'s look and feel as well as behavior.\n\n> TODO: document theme\n\n# Using components created with `compose`\n\nThere is no requirement around using components build with `compose`. If you use them without a theme, they will render with whichever default token/styling values, if any, are provided.\n\nIt is recommended the default styling provide very limited styling, leaving tokens as the preferred method for customizing the component.\n\n## Styling components with a theme\n\nDefault styling and tokens can always be overridden using theme.\n\n> TODO: how would one replace styling completely, instead of overriding it?\n\n## Customizing with tokens\n\nFrequently, individual products design needs conflict with that of the\nbase style. To accomodate necessary changes, `Tokens` exist to allow easy\nmodification of most all aspects of look and feel.\n\nA token is a key that corresponds to a value, usually from from the\napplied theme. Examples of tokens might be `fontSize`, `fontFamily`,\n`borderRadius`, `animationDuration`, and `labelHoveredbBackground`.\n\n### Setting tokens with a theme\n\nTo understand the set of tokens that a specific component understands,\nrefer to the documentation of that component. For this example, we will\nassume that a `Button` component exists that supports the following\ntokens:\n\n- `backgroundColor`\n- `fontSize`\n- `backgroundHoverColor`\n\nTo override any (or all) of the Button\\'s tokens, an object should be\nprovided within the theme under:\n\n```{.json}\n{\n  \"components\": {\n    \"Button\": {\n      \"tokens\": {\n        \"values\": \"here...\"\n      }\n    }\n  }\n}\n```\n\nTokens are represented by the following:\n\n1.  Function\n\n    A functional token is the preferred method of adjusting look and\n    feel. Functional tokens reference values in the applied theme.\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": t => t.fonts.base,\n            \"backgroundColor\": t => t.colors.brand[2]\n          }\n        }\n      }\n    }\n    ```\n\n2.  Literal value\n\n    A literal value allows a token to be hard-coded. It is considered\n    the least desirable (as it will never be affected by other changes\n    in the theme).\n\n    A literal token in practice looks like:\n\n    ```{.json}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": 12\n          }\n        }\n      }\n    }\n    ```\n\n3.  Dependent value\n\n    There are several cases where the value of a token is based on a\n    calculation of another value. For instance, the background hover\n    color of a button might be desired to be a shade lighter than the\n    default background color of the button. (In order to specify this,\n    assume we have a `lighten()` function available.)\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"backgroundHoverColor\": {\n              dependsOn: ['backgroundColor'],\n              value: ([backgroundColor: Color]) => lighten(backgroundColor)\n            }\n          }\n        }\n      }\n    }\n    ```\n\n### Customizing tokens by creating variants\n\nIf adjusting all instances of a component with a token override is not\ndesirable, then it is possible to create a component variant using\n`compose`.\n\nFor instance, it might be the case that most `Button` instances should\nlook a certain way, but `Button` instances in a toolbar should not\ninherit the same tokens.\n\nThe solution is to create a component that can apply different tokens,\nbut retains the same underlying behavior.\n\nTo create a new component that can be targeted separately from the base\ncomponent, simply call `compose` and optionally provide new tokens.\n\n```{.javascript org-language=\"js\"}\nconst ToolbarButton = compose(Button, {\n  tokens: {\n    fontSize: t => t.font.small\n  }\n});\n```\n\n## Customizing with slots\n\nWhile tokens affect the look and feel of rendered elements, `slots`\nprovides a way to make more significant adjustments to a component\\'s\nstructure and behavior.\n\nA slot is a rendered DOM element or higher level control that can be\nreplaced at runtime.\n\nAs an example, a `Checkbox` might choose to render a `label` element to\nhold descriptive text. If a use-case called for a proprietary\n`<MyLabel />` control instead of a `label`, that slot could be targeted\nfor replacement.\n\n### Overriding slots with a theme\n\nTo override a slot from a theme, specify a reference to the component in\nthe theme.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n{\n  \"components\": {\n    \"Checkbox\": {\n      \"slots\": {\n        \"label\": MyLabel\n      }\n    }\n  }\n}\n```\n\n### Overriding slots with a new component\n\n`compose` can also specify slot assignments directly.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n\nconst MyCheckbox = compse(Checkbox, {\n  slots: {\n    label: MyLabel\n  }\n});\n```\n\n# Creating a component meant for use with `compose`\n\nComponents that work well with compose consist of 2 parts: an unstlyled\nbased component and a composed layer that glues look and feel to the\nbase component.\n\nThis section first describes how tokens and styles are calculated, then\nexplains what an unstyled base component must do in order to be a good\ncitizen in the compose world.\n\n## Understanding tokens\n\nTokens are the exclusive means of getting data from a theme into a\ncomponent. Tokens should be specified for every aspect of a control\\'s\nlook and feel.\n\nTokens should be named according to the following anatomy:\n\n    {slot (or none for root)}{property}{state (or none for default)}\n\nExamples:\n\n- `thumbSizeHovered`\n- `backgroundColor`\n- `labelBorderDisabled`\n\nTODO: Exhaustive description of token declarations\n\n## Understanding styles\n\nAfter evaluating tokens, the tokens are passed to a `style` function.\nThe `style` function should return an object which can be rendered by\n`JSS`.\n\nExample:\n\n```{.javascript org-language=\"js\"}\nconst styles = (tokens: MyComponentTokens) => {\n  return {\n    root: {\n      backgroundColor: tokens.backgroundColor,\n      '&:hover': {\n        backgroundColor: tokens.backgroundHoverColor\n      }\n    },\n    widget: {\n      borderColor: tokens.borderColor\n    }\n  };\n}\n```\n\n## Understanding slots\n\nComponents should define a set of logical elements that are reasonable\nto replace. Additionally, sensible defaults should be provided. Slots\nprovide an opportunity for callers to late-bind sections for\nreplacement.\n\nTODO: examples of more slots\n\n## Writing the base component\n\nAny functional component can be used with `compose`. However, there are\nseveral conventions that should be respected in order to make the user\nexperience predictable.\n\nA good base component deviates from a run-of-the-mill component in 3\nways:\n\n- It should have no built-in opinion of styling. When styled via\n  `compose`, class names will be passed in via `slotProps` to provide\n  styling.\n- It accepts a prop named `slots`, which define the component to use\n  for subcomponents.\n- It accepts a prop named `slotProps`, which will be handed off to\n  subcomponents.\n\n### States\n\nEach component should ennumerate the possible set of states as a set of\nboolean flags.\n\nFor instance, a checkbox might declare these flags:\n\n- `checked`\n- `readonly`\n- `disabled`\n- `labeled`\n\n**NB:** States should be **boolean** values only.\n\nThese states affect what classNames are selected to render on the root\nelement of a component.\n\nFor instance, in the case of a checkbox, the previous states would cause\nthose selectors to appear on the root making them available to all\ndownlevel slots.\n\n### Slots\n\nTODO: Describe how to interact with slots\n\n### Slot Props\n\nTODO: Describe how to interact with slotProps\n\n### Building in practice\n\nA simple base component that renders a button might look like the\nfollowing:\n\n```{.javascript org-language=\"js\"}\ninterface Props {\n  slots;\n  slotProps;\n  children;\n  onClick;\n}\nconst BaseButton: React.FunctionComponent<Props> = (props: Props) => {\n\n  // First, define the slots\n  // define `Root` as a const which renders the root.\n  // Default to a button element.\n  const { root: Root = 'button' } = props.slots || {};\n\n  // Break out slot props to be passed to various components.\n  // Mix in the props specified directly in props.\n  const { root: rootProps } = props.slotProps || {};\n\n  const resolvedRootProps = { ...rootProps, onClick: props.onClick };\n\n  // Finally, render the component\n  return <Root {...resolvedRootProps}>{props.children}</Root>\n}\n```\n\nAs components grow and become more complex, it is expected that hooks\nwill be developed to resolve state and intelligently merge `props` into\n`slotProps`.\n\n## Conformance\n\nTODO: Describe how to run conformance tests to make sure that base\ncomponents appropriately react to theme changes.\n","gitHead":"f69b34a7366d6f9470469623889ce626ad8504f1","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.15.1","@uifabric/merge-styles":"^7.8.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.47.6_1592578848185_0.4974023607726654","host":"s3://npm-registry-packages"}},"0.47.7":{"name":"@fluentui/react-theming","version":"0.47.7","license":"MIT","_id":"@fluentui/react-theming@0.47.7","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"f618f54bed2853d27c767ab8a689fa45baee8234","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.47.7.tgz","fileCount":90,"integrity":"sha512-Uztoxe5XN4h0ggprd7ILaAaTV69P1KbbPmH192+cuymoeOxkh0v/VgRFKXMkH1IVJLuhtnRX9i+ubsNIbZI8Lg==","signatures":[{"sig":"MEUCIFeWeSAShT5Q8Vlp+VChm35H0Rss68u7dwuhhpCqKRoOAiEAzzBO8pUMpg80XR3k4M/ICvWx6iCWz9s4MeOrEK8rR/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDys4CRA9TVsSAnZWagAAKM8P/3VLayPwzTNeR3l5frir\nR4XyhUzpvSck7NHD3Qy916NDK7KZQMWb+Utq2jC2NbKQ0+usNdIc0fgHqt3x\nMOBn7oHuWMhTzqXU6iAQJT1DBaGfmWNSDCP7kz/vldWzuc6ZWT/Dzk6twACU\ntLhjyjJJXDr77pnwJTVKjvFtomLmJIocsBeIvHNR0NmtcVKiP5BqsOuM8ppf\nGqHvhivGa3HQdTfunxWDCTXD+en4Y6L2jgkvwMM6DbwDzsMrxYpSxhM7Pc+j\ngspbe6+zqr+R7JiAvGC9XJmaqot8ApyXitORO5/9cQkdC2o7mjkpW9hjMjus\n+7fn1rlvnYwedQljy2Uic74gIyLKwJfF8EEYlM6rw72TviTDnrFXf0ON0qog\n/04wJ4/ZGahU6tWCw7ttaVjQYVfbMinNL8/NEgMl6acsZXuUzjQX/wG7+twq\nGircs3pqAC5LlshyAKOpNCNsPQBblwWqPXEyQu59/uKliB4Mush8saJe5QwX\n8qd7NOmC9NYtjFuPdJ2L41Se5I/SGO3meLruRikdv1pXZSpesWSR0tXtcNAL\n5Az9mIuYgY+KR4JiD9lYpvJLfXZBr3Xp5i7QKDQbkloZhvXbHABrIcbF1t35\nDteI6jTYC/GsVEc6eo8I0wTq+9AKUN4JQPiIm6rQPFEf7NvJ/+4MGLwZKX4V\niatx\r\n=RG92\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","readme":"# Summary\n\n`react-compose` provides a set of tools for creating themable components. The `compose` tool takes a functional component and, given default options and contextual overrides provided through React context, computes injected props including `classes`, `slots`, and `slotProps`. Styles are computed only when encountering unique theme objects per component, resulting in optimized performance.\n\nExample:\n\n```\nimport { SliderBase } from './Slider.base';\nimport { compose } from '@fluentui/react-theming';\n\nexport const Slider = compose(SliderBase, {\n  // the themable name of the component\n  name: 'Slider'\n\n  // the set of replacement tokens to be injected into the styles\n  tokens,\n\n  // The css styling to be injected as a `classes` prop\n  styles\n\n  // A dictionary of React components representing the actual subcomponents to be used by the Slider\n  slots\n});\n\n// Composed components can be recomposed to offer slightly different permutations.\nexport const RedSlider = compose(Slider, {\n  tokens: { railColor: 'red' }\n});\n```\n\nTheming can be achieved through applications using a `ThemeProvider` component, also provided in the library:\n\n```tsx\n// Create a theme with a token override for the Slider.\nconst theme = createTheme({\n  components: {\n    Slider: {\n      tokens: {\n        railColor: 'green',\n      },\n    },\n  },\n});\n\n// Render the slider using the theme.\nconst App = () => (\n  <ThemeProvider theme={theme}>\n    <Slider />\n  </ThemeProvider>\n);\n```\n\n## Principles\n\n`compose` follows 3 principles:\n\n- Prefer faster components over more flexible components (if a decision between the 2 must be made.)\n\n- Decouple theming/styling from implementation in order to ensure the styling approach can be replaced without rewriting the component.\n\n- Keep it simple; avoid adding too many concepts for developers to learn.\n\n## Who is `compose` for?\n\nComponents created with `compose` are meant for use by anyone.\n\n`compose` itself is primarily intended for use by component authors; it provides a consistent means of attaching to a \"themed context\".\n\n`compose` can also be used by application developers to enable a greater level of customization when the \"theme\" does not provide enough flexibility.\n\n## When should I use `compose`?\n\n- When creating a component that should be themeable.\n- When overriding major details of an existing component. (Explained\n  later in \\\"Overriding (tokens\\|slots) with a new component\\\".)\n\n## What\\'s in a theme?\n\nA Fluent UI theme contains several major sections. At at high level, it\ncontains detail about colors, types, effects, spacing, and animation.\nFurthermore, a theme has the ability to override major details about\neach and every component\\'s look and feel as well as behavior.\n\n> TODO: document theme\n\n# Using components created with `compose`\n\nThere is no requirement around using components build with `compose`. If you use them without a theme, they will render with whichever default token/styling values, if any, are provided.\n\nIt is recommended the default styling provide very limited styling, leaving tokens as the preferred method for customizing the component.\n\n## Styling components with a theme\n\nDefault styling and tokens can always be overridden using theme.\n\n> TODO: how would one replace styling completely, instead of overriding it?\n\n## Customizing with tokens\n\nFrequently, individual products design needs conflict with that of the\nbase style. To accomodate necessary changes, `Tokens` exist to allow easy\nmodification of most all aspects of look and feel.\n\nA token is a key that corresponds to a value, usually from from the\napplied theme. Examples of tokens might be `fontSize`, `fontFamily`,\n`borderRadius`, `animationDuration`, and `labelHoveredbBackground`.\n\n### Setting tokens with a theme\n\nTo understand the set of tokens that a specific component understands,\nrefer to the documentation of that component. For this example, we will\nassume that a `Button` component exists that supports the following\ntokens:\n\n- `backgroundColor`\n- `fontSize`\n- `backgroundHoverColor`\n\nTo override any (or all) of the Button\\'s tokens, an object should be\nprovided within the theme under:\n\n```{.json}\n{\n  \"components\": {\n    \"Button\": {\n      \"tokens\": {\n        \"values\": \"here...\"\n      }\n    }\n  }\n}\n```\n\nTokens are represented by the following:\n\n1.  Function\n\n    A functional token is the preferred method of adjusting look and\n    feel. Functional tokens reference values in the applied theme.\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": t => t.fonts.base,\n            \"backgroundColor\": t => t.colors.brand[2]\n          }\n        }\n      }\n    }\n    ```\n\n2.  Literal value\n\n    A literal value allows a token to be hard-coded. It is considered\n    the least desirable (as it will never be affected by other changes\n    in the theme).\n\n    A literal token in practice looks like:\n\n    ```{.json}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": 12\n          }\n        }\n      }\n    }\n    ```\n\n3.  Dependent value\n\n    There are several cases where the value of a token is based on a\n    calculation of another value. For instance, the background hover\n    color of a button might be desired to be a shade lighter than the\n    default background color of the button. (In order to specify this,\n    assume we have a `lighten()` function available.)\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"backgroundHoverColor\": {\n              dependsOn: ['backgroundColor'],\n              value: ([backgroundColor: Color]) => lighten(backgroundColor)\n            }\n          }\n        }\n      }\n    }\n    ```\n\n### Customizing tokens by creating variants\n\nIf adjusting all instances of a component with a token override is not\ndesirable, then it is possible to create a component variant using\n`compose`.\n\nFor instance, it might be the case that most `Button` instances should\nlook a certain way, but `Button` instances in a toolbar should not\ninherit the same tokens.\n\nThe solution is to create a component that can apply different tokens,\nbut retains the same underlying behavior.\n\nTo create a new component that can be targeted separately from the base\ncomponent, simply call `compose` and optionally provide new tokens.\n\n```{.javascript org-language=\"js\"}\nconst ToolbarButton = compose(Button, {\n  tokens: {\n    fontSize: t => t.font.small\n  }\n});\n```\n\n## Customizing with slots\n\nWhile tokens affect the look and feel of rendered elements, `slots`\nprovides a way to make more significant adjustments to a component\\'s\nstructure and behavior.\n\nA slot is a rendered DOM element or higher level control that can be\nreplaced at runtime.\n\nAs an example, a `Checkbox` might choose to render a `label` element to\nhold descriptive text. If a use-case called for a proprietary\n`<MyLabel />` control instead of a `label`, that slot could be targeted\nfor replacement.\n\n### Overriding slots with a theme\n\nTo override a slot from a theme, specify a reference to the component in\nthe theme.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n{\n  \"components\": {\n    \"Checkbox\": {\n      \"slots\": {\n        \"label\": MyLabel\n      }\n    }\n  }\n}\n```\n\n### Overriding slots with a new component\n\n`compose` can also specify slot assignments directly.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n\nconst MyCheckbox = compse(Checkbox, {\n  slots: {\n    label: MyLabel\n  }\n});\n```\n\n# Creating a component meant for use with `compose`\n\nComponents that work well with compose consist of 2 parts: an unstlyled\nbased component and a composed layer that glues look and feel to the\nbase component.\n\nThis section first describes how tokens and styles are calculated, then\nexplains what an unstyled base component must do in order to be a good\ncitizen in the compose world.\n\n## Understanding tokens\n\nTokens are the exclusive means of getting data from a theme into a\ncomponent. Tokens should be specified for every aspect of a control\\'s\nlook and feel.\n\nTokens should be named according to the following anatomy:\n\n    {slot (or none for root)}{property}{state (or none for default)}\n\nExamples:\n\n- `thumbSizeHovered`\n- `backgroundColor`\n- `labelBorderDisabled`\n\nTODO: Exhaustive description of token declarations\n\n## Understanding styles\n\nAfter evaluating tokens, the tokens are passed to a `style` function.\nThe `style` function should return an object which can be rendered by\n`JSS`.\n\nExample:\n\n```{.javascript org-language=\"js\"}\nconst styles = (tokens: MyComponentTokens) => {\n  return {\n    root: {\n      backgroundColor: tokens.backgroundColor,\n      '&:hover': {\n        backgroundColor: tokens.backgroundHoverColor\n      }\n    },\n    widget: {\n      borderColor: tokens.borderColor\n    }\n  };\n}\n```\n\n## Understanding slots\n\nComponents should define a set of logical elements that are reasonable\nto replace. Additionally, sensible defaults should be provided. Slots\nprovide an opportunity for callers to late-bind sections for\nreplacement.\n\nTODO: examples of more slots\n\n## Writing the base component\n\nAny functional component can be used with `compose`. However, there are\nseveral conventions that should be respected in order to make the user\nexperience predictable.\n\nA good base component deviates from a run-of-the-mill component in 3\nways:\n\n- It should have no built-in opinion of styling. When styled via\n  `compose`, class names will be passed in via `slotProps` to provide\n  styling.\n- It accepts a prop named `slots`, which define the component to use\n  for subcomponents.\n- It accepts a prop named `slotProps`, which will be handed off to\n  subcomponents.\n\n### States\n\nEach component should ennumerate the possible set of states as a set of\nboolean flags.\n\nFor instance, a checkbox might declare these flags:\n\n- `checked`\n- `readonly`\n- `disabled`\n- `labeled`\n\n**NB:** States should be **boolean** values only.\n\nThese states affect what classNames are selected to render on the root\nelement of a component.\n\nFor instance, in the case of a checkbox, the previous states would cause\nthose selectors to appear on the root making them available to all\ndownlevel slots.\n\n### Slots\n\nTODO: Describe how to interact with slots\n\n### Slot Props\n\nTODO: Describe how to interact with slotProps\n\n### Building in practice\n\nA simple base component that renders a button might look like the\nfollowing:\n\n```{.javascript org-language=\"js\"}\ninterface Props {\n  slots;\n  slotProps;\n  children;\n  onClick;\n}\nconst BaseButton: React.FunctionComponent<Props> = (props: Props) => {\n\n  // First, define the slots\n  // define `Root` as a const which renders the root.\n  // Default to a button element.\n  const { root: Root = 'button' } = props.slots || {};\n\n  // Break out slot props to be passed to various components.\n  // Mix in the props specified directly in props.\n  const { root: rootProps } = props.slotProps || {};\n\n  const resolvedRootProps = { ...rootProps, onClick: props.onClick };\n\n  // Finally, render the component\n  return <Root {...resolvedRootProps}>{props.children}</Root>\n}\n```\n\nAs components grow and become more complex, it is expected that hooks\nwill be developed to resolve state and intelligently merge `props` into\n`slotProps`.\n\n## Conformance\n\nTODO: Describe how to run conformance tests to make sure that base\ncomponents appropriately react to theme changes.\n","gitHead":"4ff7591ea54d733d7199ab2f25beb24615b27f97","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.15.1","@uifabric/merge-styles":"^7.8.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.47.7_1594829623837_0.5400489823331285","host":"s3://npm-registry-packages"}},"0.47.8":{"name":"@fluentui/react-theming","version":"0.47.8","license":"MIT","_id":"@fluentui/react-theming@0.47.8","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"bad58e5c82ece1862b841963cf1913c20aac9bc3","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.47.8.tgz","fileCount":90,"integrity":"sha512-idLpmsVBixcTAnofanh4188l2kauxDFN3jNiFeQl59SF6owgxrD9D06I3IzCuKLqmtn/7o5PcmTprmk+AXo1cw==","signatures":[{"sig":"MEQCICeCo6y0H76530ppvjPsHPCKF6+iKRTD86TGgrFE6Nu5AiAiRzg7IQlFIxXZNl3L71a64Yyj0ACUycG1nsYKoyE48w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":204061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLWwDCRA9TVsSAnZWagAAyr8P/R11CfWcGXigyByVIIcv\nJ/EF6j7Zd10RnprX74YkXe/VfG8rTcpw43zMfZ3O4xurOAZHcIoQ6FQc9Y5L\nHzNg0WKtTXTMQx6meDE2IjrQdyuVNFhbjgrPRjLOmuRyTJawbbGBVGEZKzuV\nNvDTamauZptVjzHE+GdFvg+/KUilsdfVSXUN+DOsGp7ZIz0jf5PX7nwiwZ1m\nvi/z+PkJg2lbIeM/0Pljwrr4P7sWt9UuaiZtpUXatXcffb0YoajzR7PhiSiV\nlqzZU3q/Hl5iGEDDq0zke4a6zl5ha8BaYmJfiGYTW5lgEpTqrNYdOnmCnbtI\nl2EYlDZ4AvqDhwrptn/unNpwnPDVhd+zBsBw+DEL0zPctP22PMNnmx9ubRqJ\n+45RGsylq9hiqs8YJWjG1NhYJoenQJFbjJ+6gSn6euASKYs5WZ5vHzysvJ1V\nqepZVCbLv/9cpp0/qlmmgZnwvQkvoXsNeA47q03W+jIvAFFB05wKKB/D8a50\nB2XKflT9uObKEvziv3TyxpD5oyB9H7LBvEceB2vrdSRxdjBTk7h3sJRYDHNA\ne0LqOkxkyILjXCjUNvNw1poCPVe+vHPhzY4NwG8CYex25PN4waty4Iil6EHA\nYTNqOgOmomkoASHKKpnyWDLvfO7BLIJH5XvsDit7I+1PQD2TDiM8D5pTWesq\nJDun\r\n=BFaM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","readme":"# Summary\n\n`react-compose` provides a set of tools for creating themable components. The `compose` tool takes a functional component and, given default options and contextual overrides provided through React context, computes injected props including `classes`, `slots`, and `slotProps`. Styles are computed only when encountering unique theme objects per component, resulting in optimized performance.\n\nExample:\n\n```\nimport { SliderBase } from './Slider.base';\nimport { compose } from '@fluentui/react-theming';\n\nexport const Slider = compose(SliderBase, {\n  // the themable name of the component\n  name: 'Slider'\n\n  // the set of replacement tokens to be injected into the styles\n  tokens,\n\n  // The css styling to be injected as a `classes` prop\n  styles\n\n  // A dictionary of React components representing the actual subcomponents to be used by the Slider\n  slots\n});\n\n// Composed components can be recomposed to offer slightly different permutations.\nexport const RedSlider = compose(Slider, {\n  tokens: { railColor: 'red' }\n});\n```\n\nTheming can be achieved through applications using a `ThemeProvider` component, also provided in the library:\n\n```tsx\n// Create a theme with a token override for the Slider.\nconst theme = createTheme({\n  components: {\n    Slider: {\n      tokens: {\n        railColor: 'green',\n      },\n    },\n  },\n});\n\n// Render the slider using the theme.\nconst App = () => (\n  <ThemeProvider theme={theme}>\n    <Slider />\n  </ThemeProvider>\n);\n```\n\n## Principles\n\n`compose` follows 3 principles:\n\n- Prefer faster components over more flexible components (if a decision between the 2 must be made.)\n\n- Decouple theming/styling from implementation in order to ensure the styling approach can be replaced without rewriting the component.\n\n- Keep it simple; avoid adding too many concepts for developers to learn.\n\n## Who is `compose` for?\n\nComponents created with `compose` are meant for use by anyone.\n\n`compose` itself is primarily intended for use by component authors; it provides a consistent means of attaching to a \"themed context\".\n\n`compose` can also be used by application developers to enable a greater level of customization when the \"theme\" does not provide enough flexibility.\n\n## When should I use `compose`?\n\n- When creating a component that should be themeable.\n- When overriding major details of an existing component. (Explained\n  later in \\\"Overriding (tokens\\|slots) with a new component\\\".)\n\n## What\\'s in a theme?\n\nA Fluent UI theme contains several major sections. At at high level, it\ncontains detail about colors, types, effects, spacing, and animation.\nFurthermore, a theme has the ability to override major details about\neach and every component\\'s look and feel as well as behavior.\n\n> TODO: document theme\n\n# Using components created with `compose`\n\nThere is no requirement around using components build with `compose`. If you use them without a theme, they will render with whichever default token/styling values, if any, are provided.\n\nIt is recommended the default styling provide very limited styling, leaving tokens as the preferred method for customizing the component.\n\n## Styling components with a theme\n\nDefault styling and tokens can always be overridden using theme.\n\n> TODO: how would one replace styling completely, instead of overriding it?\n\n## Customizing with tokens\n\nFrequently, individual products design needs conflict with that of the\nbase style. To accomodate necessary changes, `Tokens` exist to allow easy\nmodification of most all aspects of look and feel.\n\nA token is a key that corresponds to a value, usually from from the\napplied theme. Examples of tokens might be `fontSize`, `fontFamily`,\n`borderRadius`, `animationDuration`, and `labelHoveredbBackground`.\n\n### Setting tokens with a theme\n\nTo understand the set of tokens that a specific component understands,\nrefer to the documentation of that component. For this example, we will\nassume that a `Button` component exists that supports the following\ntokens:\n\n- `backgroundColor`\n- `fontSize`\n- `backgroundHoverColor`\n\nTo override any (or all) of the Button\\'s tokens, an object should be\nprovided within the theme under:\n\n```{.json}\n{\n  \"components\": {\n    \"Button\": {\n      \"tokens\": {\n        \"values\": \"here...\"\n      }\n    }\n  }\n}\n```\n\nTokens are represented by the following:\n\n1.  Function\n\n    A functional token is the preferred method of adjusting look and\n    feel. Functional tokens reference values in the applied theme.\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": t => t.fonts.base,\n            \"backgroundColor\": t => t.colors.brand[2]\n          }\n        }\n      }\n    }\n    ```\n\n2.  Literal value\n\n    A literal value allows a token to be hard-coded. It is considered\n    the least desirable (as it will never be affected by other changes\n    in the theme).\n\n    A literal token in practice looks like:\n\n    ```{.json}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": 12\n          }\n        }\n      }\n    }\n    ```\n\n3.  Dependent value\n\n    There are several cases where the value of a token is based on a\n    calculation of another value. For instance, the background hover\n    color of a button might be desired to be a shade lighter than the\n    default background color of the button. (In order to specify this,\n    assume we have a `lighten()` function available.)\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"backgroundHoverColor\": {\n              dependsOn: ['backgroundColor'],\n              value: ([backgroundColor: Color]) => lighten(backgroundColor)\n            }\n          }\n        }\n      }\n    }\n    ```\n\n### Customizing tokens by creating variants\n\nIf adjusting all instances of a component with a token override is not\ndesirable, then it is possible to create a component variant using\n`compose`.\n\nFor instance, it might be the case that most `Button` instances should\nlook a certain way, but `Button` instances in a toolbar should not\ninherit the same tokens.\n\nThe solution is to create a component that can apply different tokens,\nbut retains the same underlying behavior.\n\nTo create a new component that can be targeted separately from the base\ncomponent, simply call `compose` and optionally provide new tokens.\n\n```{.javascript org-language=\"js\"}\nconst ToolbarButton = compose(Button, {\n  tokens: {\n    fontSize: t => t.font.small\n  }\n});\n```\n\n## Customizing with slots\n\nWhile tokens affect the look and feel of rendered elements, `slots`\nprovides a way to make more significant adjustments to a component\\'s\nstructure and behavior.\n\nA slot is a rendered DOM element or higher level control that can be\nreplaced at runtime.\n\nAs an example, a `Checkbox` might choose to render a `label` element to\nhold descriptive text. If a use-case called for a proprietary\n`<MyLabel />` control instead of a `label`, that slot could be targeted\nfor replacement.\n\n### Overriding slots with a theme\n\nTo override a slot from a theme, specify a reference to the component in\nthe theme.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n{\n  \"components\": {\n    \"Checkbox\": {\n      \"slots\": {\n        \"label\": MyLabel\n      }\n    }\n  }\n}\n```\n\n### Overriding slots with a new component\n\n`compose` can also specify slot assignments directly.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n\nconst MyCheckbox = compse(Checkbox, {\n  slots: {\n    label: MyLabel\n  }\n});\n```\n\n# Creating a component meant for use with `compose`\n\nComponents that work well with compose consist of 2 parts: an unstlyled\nbased component and a composed layer that glues look and feel to the\nbase component.\n\nThis section first describes how tokens and styles are calculated, then\nexplains what an unstyled base component must do in order to be a good\ncitizen in the compose world.\n\n## Understanding tokens\n\nTokens are the exclusive means of getting data from a theme into a\ncomponent. Tokens should be specified for every aspect of a control\\'s\nlook and feel.\n\nTokens should be named according to the following anatomy:\n\n    {slot (or none for root)}{property}{state (or none for default)}\n\nExamples:\n\n- `thumbSizeHovered`\n- `backgroundColor`\n- `labelBorderDisabled`\n\nTODO: Exhaustive description of token declarations\n\n## Understanding styles\n\nAfter evaluating tokens, the tokens are passed to a `style` function.\nThe `style` function should return an object which can be rendered by\n`JSS`.\n\nExample:\n\n```{.javascript org-language=\"js\"}\nconst styles = (tokens: MyComponentTokens) => {\n  return {\n    root: {\n      backgroundColor: tokens.backgroundColor,\n      '&:hover': {\n        backgroundColor: tokens.backgroundHoverColor\n      }\n    },\n    widget: {\n      borderColor: tokens.borderColor\n    }\n  };\n}\n```\n\n## Understanding slots\n\nComponents should define a set of logical elements that are reasonable\nto replace. Additionally, sensible defaults should be provided. Slots\nprovide an opportunity for callers to late-bind sections for\nreplacement.\n\nTODO: examples of more slots\n\n## Writing the base component\n\nAny functional component can be used with `compose`. However, there are\nseveral conventions that should be respected in order to make the user\nexperience predictable.\n\nA good base component deviates from a run-of-the-mill component in 3\nways:\n\n- It should have no built-in opinion of styling. When styled via\n  `compose`, class names will be passed in via `slotProps` to provide\n  styling.\n- It accepts a prop named `slots`, which define the component to use\n  for subcomponents.\n- It accepts a prop named `slotProps`, which will be handed off to\n  subcomponents.\n\n### States\n\nEach component should ennumerate the possible set of states as a set of\nboolean flags.\n\nFor instance, a checkbox might declare these flags:\n\n- `checked`\n- `readonly`\n- `disabled`\n- `labeled`\n\n**NB:** States should be **boolean** values only.\n\nThese states affect what classNames are selected to render on the root\nelement of a component.\n\nFor instance, in the case of a checkbox, the previous states would cause\nthose selectors to appear on the root making them available to all\ndownlevel slots.\n\n### Slots\n\nTODO: Describe how to interact with slots\n\n### Slot Props\n\nTODO: Describe how to interact with slotProps\n\n### Building in practice\n\nA simple base component that renders a button might look like the\nfollowing:\n\n```{.javascript org-language=\"js\"}\ninterface Props {\n  slots;\n  slotProps;\n  children;\n  onClick;\n}\nconst BaseButton: React.FunctionComponent<Props> = (props: Props) => {\n\n  // First, define the slots\n  // define `Root` as a const which renders the root.\n  // Default to a button element.\n  const { root: Root = 'button' } = props.slots || {};\n\n  // Break out slot props to be passed to various components.\n  // Mix in the props specified directly in props.\n  const { root: rootProps } = props.slotProps || {};\n\n  const resolvedRootProps = { ...rootProps, onClick: props.onClick };\n\n  // Finally, render the component\n  return <Root {...resolvedRootProps}>{props.children}</Root>\n}\n```\n\nAs components grow and become more complex, it is expected that hooks\nwill be developed to resolve state and intelligently merge `props` into\n`slotProps`.\n\n## Conformance\n\nTODO: Describe how to run conformance tests to make sure that base\ncomponents appropriately react to theme changes.\n","gitHead":"e1212c16a5a52e3d2d537fbe16117eeadebe894f","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"layershifter","email":"a@fedyashov.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.14.1+x64 (win32)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.14.1","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.15.1","@uifabric/merge-styles":"^7.8.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.47.8_1596812290578_0.1755113808494917","host":"s3://npm-registry-packages"}},"0.47.9":{"name":"@fluentui/react-theming","version":"0.47.9","license":"MIT","_id":"@fluentui/react-theming@0.47.9","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"1242691312a49043690fad5fb6a450dbde735a16","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.47.9.tgz","fileCount":6,"integrity":"sha512-CkcHVbyPCSXCEFxzVxUN07GN6n20VA//fCrOdh0he+wMzKxVNk8B/IeFz4hTxmHyzG2mdJq2cSUsXTmdHfTKOA==","signatures":[{"sig":"MEUCIQC/l3hH6Npfv/T1cFA++bnjT8kcAW6UYoymcfReQLZW2wIgFIQOMKSsvXvbyHfXiK7qbeC1pd9zzBRemN4iK4qmZ1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfO6SACRA9TVsSAnZWagAAVJoP/2N0bTEu37wHAGgMUHmM\nwMBeoZKtH0fP0mWPFoCIOoPpg9qcAPKhmf64Bm9M4kUsGQiVoAqIs5yjRkkl\nQyUG4y1jHemJst+M7aXwSavn0JJAKjyDJdvCvAHzPRC6HLSusZt0qzCKNaUf\ntnkSh578Gdn696NXiEwfwLuj4YHQkVeZuM1YrJRDtYjMh1YTCFAqA6qJzKNU\neNtBhLYYCHOZwCOjCuIRUBYvCfmBjA3Bj/NHj/Z2vsWjdiz3j725Geg6s/Jj\n+O7Yop7A1Tc6ewwHbt/jyNCkS687cT2iFD0/IE7w79Sg/IeZHgyx8ZsFRvxz\nOihWtWf0hIhsyBUhW06DXzcN3chFAscxs/bvGHXCz7L1WP3inoOHAfXLuOn2\n4s7qJcBLr1gypXdOVvYYWEIFJsIouGI94K20eNttyqwa8Dz5gkfnPbkxjHfx\nEiqmC2f3ESxg8h1vH/RXAhAW1/het6Rh2w64zjEfFeO4vhxkUnQ2wz2XC7yh\ntyOyu/xjHCHghlqmDq9Oo4tGcExiyICJM7Ybtj3wsb1krl95qFel4jKghJJ8\noC61vynw6kgEIWZWqZCzZfELM+y/TJ9KowDD9JVtZwDy7L1O96Im1HMO2fsD\nLaQNWeR4VbZ8hVot0A8dfnAAkLFZbv1cslIy7EC67IbdWVoPi5hJUELVj8+6\nzQ0B\r\n=3ViC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","readme":"# Summary\n\n`react-compose` provides a set of tools for creating themable components. The `compose` tool takes a functional component and, given default options and contextual overrides provided through React context, computes injected props including `classes`, `slots`, and `slotProps`. Styles are computed only when encountering unique theme objects per component, resulting in optimized performance.\n\nExample:\n\n```\nimport { SliderBase } from './Slider.base';\nimport { compose } from '@fluentui/react-theming';\n\nexport const Slider = compose(SliderBase, {\n  // the themable name of the component\n  name: 'Slider'\n\n  // the set of replacement tokens to be injected into the styles\n  tokens,\n\n  // The css styling to be injected as a `classes` prop\n  styles\n\n  // A dictionary of React components representing the actual subcomponents to be used by the Slider\n  slots\n});\n\n// Composed components can be recomposed to offer slightly different permutations.\nexport const RedSlider = compose(Slider, {\n  tokens: { railColor: 'red' }\n});\n```\n\nTheming can be achieved through applications using a `ThemeProvider` component, also provided in the library:\n\n```tsx\n// Create a theme with a token override for the Slider.\nconst theme = createTheme({\n  components: {\n    Slider: {\n      tokens: {\n        railColor: 'green',\n      },\n    },\n  },\n});\n\n// Render the slider using the theme.\nconst App = () => (\n  <ThemeProvider theme={theme}>\n    <Slider />\n  </ThemeProvider>\n);\n```\n\n## Principles\n\n`compose` follows 3 principles:\n\n- Prefer faster components over more flexible components (if a decision between the 2 must be made.)\n\n- Decouple theming/styling from implementation in order to ensure the styling approach can be replaced without rewriting the component.\n\n- Keep it simple; avoid adding too many concepts for developers to learn.\n\n## Who is `compose` for?\n\nComponents created with `compose` are meant for use by anyone.\n\n`compose` itself is primarily intended for use by component authors; it provides a consistent means of attaching to a \"themed context\".\n\n`compose` can also be used by application developers to enable a greater level of customization when the \"theme\" does not provide enough flexibility.\n\n## When should I use `compose`?\n\n- When creating a component that should be themeable.\n- When overriding major details of an existing component. (Explained\n  later in \\\"Overriding (tokens\\|slots) with a new component\\\".)\n\n## What\\'s in a theme?\n\nA Fluent UI theme contains several major sections. At at high level, it\ncontains detail about colors, types, effects, spacing, and animation.\nFurthermore, a theme has the ability to override major details about\neach and every component\\'s look and feel as well as behavior.\n\n> TODO: document theme\n\n# Using components created with `compose`\n\nThere is no requirement around using components build with `compose`. If you use them without a theme, they will render with whichever default token/styling values, if any, are provided.\n\nIt is recommended the default styling provide very limited styling, leaving tokens as the preferred method for customizing the component.\n\n## Styling components with a theme\n\nDefault styling and tokens can always be overridden using theme.\n\n> TODO: how would one replace styling completely, instead of overriding it?\n\n## Customizing with tokens\n\nFrequently, individual products design needs conflict with that of the\nbase style. To accomodate necessary changes, `Tokens` exist to allow easy\nmodification of most all aspects of look and feel.\n\nA token is a key that corresponds to a value, usually from from the\napplied theme. Examples of tokens might be `fontSize`, `fontFamily`,\n`borderRadius`, `animationDuration`, and `labelHoveredbBackground`.\n\n### Setting tokens with a theme\n\nTo understand the set of tokens that a specific component understands,\nrefer to the documentation of that component. For this example, we will\nassume that a `Button` component exists that supports the following\ntokens:\n\n- `backgroundColor`\n- `fontSize`\n- `backgroundHoverColor`\n\nTo override any (or all) of the Button\\'s tokens, an object should be\nprovided within the theme under:\n\n```{.json}\n{\n  \"components\": {\n    \"Button\": {\n      \"tokens\": {\n        \"values\": \"here...\"\n      }\n    }\n  }\n}\n```\n\nTokens are represented by the following:\n\n1.  Function\n\n    A functional token is the preferred method of adjusting look and\n    feel. Functional tokens reference values in the applied theme.\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": t => t.fonts.base,\n            \"backgroundColor\": t => t.colors.brand[2]\n          }\n        }\n      }\n    }\n    ```\n\n2.  Literal value\n\n    A literal value allows a token to be hard-coded. It is considered\n    the least desirable (as it will never be affected by other changes\n    in the theme).\n\n    A literal token in practice looks like:\n\n    ```{.json}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": 12\n          }\n        }\n      }\n    }\n    ```\n\n3.  Dependent value\n\n    There are several cases where the value of a token is based on a\n    calculation of another value. For instance, the background hover\n    color of a button might be desired to be a shade lighter than the\n    default background color of the button. (In order to specify this,\n    assume we have a `lighten()` function available.)\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"backgroundHoverColor\": {\n              dependsOn: ['backgroundColor'],\n              value: ([backgroundColor: Color]) => lighten(backgroundColor)\n            }\n          }\n        }\n      }\n    }\n    ```\n\n### Customizing tokens by creating variants\n\nIf adjusting all instances of a component with a token override is not\ndesirable, then it is possible to create a component variant using\n`compose`.\n\nFor instance, it might be the case that most `Button` instances should\nlook a certain way, but `Button` instances in a toolbar should not\ninherit the same tokens.\n\nThe solution is to create a component that can apply different tokens,\nbut retains the same underlying behavior.\n\nTo create a new component that can be targeted separately from the base\ncomponent, simply call `compose` and optionally provide new tokens.\n\n```{.javascript org-language=\"js\"}\nconst ToolbarButton = compose(Button, {\n  tokens: {\n    fontSize: t => t.font.small\n  }\n});\n```\n\n## Customizing with slots\n\nWhile tokens affect the look and feel of rendered elements, `slots`\nprovides a way to make more significant adjustments to a component\\'s\nstructure and behavior.\n\nA slot is a rendered DOM element or higher level control that can be\nreplaced at runtime.\n\nAs an example, a `Checkbox` might choose to render a `label` element to\nhold descriptive text. If a use-case called for a proprietary\n`<MyLabel />` control instead of a `label`, that slot could be targeted\nfor replacement.\n\n### Overriding slots with a theme\n\nTo override a slot from a theme, specify a reference to the component in\nthe theme.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n{\n  \"components\": {\n    \"Checkbox\": {\n      \"slots\": {\n        \"label\": MyLabel\n      }\n    }\n  }\n}\n```\n\n### Overriding slots with a new component\n\n`compose` can also specify slot assignments directly.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n\nconst MyCheckbox = compse(Checkbox, {\n  slots: {\n    label: MyLabel\n  }\n});\n```\n\n# Creating a component meant for use with `compose`\n\nComponents that work well with compose consist of 2 parts: an unstlyled\nbased component and a composed layer that glues look and feel to the\nbase component.\n\nThis section first describes how tokens and styles are calculated, then\nexplains what an unstyled base component must do in order to be a good\ncitizen in the compose world.\n\n## Understanding tokens\n\nTokens are the exclusive means of getting data from a theme into a\ncomponent. Tokens should be specified for every aspect of a control\\'s\nlook and feel.\n\nTokens should be named according to the following anatomy:\n\n    {slot (or none for root)}{property}{state (or none for default)}\n\nExamples:\n\n- `thumbSizeHovered`\n- `backgroundColor`\n- `labelBorderDisabled`\n\nTODO: Exhaustive description of token declarations\n\n## Understanding styles\n\nAfter evaluating tokens, the tokens are passed to a `style` function.\nThe `style` function should return an object which can be rendered by\n`JSS`.\n\nExample:\n\n```{.javascript org-language=\"js\"}\nconst styles = (tokens: MyComponentTokens) => {\n  return {\n    root: {\n      backgroundColor: tokens.backgroundColor,\n      '&:hover': {\n        backgroundColor: tokens.backgroundHoverColor\n      }\n    },\n    widget: {\n      borderColor: tokens.borderColor\n    }\n  };\n}\n```\n\n## Understanding slots\n\nComponents should define a set of logical elements that are reasonable\nto replace. Additionally, sensible defaults should be provided. Slots\nprovide an opportunity for callers to late-bind sections for\nreplacement.\n\nTODO: examples of more slots\n\n## Writing the base component\n\nAny functional component can be used with `compose`. However, there are\nseveral conventions that should be respected in order to make the user\nexperience predictable.\n\nA good base component deviates from a run-of-the-mill component in 3\nways:\n\n- It should have no built-in opinion of styling. When styled via\n  `compose`, class names will be passed in via `slotProps` to provide\n  styling.\n- It accepts a prop named `slots`, which define the component to use\n  for subcomponents.\n- It accepts a prop named `slotProps`, which will be handed off to\n  subcomponents.\n\n### States\n\nEach component should ennumerate the possible set of states as a set of\nboolean flags.\n\nFor instance, a checkbox might declare these flags:\n\n- `checked`\n- `readonly`\n- `disabled`\n- `labeled`\n\n**NB:** States should be **boolean** values only.\n\nThese states affect what classNames are selected to render on the root\nelement of a component.\n\nFor instance, in the case of a checkbox, the previous states would cause\nthose selectors to appear on the root making them available to all\ndownlevel slots.\n\n### Slots\n\nTODO: Describe how to interact with slots\n\n### Slot Props\n\nTODO: Describe how to interact with slotProps\n\n### Building in practice\n\nA simple base component that renders a button might look like the\nfollowing:\n\n```{.javascript org-language=\"js\"}\ninterface Props {\n  slots;\n  slotProps;\n  children;\n  onClick;\n}\nconst BaseButton: React.FunctionComponent<Props> = (props: Props) => {\n\n  // First, define the slots\n  // define `Root` as a const which renders the root.\n  // Default to a button element.\n  const { root: Root = 'button' } = props.slots || {};\n\n  // Break out slot props to be passed to various components.\n  // Mix in the props specified directly in props.\n  const { root: rootProps } = props.slotProps || {};\n\n  const resolvedRootProps = { ...rootProps, onClick: props.onClick };\n\n  // Finally, render the component\n  return <Root {...resolvedRootProps}>{props.children}</Root>\n}\n```\n\nAs components grow and become more complex, it is expected that hooks\nwill be developed to resolve state and intelligently merge `props` into\n`slotProps`.\n\n## Conformance\n\nTODO: Describe how to run conformance tests to make sure that base\ncomponents appropriately react to theme changes.\n","gitHead":"9c61c7f71c84db004cc90a524d27ee06ebfd00f3","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"layershifter","email":"a@fedyashov.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.14.1+x64 (win32)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.14.1","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.15.1","@uifabric/merge-styles":"^7.8.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.47.9_1597744256596_0.4976248258284961","host":"s3://npm-registry-packages"}},"0.47.10-experimental.0":{"name":"@fluentui/react-theming","version":"0.47.10-experimental.0","license":"MIT","_id":"@fluentui/react-theming@0.47.10-experimental.0","maintainers":[{"name":"layershifter","email":"a@fedyashov.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"933b86d97d7aeabf0ce1e5b3284f2edd0cc1f302","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.47.10-experimental.0.tgz","fileCount":90,"integrity":"sha512-fti21J8G/1xkshyZTGz+VNYzYXdG33e27uJY/D/ZgjxZnZdR++vNALD5/qT6OTDlUhzKqgGOd76VdvVXhPSAew==","signatures":[{"sig":"MEUCIQDXIIuCwpYHVvEo10Dl5j0uxfoiNpwXmk9u9FFgnVILlQIgVteXc30SIK6Pk3+QoO87pwImwsgsWadWtNN8vVnET+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZK3BCRA9TVsSAnZWagAAwFQP/RAMCnlrchlGhsuM2u7F\nFRjokJr2AmhfARxjkAuBlH/xuvYzUjKZwAJqpfdHmxoqCyHb1OC4WtW5ZKCg\nPoEXZZ36HFzkF6HJYBZ1kr9Py+fZZyPNaPPSaUdStO0tosOVEnrucjgRsJp2\nvauiTT5lbS3Tx9PjectwrNqT21OIAPAGwsfCPgiLW5PflLNlF8aVGSbdiNIP\nNfR/QS4pXDOkOhkdtNjyZiAT5TuHrbHoF0wBJKYhkdbynQTPmE86RIi2GS+U\nLqs6LTSQNGmoyNgRWKvvDrfv23l6tf18b38s6Unpw9m6PJZuWBCnhdJ4Shwy\nlpyjtaYQu5llTZGoRADvUfjFbk2QOuZ+6aURGMDWsEeLef+O544SuE6e77oK\nL/PuN4nPlMiL/sB+RNZnC9/x3YJ4cxQOawjVGglo4wiSK1hpWlKZ1z2fwAFs\nNijhSklxPEg3ZXecNDtPQZFDoIBHrFUpFtkkxWjAp2ssPF+SAiBN+UV+L0sB\njKpKYCyphEVmPNDgqvO8hLGB96+LhH3DzryhzctR3ocmRDTEDphZFPuCebbl\nIcKJ0PZVUa1PuhLBHjj9iSLCc2v7C7CIDLd1iVADBPJsWfP/EiclIYdAjnw4\nC9qe8nI/qYfR5TyVY+TxerPqmz7XSmoWyVmI1yAZESa0DBi07wcqVOVwM31q\n1aQp\r\n=CzLf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","readme":"# Summary\n\n`react-compose` provides a set of tools for creating themable components. The `compose` tool takes a functional component and, given default options and contextual overrides provided through React context, computes injected props including `classes`, `slots`, and `slotProps`. Styles are computed only when encountering unique theme objects per component, resulting in optimized performance.\n\nExample:\n\n```\nimport { SliderBase } from './Slider.base';\nimport { compose } from '@fluentui/react-theming';\n\nexport const Slider = compose(SliderBase, {\n  // the themable name of the component\n  name: 'Slider'\n\n  // the set of replacement tokens to be injected into the styles\n  tokens,\n\n  // The css styling to be injected as a `classes` prop\n  styles\n\n  // A dictionary of React components representing the actual subcomponents to be used by the Slider\n  slots\n});\n\n// Composed components can be recomposed to offer slightly different permutations.\nexport const RedSlider = compose(Slider, {\n  tokens: { railColor: 'red' }\n});\n```\n\nTheming can be achieved through applications using a `ThemeProvider` component, also provided in the library:\n\n```tsx\n// Create a theme with a token override for the Slider.\nconst theme = createTheme({\n  components: {\n    Slider: {\n      tokens: {\n        railColor: 'green',\n      },\n    },\n  },\n});\n\n// Render the slider using the theme.\nconst App = () => (\n  <ThemeProvider theme={theme}>\n    <Slider />\n  </ThemeProvider>\n);\n```\n\n## Principles\n\n`compose` follows 3 principles:\n\n- Prefer faster components over more flexible components (if a decision between the 2 must be made.)\n\n- Decouple theming/styling from implementation in order to ensure the styling approach can be replaced without rewriting the component.\n\n- Keep it simple; avoid adding too many concepts for developers to learn.\n\n## Who is `compose` for?\n\nComponents created with `compose` are meant for use by anyone.\n\n`compose` itself is primarily intended for use by component authors; it provides a consistent means of attaching to a \"themed context\".\n\n`compose` can also be used by application developers to enable a greater level of customization when the \"theme\" does not provide enough flexibility.\n\n## When should I use `compose`?\n\n- When creating a component that should be themeable.\n- When overriding major details of an existing component. (Explained\n  later in \\\"Overriding (tokens\\|slots) with a new component\\\".)\n\n## What\\'s in a theme?\n\nA Fluent UI theme contains several major sections. At at high level, it\ncontains detail about colors, types, effects, spacing, and animation.\nFurthermore, a theme has the ability to override major details about\neach and every component\\'s look and feel as well as behavior.\n\n> TODO: document theme\n\n# Using components created with `compose`\n\nThere is no requirement around using components build with `compose`. If you use them without a theme, they will render with whichever default token/styling values, if any, are provided.\n\nIt is recommended the default styling provide very limited styling, leaving tokens as the preferred method for customizing the component.\n\n## Styling components with a theme\n\nDefault styling and tokens can always be overridden using theme.\n\n> TODO: how would one replace styling completely, instead of overriding it?\n\n## Customizing with tokens\n\nFrequently, individual products design needs conflict with that of the\nbase style. To accomodate necessary changes, `Tokens` exist to allow easy\nmodification of most all aspects of look and feel.\n\nA token is a key that corresponds to a value, usually from from the\napplied theme. Examples of tokens might be `fontSize`, `fontFamily`,\n`borderRadius`, `animationDuration`, and `labelHoveredbBackground`.\n\n### Setting tokens with a theme\n\nTo understand the set of tokens that a specific component understands,\nrefer to the documentation of that component. For this example, we will\nassume that a `Button` component exists that supports the following\ntokens:\n\n- `backgroundColor`\n- `fontSize`\n- `backgroundHoverColor`\n\nTo override any (or all) of the Button\\'s tokens, an object should be\nprovided within the theme under:\n\n```{.json}\n{\n  \"components\": {\n    \"Button\": {\n      \"tokens\": {\n        \"values\": \"here...\"\n      }\n    }\n  }\n}\n```\n\nTokens are represented by the following:\n\n1.  Function\n\n    A functional token is the preferred method of adjusting look and\n    feel. Functional tokens reference values in the applied theme.\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": t => t.fonts.base,\n            \"backgroundColor\": t => t.colors.brand[2]\n          }\n        }\n      }\n    }\n    ```\n\n2.  Literal value\n\n    A literal value allows a token to be hard-coded. It is considered\n    the least desirable (as it will never be affected by other changes\n    in the theme).\n\n    A literal token in practice looks like:\n\n    ```{.json}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": 12\n          }\n        }\n      }\n    }\n    ```\n\n3.  Dependent value\n\n    There are several cases where the value of a token is based on a\n    calculation of another value. For instance, the background hover\n    color of a button might be desired to be a shade lighter than the\n    default background color of the button. (In order to specify this,\n    assume we have a `lighten()` function available.)\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"backgroundHoverColor\": {\n              dependsOn: ['backgroundColor'],\n              value: ([backgroundColor: Color]) => lighten(backgroundColor)\n            }\n          }\n        }\n      }\n    }\n    ```\n\n### Customizing tokens by creating variants\n\nIf adjusting all instances of a component with a token override is not\ndesirable, then it is possible to create a component variant using\n`compose`.\n\nFor instance, it might be the case that most `Button` instances should\nlook a certain way, but `Button` instances in a toolbar should not\ninherit the same tokens.\n\nThe solution is to create a component that can apply different tokens,\nbut retains the same underlying behavior.\n\nTo create a new component that can be targeted separately from the base\ncomponent, simply call `compose` and optionally provide new tokens.\n\n```{.javascript org-language=\"js\"}\nconst ToolbarButton = compose(Button, {\n  tokens: {\n    fontSize: t => t.font.small\n  }\n});\n```\n\n## Customizing with slots\n\nWhile tokens affect the look and feel of rendered elements, `slots`\nprovides a way to make more significant adjustments to a component\\'s\nstructure and behavior.\n\nA slot is a rendered DOM element or higher level control that can be\nreplaced at runtime.\n\nAs an example, a `Checkbox` might choose to render a `label` element to\nhold descriptive text. If a use-case called for a proprietary\n`<MyLabel />` control instead of a `label`, that slot could be targeted\nfor replacement.\n\n### Overriding slots with a theme\n\nTo override a slot from a theme, specify a reference to the component in\nthe theme.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n{\n  \"components\": {\n    \"Checkbox\": {\n      \"slots\": {\n        \"label\": MyLabel\n      }\n    }\n  }\n}\n```\n\n### Overriding slots with a new component\n\n`compose` can also specify slot assignments directly.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n\nconst MyCheckbox = compse(Checkbox, {\n  slots: {\n    label: MyLabel\n  }\n});\n```\n\n# Creating a component meant for use with `compose`\n\nComponents that work well with compose consist of 2 parts: an unstlyled\nbased component and a composed layer that glues look and feel to the\nbase component.\n\nThis section first describes how tokens and styles are calculated, then\nexplains what an unstyled base component must do in order to be a good\ncitizen in the compose world.\n\n## Understanding tokens\n\nTokens are the exclusive means of getting data from a theme into a\ncomponent. Tokens should be specified for every aspect of a control\\'s\nlook and feel.\n\nTokens should be named according to the following anatomy:\n\n    {slot (or none for root)}{property}{state (or none for default)}\n\nExamples:\n\n- `thumbSizeHovered`\n- `backgroundColor`\n- `labelBorderDisabled`\n\nTODO: Exhaustive description of token declarations\n\n## Understanding styles\n\nAfter evaluating tokens, the tokens are passed to a `style` function.\nThe `style` function should return an object which can be rendered by\n`JSS`.\n\nExample:\n\n```{.javascript org-language=\"js\"}\nconst styles = (tokens: MyComponentTokens) => {\n  return {\n    root: {\n      backgroundColor: tokens.backgroundColor,\n      '&:hover': {\n        backgroundColor: tokens.backgroundHoverColor\n      }\n    },\n    widget: {\n      borderColor: tokens.borderColor\n    }\n  };\n}\n```\n\n## Understanding slots\n\nComponents should define a set of logical elements that are reasonable\nto replace. Additionally, sensible defaults should be provided. Slots\nprovide an opportunity for callers to late-bind sections for\nreplacement.\n\nTODO: examples of more slots\n\n## Writing the base component\n\nAny functional component can be used with `compose`. However, there are\nseveral conventions that should be respected in order to make the user\nexperience predictable.\n\nA good base component deviates from a run-of-the-mill component in 3\nways:\n\n- It should have no built-in opinion of styling. When styled via\n  `compose`, class names will be passed in via `slotProps` to provide\n  styling.\n- It accepts a prop named `slots`, which define the component to use\n  for subcomponents.\n- It accepts a prop named `slotProps`, which will be handed off to\n  subcomponents.\n\n### States\n\nEach component should ennumerate the possible set of states as a set of\nboolean flags.\n\nFor instance, a checkbox might declare these flags:\n\n- `checked`\n- `readonly`\n- `disabled`\n- `labeled`\n\n**NB:** States should be **boolean** values only.\n\nThese states affect what classNames are selected to render on the root\nelement of a component.\n\nFor instance, in the case of a checkbox, the previous states would cause\nthose selectors to appear on the root making them available to all\ndownlevel slots.\n\n### Slots\n\nTODO: Describe how to interact with slots\n\n### Slot Props\n\nTODO: Describe how to interact with slotProps\n\n### Building in practice\n\nA simple base component that renders a button might look like the\nfollowing:\n\n```{.javascript org-language=\"js\"}\ninterface Props {\n  slots;\n  slotProps;\n  children;\n  onClick;\n}\nconst BaseButton: React.FunctionComponent<Props> = (props: Props) => {\n\n  // First, define the slots\n  // define `Root` as a const which renders the root.\n  // Default to a button element.\n  const { root: Root = 'button' } = props.slots || {};\n\n  // Break out slot props to be passed to various components.\n  // Mix in the props specified directly in props.\n  const { root: rootProps } = props.slotProps || {};\n\n  const resolvedRootProps = { ...rootProps, onClick: props.onClick };\n\n  // Finally, render the component\n  return <Root {...resolvedRootProps}>{props.children}</Root>\n}\n```\n\nAs components grow and become more complex, it is expected that hooks\nwill be developed to resolve state and intelligently merge `props` into\n`slotProps`.\n\n## Conformance\n\nTODO: Describe how to run conformance tests to make sure that base\ncomponents appropriately react to theme changes.\n","gitHead":"44cf34f59f25f7d0bf2c7cfb237c879368a2ce2b","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.15.1","@uifabric/merge-styles":"^7.8.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.47.10-experimental.0_1600433600806_0.6149620955444575","host":"s3://npm-registry-packages"}},"0.47.10":{"name":"@fluentui/react-theming","version":"0.47.10","license":"MIT","_id":"@fluentui/react-theming@0.47.10","maintainers":[{"name":"layershifter","email":"a@fedyashov.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"4b98f30df9dce6b27eee0c8ef84fd28e5c8bc57a","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.47.10.tgz","fileCount":6,"integrity":"sha512-ytKGZtTOEFSABUAzJFKALP/ko1fHfMCdSXvl1ltd8xHSKtIO86pv8Ih+6rhgb63O15iKSF6uvHSIjr23gMY/BQ==","signatures":[{"sig":"MEUCIQCahi9o1EsRW3chwBQz7ZN8JXKo1VCeGxYnDkFtcGdPUgIgR4mPVGLArFYZ97EFSfYzDt0YnUvputJy/TqJnlDCsS4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbK9YCRA9TVsSAnZWagAA53EP/2pp7qaGsg5hFKeKe4Km\nqSgdUB29dmHJuSVCgFUCjkphsjZtKBhh113sw5eZqqdSYsVdCCRyiY0a/VnN\nAW8dOsMgaIywjjtax3FCE/u6iDxIRX+5SA9cbhbBzA8xUD2OY8vuKf5InXxq\nWE2NS1AQ7KN6cZe8kk9ZRY976TgU4+BNqezUMqNL5/9OE3DcoVKxZDz+zeds\nmTu/Ixn0U78xiYTYWelsXDwuzTcHW5ECHH6mQnvDAoJUSoWPQgGwPWq8rcQb\n5NvmjOQRuu3Ez1b/NAela3v9sjT5lxgCY/gVz41Dak0F0MXOYL4mQBVO9N1+\n5Gq5w4bJ2pemOVIMH6IrFbnUy+DHRjZcXyLDVQmiiWjH9f/5Y9nyyjhlnkOy\nIL+OoNNyoo4vW5tn/T7mNbme/27lrR+ILdOI+cwPg7t2mPIkaLxIuxVJmv8b\n+Sztxby1a3c6QmvJD8ubp+Y2L0yLuG8SQC/nO+eQ9IwerVVd1ZEbk22j2IYx\nkDupD8UDwbDjayxMOfqZNP0t7iI31y24WUKMjQfLO087vtELTl0EoWa74DSb\n+lyGJBObf2UBk5xnaDq26Xzo2XI0n7lQ1AaAhVg8SWlEuJkwh+v+kYK4Nv37\nTNAllqi4npps8pnMgL1aUm+T3+3x6zJXvXizCuElI5gcuxEswcFDqIi9shw0\n/UuR\r\n=DnBc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","readme":"# Summary\n\n`react-compose` provides a set of tools for creating themable components. The `compose` tool takes a functional component and, given default options and contextual overrides provided through React context, computes injected props including `classes`, `slots`, and `slotProps`. Styles are computed only when encountering unique theme objects per component, resulting in optimized performance.\n\nExample:\n\n```\nimport { SliderBase } from './Slider.base';\nimport { compose } from '@fluentui/react-theming';\n\nexport const Slider = compose(SliderBase, {\n  // the themable name of the component\n  name: 'Slider'\n\n  // the set of replacement tokens to be injected into the styles\n  tokens,\n\n  // The css styling to be injected as a `classes` prop\n  styles\n\n  // A dictionary of React components representing the actual subcomponents to be used by the Slider\n  slots\n});\n\n// Composed components can be recomposed to offer slightly different permutations.\nexport const RedSlider = compose(Slider, {\n  tokens: { railColor: 'red' }\n});\n```\n\nTheming can be achieved through applications using a `ThemeProvider` component, also provided in the library:\n\n```tsx\n// Create a theme with a token override for the Slider.\nconst theme = createTheme({\n  components: {\n    Slider: {\n      tokens: {\n        railColor: 'green',\n      },\n    },\n  },\n});\n\n// Render the slider using the theme.\nconst App = () => (\n  <ThemeProvider theme={theme}>\n    <Slider />\n  </ThemeProvider>\n);\n```\n\n## Principles\n\n`compose` follows 3 principles:\n\n- Prefer faster components over more flexible components (if a decision between the 2 must be made.)\n\n- Decouple theming/styling from implementation in order to ensure the styling approach can be replaced without rewriting the component.\n\n- Keep it simple; avoid adding too many concepts for developers to learn.\n\n## Who is `compose` for?\n\nComponents created with `compose` are meant for use by anyone.\n\n`compose` itself is primarily intended for use by component authors; it provides a consistent means of attaching to a \"themed context\".\n\n`compose` can also be used by application developers to enable a greater level of customization when the \"theme\" does not provide enough flexibility.\n\n## When should I use `compose`?\n\n- When creating a component that should be themeable.\n- When overriding major details of an existing component. (Explained\n  later in \\\"Overriding (tokens\\|slots) with a new component\\\".)\n\n## What\\'s in a theme?\n\nA Fluent UI theme contains several major sections. At at high level, it\ncontains detail about colors, types, effects, spacing, and animation.\nFurthermore, a theme has the ability to override major details about\neach and every component\\'s look and feel as well as behavior.\n\n> TODO: document theme\n\n# Using components created with `compose`\n\nThere is no requirement around using components build with `compose`. If you use them without a theme, they will render with whichever default token/styling values, if any, are provided.\n\nIt is recommended the default styling provide very limited styling, leaving tokens as the preferred method for customizing the component.\n\n## Styling components with a theme\n\nDefault styling and tokens can always be overridden using theme.\n\n> TODO: how would one replace styling completely, instead of overriding it?\n\n## Customizing with tokens\n\nFrequently, individual products design needs conflict with that of the\nbase style. To accomodate necessary changes, `Tokens` exist to allow easy\nmodification of most all aspects of look and feel.\n\nA token is a key that corresponds to a value, usually from from the\napplied theme. Examples of tokens might be `fontSize`, `fontFamily`,\n`borderRadius`, `animationDuration`, and `labelHoveredbBackground`.\n\n### Setting tokens with a theme\n\nTo understand the set of tokens that a specific component understands,\nrefer to the documentation of that component. For this example, we will\nassume that a `Button` component exists that supports the following\ntokens:\n\n- `backgroundColor`\n- `fontSize`\n- `backgroundHoverColor`\n\nTo override any (or all) of the Button\\'s tokens, an object should be\nprovided within the theme under:\n\n```{.json}\n{\n  \"components\": {\n    \"Button\": {\n      \"tokens\": {\n        \"values\": \"here...\"\n      }\n    }\n  }\n}\n```\n\nTokens are represented by the following:\n\n1.  Function\n\n    A functional token is the preferred method of adjusting look and\n    feel. Functional tokens reference values in the applied theme.\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": t => t.fonts.base,\n            \"backgroundColor\": t => t.colors.brand[2]\n          }\n        }\n      }\n    }\n    ```\n\n2.  Literal value\n\n    A literal value allows a token to be hard-coded. It is considered\n    the least desirable (as it will never be affected by other changes\n    in the theme).\n\n    A literal token in practice looks like:\n\n    ```{.json}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": 12\n          }\n        }\n      }\n    }\n    ```\n\n3.  Dependent value\n\n    There are several cases where the value of a token is based on a\n    calculation of another value. For instance, the background hover\n    color of a button might be desired to be a shade lighter than the\n    default background color of the button. (In order to specify this,\n    assume we have a `lighten()` function available.)\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"backgroundHoverColor\": {\n              dependsOn: ['backgroundColor'],\n              value: ([backgroundColor: Color]) => lighten(backgroundColor)\n            }\n          }\n        }\n      }\n    }\n    ```\n\n### Customizing tokens by creating variants\n\nIf adjusting all instances of a component with a token override is not\ndesirable, then it is possible to create a component variant using\n`compose`.\n\nFor instance, it might be the case that most `Button` instances should\nlook a certain way, but `Button` instances in a toolbar should not\ninherit the same tokens.\n\nThe solution is to create a component that can apply different tokens,\nbut retains the same underlying behavior.\n\nTo create a new component that can be targeted separately from the base\ncomponent, simply call `compose` and optionally provide new tokens.\n\n```{.javascript org-language=\"js\"}\nconst ToolbarButton = compose(Button, {\n  tokens: {\n    fontSize: t => t.font.small\n  }\n});\n```\n\n## Customizing with slots\n\nWhile tokens affect the look and feel of rendered elements, `slots`\nprovides a way to make more significant adjustments to a component\\'s\nstructure and behavior.\n\nA slot is a rendered DOM element or higher level control that can be\nreplaced at runtime.\n\nAs an example, a `Checkbox` might choose to render a `label` element to\nhold descriptive text. If a use-case called for a proprietary\n`<MyLabel />` control instead of a `label`, that slot could be targeted\nfor replacement.\n\n### Overriding slots with a theme\n\nTo override a slot from a theme, specify a reference to the component in\nthe theme.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n{\n  \"components\": {\n    \"Checkbox\": {\n      \"slots\": {\n        \"label\": MyLabel\n      }\n    }\n  }\n}\n```\n\n### Overriding slots with a new component\n\n`compose` can also specify slot assignments directly.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n\nconst MyCheckbox = compse(Checkbox, {\n  slots: {\n    label: MyLabel\n  }\n});\n```\n\n# Creating a component meant for use with `compose`\n\nComponents that work well with compose consist of 2 parts: an unstlyled\nbased component and a composed layer that glues look and feel to the\nbase component.\n\nThis section first describes how tokens and styles are calculated, then\nexplains what an unstyled base component must do in order to be a good\ncitizen in the compose world.\n\n## Understanding tokens\n\nTokens are the exclusive means of getting data from a theme into a\ncomponent. Tokens should be specified for every aspect of a control\\'s\nlook and feel.\n\nTokens should be named according to the following anatomy:\n\n    {slot (or none for root)}{property}{state (or none for default)}\n\nExamples:\n\n- `thumbSizeHovered`\n- `backgroundColor`\n- `labelBorderDisabled`\n\nTODO: Exhaustive description of token declarations\n\n## Understanding styles\n\nAfter evaluating tokens, the tokens are passed to a `style` function.\nThe `style` function should return an object which can be rendered by\n`JSS`.\n\nExample:\n\n```{.javascript org-language=\"js\"}\nconst styles = (tokens: MyComponentTokens) => {\n  return {\n    root: {\n      backgroundColor: tokens.backgroundColor,\n      '&:hover': {\n        backgroundColor: tokens.backgroundHoverColor\n      }\n    },\n    widget: {\n      borderColor: tokens.borderColor\n    }\n  };\n}\n```\n\n## Understanding slots\n\nComponents should define a set of logical elements that are reasonable\nto replace. Additionally, sensible defaults should be provided. Slots\nprovide an opportunity for callers to late-bind sections for\nreplacement.\n\nTODO: examples of more slots\n\n## Writing the base component\n\nAny functional component can be used with `compose`. However, there are\nseveral conventions that should be respected in order to make the user\nexperience predictable.\n\nA good base component deviates from a run-of-the-mill component in 3\nways:\n\n- It should have no built-in opinion of styling. When styled via\n  `compose`, class names will be passed in via `slotProps` to provide\n  styling.\n- It accepts a prop named `slots`, which define the component to use\n  for subcomponents.\n- It accepts a prop named `slotProps`, which will be handed off to\n  subcomponents.\n\n### States\n\nEach component should ennumerate the possible set of states as a set of\nboolean flags.\n\nFor instance, a checkbox might declare these flags:\n\n- `checked`\n- `readonly`\n- `disabled`\n- `labeled`\n\n**NB:** States should be **boolean** values only.\n\nThese states affect what classNames are selected to render on the root\nelement of a component.\n\nFor instance, in the case of a checkbox, the previous states would cause\nthose selectors to appear on the root making them available to all\ndownlevel slots.\n\n### Slots\n\nTODO: Describe how to interact with slots\n\n### Slot Props\n\nTODO: Describe how to interact with slotProps\n\n### Building in practice\n\nA simple base component that renders a button might look like the\nfollowing:\n\n```{.javascript org-language=\"js\"}\ninterface Props {\n  slots;\n  slotProps;\n  children;\n  onClick;\n}\nconst BaseButton: React.FunctionComponent<Props> = (props: Props) => {\n\n  // First, define the slots\n  // define `Root` as a const which renders the root.\n  // Default to a button element.\n  const { root: Root = 'button' } = props.slots || {};\n\n  // Break out slot props to be passed to various components.\n  // Mix in the props specified directly in props.\n  const { root: rootProps } = props.slotProps || {};\n\n  const resolvedRootProps = { ...rootProps, onClick: props.onClick };\n\n  // Finally, render the component\n  return <Root {...resolvedRootProps}>{props.children}</Root>\n}\n```\n\nAs components grow and become more complex, it is expected that hooks\nwill be developed to resolve state and intelligently merge `props` into\n`slotProps`.\n\n## Conformance\n\nTODO: Describe how to run conformance tests to make sure that base\ncomponents appropriately react to theme changes.\n","gitHead":"cdbf24183a8ea3ac892a29a7538dbf4f069161d8","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"layershifter","email":"a@fedyashov.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.14.1+x64 (win32)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.14.1","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.15.1","@uifabric/merge-styles":"^7.8.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.47.10_1600958296099_0.13565333546185654","host":"s3://npm-registry-packages"}},"0.47.11":{"name":"@fluentui/react-theming","version":"0.47.11","license":"MIT","_id":"@fluentui/react-theming@0.47.11","maintainers":[{"name":"layershifter","email":"a@fedyashov.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"e6e2a14be64e5d129a5bbde290509f7121d43ecb","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.47.11.tgz","fileCount":90,"integrity":"sha512-5HgOiEWjGy5+tQiq5dTlcRhXFva2XxO8HApLfvdLvL9PpisXEtRp73BfxepOQFI+8KVarujqlofcSUo2+lyctA==","signatures":[{"sig":"MEUCIQDysJ1HTkuRNkR1i5qyRryYbow7WKMipNOMAlKgCPKglwIgZCul6kQwgx6d+CDxBlVZMFQM5OPR/8W8//qF2JB22Kk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiGxnCRA9TVsSAnZWagAAkrAP/i8mmS+J3LA1DhcAL5gb\nQSrEs4R/M0B+RJNQDEXGenWEUSUsOvBU5DAyvJmvpHrb/yCTTT52JRU/d5xU\nqy7OqPX2UoLm4MdF0wt/2tREtQPwl4wB0oS+SPTd/8W1lqY2Plj3T/2dZI4X\ny0yq73syzrnUz0qBsaxVCFssryEo0XuvZN6wdAFiU2biH/bnAMGimcFOX0Ud\nGNEJzQ38rgu9YmEoioL5csm3cGlNOG0tcuju43ap1pLuc5CUmGSFOvOkZFAX\nchPaVDOOZTpGFqSbrZeNBEm5u6Tp5Z8PkdhxRXG1zO4XItyQMaCcdo6/gAHc\nEgBslSsT4S0aNcc7wcCmsj7pajFqjaliizBvpCS7bpyHryyy5pWvK1eOnyzg\nQ5eaoD4wQfFv7NAPjKfP/le2pIU/lgm9+AIN2WKrfshpkdsi3v6X8zY1F4VK\ndQ6zyhMnlSJiaNjk/VVPvvhF68BVn/dailoUAGfyGpCLNXKv++OlpcGCnckI\nMuh88HwGxOCZXXd1aP8jBOFTIpfpL1EM7NA77QZcMRrB2lB5pmOJqRQNhr4E\ngAcaL7datV1KRYrffDFqOJYemA2nX3OJGM11tTAN6pBR9JmRKkXOTxu98S69\nLyK1LP16oC3gJJBrmSgkNGNNBknK/lrRMELM8AZVaGNzT10FPKeZXAMZVBW0\nGU4f\r\n=2WhO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","readme":"# Summary\n\n`react-compose` provides a set of tools for creating themable components. The `compose` tool takes a functional component and, given default options and contextual overrides provided through React context, computes injected props including `classes`, `slots`, and `slotProps`. Styles are computed only when encountering unique theme objects per component, resulting in optimized performance.\n\nExample:\n\n```\nimport { SliderBase } from './Slider.base';\nimport { compose } from '@fluentui/react-theming';\n\nexport const Slider = compose(SliderBase, {\n  // the themable name of the component\n  name: 'Slider'\n\n  // the set of replacement tokens to be injected into the styles\n  tokens,\n\n  // The css styling to be injected as a `classes` prop\n  styles\n\n  // A dictionary of React components representing the actual subcomponents to be used by the Slider\n  slots\n});\n\n// Composed components can be recomposed to offer slightly different permutations.\nexport const RedSlider = compose(Slider, {\n  tokens: { railColor: 'red' }\n});\n```\n\nTheming can be achieved through applications using a `ThemeProvider` component, also provided in the library:\n\n```tsx\n// Create a theme with a token override for the Slider.\nconst theme = createTheme({\n  components: {\n    Slider: {\n      tokens: {\n        railColor: 'green',\n      },\n    },\n  },\n});\n\n// Render the slider using the theme.\nconst App = () => (\n  <ThemeProvider theme={theme}>\n    <Slider />\n  </ThemeProvider>\n);\n```\n\n## Principles\n\n`compose` follows 3 principles:\n\n- Prefer faster components over more flexible components (if a decision between the 2 must be made.)\n\n- Decouple theming/styling from implementation in order to ensure the styling approach can be replaced without rewriting the component.\n\n- Keep it simple; avoid adding too many concepts for developers to learn.\n\n## Who is `compose` for?\n\nComponents created with `compose` are meant for use by anyone.\n\n`compose` itself is primarily intended for use by component authors; it provides a consistent means of attaching to a \"themed context\".\n\n`compose` can also be used by application developers to enable a greater level of customization when the \"theme\" does not provide enough flexibility.\n\n## When should I use `compose`?\n\n- When creating a component that should be themeable.\n- When overriding major details of an existing component. (Explained\n  later in \\\"Overriding (tokens\\|slots) with a new component\\\".)\n\n## What\\'s in a theme?\n\nA Fluent UI theme contains several major sections. At at high level, it\ncontains detail about colors, types, effects, spacing, and animation.\nFurthermore, a theme has the ability to override major details about\neach and every component\\'s look and feel as well as behavior.\n\n> TODO: document theme\n\n# Using components created with `compose`\n\nThere is no requirement around using components build with `compose`. If you use them without a theme, they will render with whichever default token/styling values, if any, are provided.\n\nIt is recommended the default styling provide very limited styling, leaving tokens as the preferred method for customizing the component.\n\n## Styling components with a theme\n\nDefault styling and tokens can always be overridden using theme.\n\n> TODO: how would one replace styling completely, instead of overriding it?\n\n## Customizing with tokens\n\nFrequently, individual products design needs conflict with that of the\nbase style. To accomodate necessary changes, `Tokens` exist to allow easy\nmodification of most all aspects of look and feel.\n\nA token is a key that corresponds to a value, usually from from the\napplied theme. Examples of tokens might be `fontSize`, `fontFamily`,\n`borderRadius`, `animationDuration`, and `labelHoveredbBackground`.\n\n### Setting tokens with a theme\n\nTo understand the set of tokens that a specific component understands,\nrefer to the documentation of that component. For this example, we will\nassume that a `Button` component exists that supports the following\ntokens:\n\n- `backgroundColor`\n- `fontSize`\n- `backgroundHoverColor`\n\nTo override any (or all) of the Button\\'s tokens, an object should be\nprovided within the theme under:\n\n```{.json}\n{\n  \"components\": {\n    \"Button\": {\n      \"tokens\": {\n        \"values\": \"here...\"\n      }\n    }\n  }\n}\n```\n\nTokens are represented by the following:\n\n1.  Function\n\n    A functional token is the preferred method of adjusting look and\n    feel. Functional tokens reference values in the applied theme.\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": t => t.fonts.base,\n            \"backgroundColor\": t => t.colors.brand[2]\n          }\n        }\n      }\n    }\n    ```\n\n2.  Literal value\n\n    A literal value allows a token to be hard-coded. It is considered\n    the least desirable (as it will never be affected by other changes\n    in the theme).\n\n    A literal token in practice looks like:\n\n    ```{.json}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": 12\n          }\n        }\n      }\n    }\n    ```\n\n3.  Dependent value\n\n    There are several cases where the value of a token is based on a\n    calculation of another value. For instance, the background hover\n    color of a button might be desired to be a shade lighter than the\n    default background color of the button. (In order to specify this,\n    assume we have a `lighten()` function available.)\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"backgroundHoverColor\": {\n              dependsOn: ['backgroundColor'],\n              value: ([backgroundColor: Color]) => lighten(backgroundColor)\n            }\n          }\n        }\n      }\n    }\n    ```\n\n### Customizing tokens by creating variants\n\nIf adjusting all instances of a component with a token override is not\ndesirable, then it is possible to create a component variant using\n`compose`.\n\nFor instance, it might be the case that most `Button` instances should\nlook a certain way, but `Button` instances in a toolbar should not\ninherit the same tokens.\n\nThe solution is to create a component that can apply different tokens,\nbut retains the same underlying behavior.\n\nTo create a new component that can be targeted separately from the base\ncomponent, simply call `compose` and optionally provide new tokens.\n\n```{.javascript org-language=\"js\"}\nconst ToolbarButton = compose(Button, {\n  tokens: {\n    fontSize: t => t.font.small\n  }\n});\n```\n\n## Customizing with slots\n\nWhile tokens affect the look and feel of rendered elements, `slots`\nprovides a way to make more significant adjustments to a component\\'s\nstructure and behavior.\n\nA slot is a rendered DOM element or higher level control that can be\nreplaced at runtime.\n\nAs an example, a `Checkbox` might choose to render a `label` element to\nhold descriptive text. If a use-case called for a proprietary\n`<MyLabel />` control instead of a `label`, that slot could be targeted\nfor replacement.\n\n### Overriding slots with a theme\n\nTo override a slot from a theme, specify a reference to the component in\nthe theme.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n{\n  \"components\": {\n    \"Checkbox\": {\n      \"slots\": {\n        \"label\": MyLabel\n      }\n    }\n  }\n}\n```\n\n### Overriding slots with a new component\n\n`compose` can also specify slot assignments directly.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n\nconst MyCheckbox = compse(Checkbox, {\n  slots: {\n    label: MyLabel\n  }\n});\n```\n\n# Creating a component meant for use with `compose`\n\nComponents that work well with compose consist of 2 parts: an unstlyled\nbased component and a composed layer that glues look and feel to the\nbase component.\n\nThis section first describes how tokens and styles are calculated, then\nexplains what an unstyled base component must do in order to be a good\ncitizen in the compose world.\n\n## Understanding tokens\n\nTokens are the exclusive means of getting data from a theme into a\ncomponent. Tokens should be specified for every aspect of a control\\'s\nlook and feel.\n\nTokens should be named according to the following anatomy:\n\n    {slot (or none for root)}{property}{state (or none for default)}\n\nExamples:\n\n- `thumbSizeHovered`\n- `backgroundColor`\n- `labelBorderDisabled`\n\nTODO: Exhaustive description of token declarations\n\n## Understanding styles\n\nAfter evaluating tokens, the tokens are passed to a `style` function.\nThe `style` function should return an object which can be rendered by\n`JSS`.\n\nExample:\n\n```{.javascript org-language=\"js\"}\nconst styles = (tokens: MyComponentTokens) => {\n  return {\n    root: {\n      backgroundColor: tokens.backgroundColor,\n      '&:hover': {\n        backgroundColor: tokens.backgroundHoverColor\n      }\n    },\n    widget: {\n      borderColor: tokens.borderColor\n    }\n  };\n}\n```\n\n## Understanding slots\n\nComponents should define a set of logical elements that are reasonable\nto replace. Additionally, sensible defaults should be provided. Slots\nprovide an opportunity for callers to late-bind sections for\nreplacement.\n\nTODO: examples of more slots\n\n## Writing the base component\n\nAny functional component can be used with `compose`. However, there are\nseveral conventions that should be respected in order to make the user\nexperience predictable.\n\nA good base component deviates from a run-of-the-mill component in 3\nways:\n\n- It should have no built-in opinion of styling. When styled via\n  `compose`, class names will be passed in via `slotProps` to provide\n  styling.\n- It accepts a prop named `slots`, which define the component to use\n  for subcomponents.\n- It accepts a prop named `slotProps`, which will be handed off to\n  subcomponents.\n\n### States\n\nEach component should ennumerate the possible set of states as a set of\nboolean flags.\n\nFor instance, a checkbox might declare these flags:\n\n- `checked`\n- `readonly`\n- `disabled`\n- `labeled`\n\n**NB:** States should be **boolean** values only.\n\nThese states affect what classNames are selected to render on the root\nelement of a component.\n\nFor instance, in the case of a checkbox, the previous states would cause\nthose selectors to appear on the root making them available to all\ndownlevel slots.\n\n### Slots\n\nTODO: Describe how to interact with slots\n\n### Slot Props\n\nTODO: Describe how to interact with slotProps\n\n### Building in practice\n\nA simple base component that renders a button might look like the\nfollowing:\n\n```{.javascript org-language=\"js\"}\ninterface Props {\n  slots;\n  slotProps;\n  children;\n  onClick;\n}\nconst BaseButton: React.FunctionComponent<Props> = (props: Props) => {\n\n  // First, define the slots\n  // define `Root` as a const which renders the root.\n  // Default to a button element.\n  const { root: Root = 'button' } = props.slots || {};\n\n  // Break out slot props to be passed to various components.\n  // Mix in the props specified directly in props.\n  const { root: rootProps } = props.slotProps || {};\n\n  const resolvedRootProps = { ...rootProps, onClick: props.onClick };\n\n  // Finally, render the component\n  return <Root {...resolvedRootProps}>{props.children}</Root>\n}\n```\n\nAs components grow and become more complex, it is expected that hooks\nwill be developed to resolve state and intelligently merge `props` into\n`slotProps`.\n\n## Conformance\n\nTODO: Describe how to run conformance tests to make sure that base\ncomponents appropriately react to theme changes.\n","gitHead":"d21534c83c456244825657639c73d9f98af4c7e9","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.15.1","@uifabric/merge-styles":"^7.8.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.47.11_1602776167469_0.9652654670761114","host":"s3://npm-registry-packages"}},"0.47.12":{"name":"@fluentui/react-theming","version":"0.47.12","license":"MIT","_id":"@fluentui/react-theming@0.47.12","maintainers":[{"name":"layershifter","email":"a@fedyashov.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"cf93ce0cbaa4f8335d78106ae3c94a2e241229d5","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.47.12.tgz","fileCount":90,"integrity":"sha512-6lA90eYkF3bNLZt15W3TRLXoePgMxPZDgP5k+PhmBTKEbgLBtNLnvgb+MSZkSv17hKu/1rSPMFJHaMVoafFBZQ==","signatures":[{"sig":"MEYCIQDZEzpwdGQ88Rp+yKlRp6aHTmQdN4M7mMwbfmK7YP6dMwIhAPyZH2LXwwDz3c4f//BgPoiQ4GwUxEEsidX9X0x7uOpF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":152656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfj/0ZCRA9TVsSAnZWagAAtrkQAIuUjv5pqluoPd9gfk56\nutbyT81ZCGcf5uL4Ffys21sB4MMrxzfvJ2J+QOnXkdE/4sYXH9wHWOFmj6ei\nzA8GEEBq94PNy9ZGhBn1M4meAeCQgP7u7AdW3/R+KjT1UX10G9iifvrm6jVU\ndLoJWhOExo3djZK22WJX1YCc9lCyACl+Nx5pHkekKFb357E7UgDHEoQBgMGq\no9ZEO9Kn0wYN+65ww+MueZs00LeqIv26qwetU7v+eFt9A2QzHistTaHsWJSe\nyAur+GpfLrVfUqYVnYZaLY1O7qdBkEbjZn09Ev/FRAcJWtdUFYX7UwM0QskG\nFRiGOCCJUIeElqCExnQQPF35i2WR2fxk0QMBngkqbh4EzfgiRY4eP23a9zhz\nOcbBMHlgRv+gc2kNG6+7YFUOF6ohq2pEVnNtxE6rLRWQ+KWEsvVv1xz/+MQE\nezn+O8UCwNjMmywY63wHS5JxahrGAZoReE9eO002UxLcEVTmKBomkLt0/2Id\nX+Dp0+D5i7vXidcsSbUq7fiTap7POwntr+S3YyHGsAqe6zK514qupumowyXz\ntCPKRjkjthFRMAtJ7+b7BSvKj4FMuz9H65SYdHQQU7Ow8M0bKmaIbHtQDYLD\nkMWGRPyBCC+AxIbzQuA7DEH4krlmLaPntJmZdvxYsoE8innrdcZgmIAxq7+x\nl60q\r\n=tUxp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","readme":"# Summary\n\n`react-compose` provides a set of tools for creating themable components. The `compose` tool takes a functional component and, given default options and contextual overrides provided through React context, computes injected props including `classes`, `slots`, and `slotProps`. Styles are computed only when encountering unique theme objects per component, resulting in optimized performance.\n\nExample:\n\n```\nimport { SliderBase } from './Slider.base';\nimport { compose } from '@fluentui/react-theming';\n\nexport const Slider = compose(SliderBase, {\n  // the themable name of the component\n  name: 'Slider'\n\n  // the set of replacement tokens to be injected into the styles\n  tokens,\n\n  // The css styling to be injected as a `classes` prop\n  styles\n\n  // A dictionary of React components representing the actual subcomponents to be used by the Slider\n  slots\n});\n\n// Composed components can be recomposed to offer slightly different permutations.\nexport const RedSlider = compose(Slider, {\n  tokens: { railColor: 'red' }\n});\n```\n\nTheming can be achieved through applications using a `ThemeProvider` component, also provided in the library:\n\n```tsx\n// Create a theme with a token override for the Slider.\nconst theme = createTheme({\n  components: {\n    Slider: {\n      tokens: {\n        railColor: 'green',\n      },\n    },\n  },\n});\n\n// Render the slider using the theme.\nconst App = () => (\n  <ThemeProvider theme={theme}>\n    <Slider />\n  </ThemeProvider>\n);\n```\n\n## Principles\n\n`compose` follows 3 principles:\n\n- Prefer faster components over more flexible components (if a decision between the 2 must be made.)\n\n- Decouple theming/styling from implementation in order to ensure the styling approach can be replaced without rewriting the component.\n\n- Keep it simple; avoid adding too many concepts for developers to learn.\n\n## Who is `compose` for?\n\nComponents created with `compose` are meant for use by anyone.\n\n`compose` itself is primarily intended for use by component authors; it provides a consistent means of attaching to a \"themed context\".\n\n`compose` can also be used by application developers to enable a greater level of customization when the \"theme\" does not provide enough flexibility.\n\n## When should I use `compose`?\n\n- When creating a component that should be themeable.\n- When overriding major details of an existing component. (Explained\n  later in \\\"Overriding (tokens\\|slots) with a new component\\\".)\n\n## What\\'s in a theme?\n\nA Fluent UI theme contains several major sections. At at high level, it\ncontains detail about colors, types, effects, spacing, and animation.\nFurthermore, a theme has the ability to override major details about\neach and every component\\'s look and feel as well as behavior.\n\n> TODO: document theme\n\n# Using components created with `compose`\n\nThere is no requirement around using components build with `compose`. If you use them without a theme, they will render with whichever default token/styling values, if any, are provided.\n\nIt is recommended the default styling provide very limited styling, leaving tokens as the preferred method for customizing the component.\n\n## Styling components with a theme\n\nDefault styling and tokens can always be overridden using theme.\n\n> TODO: how would one replace styling completely, instead of overriding it?\n\n## Customizing with tokens\n\nFrequently, individual products design needs conflict with that of the\nbase style. To accomodate necessary changes, `Tokens` exist to allow easy\nmodification of most all aspects of look and feel.\n\nA token is a key that corresponds to a value, usually from from the\napplied theme. Examples of tokens might be `fontSize`, `fontFamily`,\n`borderRadius`, `animationDuration`, and `labelHoveredbBackground`.\n\n### Setting tokens with a theme\n\nTo understand the set of tokens that a specific component understands,\nrefer to the documentation of that component. For this example, we will\nassume that a `Button` component exists that supports the following\ntokens:\n\n- `backgroundColor`\n- `fontSize`\n- `backgroundHoverColor`\n\nTo override any (or all) of the Button\\'s tokens, an object should be\nprovided within the theme under:\n\n```{.json}\n{\n  \"components\": {\n    \"Button\": {\n      \"tokens\": {\n        \"values\": \"here...\"\n      }\n    }\n  }\n}\n```\n\nTokens are represented by the following:\n\n1.  Function\n\n    A functional token is the preferred method of adjusting look and\n    feel. Functional tokens reference values in the applied theme.\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": t => t.fonts.base,\n            \"backgroundColor\": t => t.colors.brand[2]\n          }\n        }\n      }\n    }\n    ```\n\n2.  Literal value\n\n    A literal value allows a token to be hard-coded. It is considered\n    the least desirable (as it will never be affected by other changes\n    in the theme).\n\n    A literal token in practice looks like:\n\n    ```{.json}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": 12\n          }\n        }\n      }\n    }\n    ```\n\n3.  Dependent value\n\n    There are several cases where the value of a token is based on a\n    calculation of another value. For instance, the background hover\n    color of a button might be desired to be a shade lighter than the\n    default background color of the button. (In order to specify this,\n    assume we have a `lighten()` function available.)\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"backgroundHoverColor\": {\n              dependsOn: ['backgroundColor'],\n              value: ([backgroundColor: Color]) => lighten(backgroundColor)\n            }\n          }\n        }\n      }\n    }\n    ```\n\n### Customizing tokens by creating variants\n\nIf adjusting all instances of a component with a token override is not\ndesirable, then it is possible to create a component variant using\n`compose`.\n\nFor instance, it might be the case that most `Button` instances should\nlook a certain way, but `Button` instances in a toolbar should not\ninherit the same tokens.\n\nThe solution is to create a component that can apply different tokens,\nbut retains the same underlying behavior.\n\nTo create a new component that can be targeted separately from the base\ncomponent, simply call `compose` and optionally provide new tokens.\n\n```{.javascript org-language=\"js\"}\nconst ToolbarButton = compose(Button, {\n  tokens: {\n    fontSize: t => t.font.small\n  }\n});\n```\n\n## Customizing with slots\n\nWhile tokens affect the look and feel of rendered elements, `slots`\nprovides a way to make more significant adjustments to a component\\'s\nstructure and behavior.\n\nA slot is a rendered DOM element or higher level control that can be\nreplaced at runtime.\n\nAs an example, a `Checkbox` might choose to render a `label` element to\nhold descriptive text. If a use-case called for a proprietary\n`<MyLabel />` control instead of a `label`, that slot could be targeted\nfor replacement.\n\n### Overriding slots with a theme\n\nTo override a slot from a theme, specify a reference to the component in\nthe theme.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n{\n  \"components\": {\n    \"Checkbox\": {\n      \"slots\": {\n        \"label\": MyLabel\n      }\n    }\n  }\n}\n```\n\n### Overriding slots with a new component\n\n`compose` can also specify slot assignments directly.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n\nconst MyCheckbox = compse(Checkbox, {\n  slots: {\n    label: MyLabel\n  }\n});\n```\n\n# Creating a component meant for use with `compose`\n\nComponents that work well with compose consist of 2 parts: an unstlyled\nbased component and a composed layer that glues look and feel to the\nbase component.\n\nThis section first describes how tokens and styles are calculated, then\nexplains what an unstyled base component must do in order to be a good\ncitizen in the compose world.\n\n## Understanding tokens\n\nTokens are the exclusive means of getting data from a theme into a\ncomponent. Tokens should be specified for every aspect of a control\\'s\nlook and feel.\n\nTokens should be named according to the following anatomy:\n\n    {slot (or none for root)}{property}{state (or none for default)}\n\nExamples:\n\n- `thumbSizeHovered`\n- `backgroundColor`\n- `labelBorderDisabled`\n\nTODO: Exhaustive description of token declarations\n\n## Understanding styles\n\nAfter evaluating tokens, the tokens are passed to a `style` function.\nThe `style` function should return an object which can be rendered by\n`JSS`.\n\nExample:\n\n```{.javascript org-language=\"js\"}\nconst styles = (tokens: MyComponentTokens) => {\n  return {\n    root: {\n      backgroundColor: tokens.backgroundColor,\n      '&:hover': {\n        backgroundColor: tokens.backgroundHoverColor\n      }\n    },\n    widget: {\n      borderColor: tokens.borderColor\n    }\n  };\n}\n```\n\n## Understanding slots\n\nComponents should define a set of logical elements that are reasonable\nto replace. Additionally, sensible defaults should be provided. Slots\nprovide an opportunity for callers to late-bind sections for\nreplacement.\n\nTODO: examples of more slots\n\n## Writing the base component\n\nAny functional component can be used with `compose`. However, there are\nseveral conventions that should be respected in order to make the user\nexperience predictable.\n\nA good base component deviates from a run-of-the-mill component in 3\nways:\n\n- It should have no built-in opinion of styling. When styled via\n  `compose`, class names will be passed in via `slotProps` to provide\n  styling.\n- It accepts a prop named `slots`, which define the component to use\n  for subcomponents.\n- It accepts a prop named `slotProps`, which will be handed off to\n  subcomponents.\n\n### States\n\nEach component should ennumerate the possible set of states as a set of\nboolean flags.\n\nFor instance, a checkbox might declare these flags:\n\n- `checked`\n- `readonly`\n- `disabled`\n- `labeled`\n\n**NB:** States should be **boolean** values only.\n\nThese states affect what classNames are selected to render on the root\nelement of a component.\n\nFor instance, in the case of a checkbox, the previous states would cause\nthose selectors to appear on the root making them available to all\ndownlevel slots.\n\n### Slots\n\nTODO: Describe how to interact with slots\n\n### Slot Props\n\nTODO: Describe how to interact with slotProps\n\n### Building in practice\n\nA simple base component that renders a button might look like the\nfollowing:\n\n```{.javascript org-language=\"js\"}\ninterface Props {\n  slots;\n  slotProps;\n  children;\n  onClick;\n}\nconst BaseButton: React.FunctionComponent<Props> = (props: Props) => {\n\n  // First, define the slots\n  // define `Root` as a const which renders the root.\n  // Default to a button element.\n  const { root: Root = 'button' } = props.slots || {};\n\n  // Break out slot props to be passed to various components.\n  // Mix in the props specified directly in props.\n  const { root: rootProps } = props.slotProps || {};\n\n  const resolvedRootProps = { ...rootProps, onClick: props.onClick };\n\n  // Finally, render the component\n  return <Root {...resolvedRootProps}>{props.children}</Root>\n}\n```\n\nAs components grow and become more complex, it is expected that hooks\nwill be developed to resolve state and intelligently merge `props` into\n`slotProps`.\n\n## Conformance\n\nTODO: Describe how to run conformance tests to make sure that base\ncomponents appropriately react to theme changes.\n","gitHead":"67cb2bdf0b8bf5bebbfef39a1d4841fa5078518f","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"layershifter","email":"a@fedyashov.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.14.1+x64 (win32)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.14.1","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.15.1","@uifabric/merge-styles":"^7.8.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.47.12_1603271961080_0.39523949926490265","host":"s3://npm-registry-packages"}},"0.47.13":{"name":"@fluentui/react-theming","version":"0.47.13","license":"MIT","_id":"@fluentui/react-theming@0.47.13","maintainers":[{"name":"layershifter","email":"a@fedyashov.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"8b84edefe6aa0d4bff9e8a50a4cdad1feb680d2c","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.47.13.tgz","fileCount":90,"integrity":"sha512-opMLqBLmrhavTpudO/zU+SX+d3kYRcqqMEeWn9NssmYyaYAyPfObX6nm9szp6z7Ss5o4eJoJ17gCoC7dAk5t9g==","signatures":[{"sig":"MEYCIQCMoop/GhVhX4SjGEgS6h6iFQNSzpdwjdBHrWj3Q2MNLgIhAN4zinFDSWaSlJYDXhnCR6N0+PD405Li3vTuHSsPcP2Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfluarCRA9TVsSAnZWagAAnpcP/isOogxpKhz3L414zalc\n5EgRwKKLK3UNDk73PY3n4sT5QH7n3t0HF6eDBKynNc3niHbwJZpHLV90G8ec\nJbz3WzJXSo/6QH2dSU6YjJnGgu8KmDzNH4lLMkiBCv/9ACnybxQ80FUm7cye\n7YND+Mr8FrpKX7Q5sMfDgojCyEbxYZ9vx+4bSXM2DCCMMkTTeFc69YWnpL8e\ngAo/K/I2qoWt6UCw6aVY2pFkksR3IxYRN3TSnebwwrLIUTLYSuU3weWWI4rb\np6SCi3Jhpz2CnyYxBF7gI6/rAnltMMTJhcocnRqM51x5KD43H3l37aeg7+kz\nAAptyEkxC5T+zjgKCZkcoLoZbmE0R/8ajKS5EzYCYSRP+PnN4Tii7deAJDGM\nApzN70HuSF67UvPuN9JgQMetnkJ21PXBaSBv54WPJELCYJGxdSg4EJNhIAfz\n+WbPoWgU2y0AUkwVzqKrMMbxxWwsEDie/AgaTUXO8tQvsE5Ob5sOqn6Siov3\nwme+/VJeRP3myKJo39PWxpm3td41DIbc779cYuwHmeyA47tS04xODvUQj0pS\nvOAkRM2L6GaHCYhRj6YVCmZ4F9rfZwaRIifSdvAtKd1ZXVIEcugRp0tNVR5g\nSZNToHWzVEj0ejKJeB6c7KqPaGBSWcIiIlwbzfIIDTARinha92/aOf/MlQxe\n8ow5\r\n=YpMJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","readme":"# Summary\n\n`react-compose` provides a set of tools for creating themable components. The `compose` tool takes a functional component and, given default options and contextual overrides provided through React context, computes injected props including `classes`, `slots`, and `slotProps`. Styles are computed only when encountering unique theme objects per component, resulting in optimized performance.\n\nExample:\n\n```\nimport { SliderBase } from './Slider.base';\nimport { compose } from '@fluentui/react-theming';\n\nexport const Slider = compose(SliderBase, {\n  // the themable name of the component\n  name: 'Slider'\n\n  // the set of replacement tokens to be injected into the styles\n  tokens,\n\n  // The css styling to be injected as a `classes` prop\n  styles\n\n  // A dictionary of React components representing the actual subcomponents to be used by the Slider\n  slots\n});\n\n// Composed components can be recomposed to offer slightly different permutations.\nexport const RedSlider = compose(Slider, {\n  tokens: { railColor: 'red' }\n});\n```\n\nTheming can be achieved through applications using a `ThemeProvider` component, also provided in the library:\n\n```tsx\n// Create a theme with a token override for the Slider.\nconst theme = createTheme({\n  components: {\n    Slider: {\n      tokens: {\n        railColor: 'green',\n      },\n    },\n  },\n});\n\n// Render the slider using the theme.\nconst App = () => (\n  <ThemeProvider theme={theme}>\n    <Slider />\n  </ThemeProvider>\n);\n```\n\n## Principles\n\n`compose` follows 3 principles:\n\n- Prefer faster components over more flexible components (if a decision between the 2 must be made.)\n\n- Decouple theming/styling from implementation in order to ensure the styling approach can be replaced without rewriting the component.\n\n- Keep it simple; avoid adding too many concepts for developers to learn.\n\n## Who is `compose` for?\n\nComponents created with `compose` are meant for use by anyone.\n\n`compose` itself is primarily intended for use by component authors; it provides a consistent means of attaching to a \"themed context\".\n\n`compose` can also be used by application developers to enable a greater level of customization when the \"theme\" does not provide enough flexibility.\n\n## When should I use `compose`?\n\n- When creating a component that should be themeable.\n- When overriding major details of an existing component. (Explained\n  later in \\\"Overriding (tokens\\|slots) with a new component\\\".)\n\n## What\\'s in a theme?\n\nA Fluent UI theme contains several major sections. At at high level, it\ncontains detail about colors, types, effects, spacing, and animation.\nFurthermore, a theme has the ability to override major details about\neach and every component\\'s look and feel as well as behavior.\n\n> TODO: document theme\n\n# Using components created with `compose`\n\nThere is no requirement around using components build with `compose`. If you use them without a theme, they will render with whichever default token/styling values, if any, are provided.\n\nIt is recommended the default styling provide very limited styling, leaving tokens as the preferred method for customizing the component.\n\n## Styling components with a theme\n\nDefault styling and tokens can always be overridden using theme.\n\n> TODO: how would one replace styling completely, instead of overriding it?\n\n## Customizing with tokens\n\nFrequently, individual products design needs conflict with that of the\nbase style. To accomodate necessary changes, `Tokens` exist to allow easy\nmodification of most all aspects of look and feel.\n\nA token is a key that corresponds to a value, usually from from the\napplied theme. Examples of tokens might be `fontSize`, `fontFamily`,\n`borderRadius`, `animationDuration`, and `labelHoveredbBackground`.\n\n### Setting tokens with a theme\n\nTo understand the set of tokens that a specific component understands,\nrefer to the documentation of that component. For this example, we will\nassume that a `Button` component exists that supports the following\ntokens:\n\n- `backgroundColor`\n- `fontSize`\n- `backgroundHoverColor`\n\nTo override any (or all) of the Button\\'s tokens, an object should be\nprovided within the theme under:\n\n```{.json}\n{\n  \"components\": {\n    \"Button\": {\n      \"tokens\": {\n        \"values\": \"here...\"\n      }\n    }\n  }\n}\n```\n\nTokens are represented by the following:\n\n1.  Function\n\n    A functional token is the preferred method of adjusting look and\n    feel. Functional tokens reference values in the applied theme.\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": t => t.fonts.base,\n            \"backgroundColor\": t => t.colors.brand[2]\n          }\n        }\n      }\n    }\n    ```\n\n2.  Literal value\n\n    A literal value allows a token to be hard-coded. It is considered\n    the least desirable (as it will never be affected by other changes\n    in the theme).\n\n    A literal token in practice looks like:\n\n    ```{.json}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": 12\n          }\n        }\n      }\n    }\n    ```\n\n3.  Dependent value\n\n    There are several cases where the value of a token is based on a\n    calculation of another value. For instance, the background hover\n    color of a button might be desired to be a shade lighter than the\n    default background color of the button. (In order to specify this,\n    assume we have a `lighten()` function available.)\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"backgroundHoverColor\": {\n              dependsOn: ['backgroundColor'],\n              value: ([backgroundColor: Color]) => lighten(backgroundColor)\n            }\n          }\n        }\n      }\n    }\n    ```\n\n### Customizing tokens by creating variants\n\nIf adjusting all instances of a component with a token override is not\ndesirable, then it is possible to create a component variant using\n`compose`.\n\nFor instance, it might be the case that most `Button` instances should\nlook a certain way, but `Button` instances in a toolbar should not\ninherit the same tokens.\n\nThe solution is to create a component that can apply different tokens,\nbut retains the same underlying behavior.\n\nTo create a new component that can be targeted separately from the base\ncomponent, simply call `compose` and optionally provide new tokens.\n\n```{.javascript org-language=\"js\"}\nconst ToolbarButton = compose(Button, {\n  tokens: {\n    fontSize: t => t.font.small\n  }\n});\n```\n\n## Customizing with slots\n\nWhile tokens affect the look and feel of rendered elements, `slots`\nprovides a way to make more significant adjustments to a component\\'s\nstructure and behavior.\n\nA slot is a rendered DOM element or higher level control that can be\nreplaced at runtime.\n\nAs an example, a `Checkbox` might choose to render a `label` element to\nhold descriptive text. If a use-case called for a proprietary\n`<MyLabel />` control instead of a `label`, that slot could be targeted\nfor replacement.\n\n### Overriding slots with a theme\n\nTo override a slot from a theme, specify a reference to the component in\nthe theme.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n{\n  \"components\": {\n    \"Checkbox\": {\n      \"slots\": {\n        \"label\": MyLabel\n      }\n    }\n  }\n}\n```\n\n### Overriding slots with a new component\n\n`compose` can also specify slot assignments directly.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n\nconst MyCheckbox = compse(Checkbox, {\n  slots: {\n    label: MyLabel\n  }\n});\n```\n\n# Creating a component meant for use with `compose`\n\nComponents that work well with compose consist of 2 parts: an unstlyled\nbased component and a composed layer that glues look and feel to the\nbase component.\n\nThis section first describes how tokens and styles are calculated, then\nexplains what an unstyled base component must do in order to be a good\ncitizen in the compose world.\n\n## Understanding tokens\n\nTokens are the exclusive means of getting data from a theme into a\ncomponent. Tokens should be specified for every aspect of a control\\'s\nlook and feel.\n\nTokens should be named according to the following anatomy:\n\n    {slot (or none for root)}{property}{state (or none for default)}\n\nExamples:\n\n- `thumbSizeHovered`\n- `backgroundColor`\n- `labelBorderDisabled`\n\nTODO: Exhaustive description of token declarations\n\n## Understanding styles\n\nAfter evaluating tokens, the tokens are passed to a `style` function.\nThe `style` function should return an object which can be rendered by\n`JSS`.\n\nExample:\n\n```{.javascript org-language=\"js\"}\nconst styles = (tokens: MyComponentTokens) => {\n  return {\n    root: {\n      backgroundColor: tokens.backgroundColor,\n      '&:hover': {\n        backgroundColor: tokens.backgroundHoverColor\n      }\n    },\n    widget: {\n      borderColor: tokens.borderColor\n    }\n  };\n}\n```\n\n## Understanding slots\n\nComponents should define a set of logical elements that are reasonable\nto replace. Additionally, sensible defaults should be provided. Slots\nprovide an opportunity for callers to late-bind sections for\nreplacement.\n\nTODO: examples of more slots\n\n## Writing the base component\n\nAny functional component can be used with `compose`. However, there are\nseveral conventions that should be respected in order to make the user\nexperience predictable.\n\nA good base component deviates from a run-of-the-mill component in 3\nways:\n\n- It should have no built-in opinion of styling. When styled via\n  `compose`, class names will be passed in via `slotProps` to provide\n  styling.\n- It accepts a prop named `slots`, which define the component to use\n  for subcomponents.\n- It accepts a prop named `slotProps`, which will be handed off to\n  subcomponents.\n\n### States\n\nEach component should ennumerate the possible set of states as a set of\nboolean flags.\n\nFor instance, a checkbox might declare these flags:\n\n- `checked`\n- `readonly`\n- `disabled`\n- `labeled`\n\n**NB:** States should be **boolean** values only.\n\nThese states affect what classNames are selected to render on the root\nelement of a component.\n\nFor instance, in the case of a checkbox, the previous states would cause\nthose selectors to appear on the root making them available to all\ndownlevel slots.\n\n### Slots\n\nTODO: Describe how to interact with slots\n\n### Slot Props\n\nTODO: Describe how to interact with slotProps\n\n### Building in practice\n\nA simple base component that renders a button might look like the\nfollowing:\n\n```{.javascript org-language=\"js\"}\ninterface Props {\n  slots;\n  slotProps;\n  children;\n  onClick;\n}\nconst BaseButton: React.FunctionComponent<Props> = (props: Props) => {\n\n  // First, define the slots\n  // define `Root` as a const which renders the root.\n  // Default to a button element.\n  const { root: Root = 'button' } = props.slots || {};\n\n  // Break out slot props to be passed to various components.\n  // Mix in the props specified directly in props.\n  const { root: rootProps } = props.slotProps || {};\n\n  const resolvedRootProps = { ...rootProps, onClick: props.onClick };\n\n  // Finally, render the component\n  return <Root {...resolvedRootProps}>{props.children}</Root>\n}\n```\n\nAs components grow and become more complex, it is expected that hooks\nwill be developed to resolve state and intelligently merge `props` into\n`slotProps`.\n\n## Conformance\n\nTODO: Describe how to run conformance tests to make sure that base\ncomponents appropriately react to theme changes.\n","gitHead":"fea2b7dac3e550069e752e08d0c66568fae462b0","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.15.1","@uifabric/merge-styles":"^7.8.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.47.13_1603724963146_0.9796064878301838","host":"s3://npm-registry-packages"}},"0.47.14":{"name":"@fluentui/react-theming","version":"0.47.14","license":"MIT","_id":"@fluentui/react-theming@0.47.14","maintainers":[{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"ece12f37fdf7a3bb04a0627a3f0a621ccca44228","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.47.14.tgz","fileCount":90,"integrity":"sha512-xbpGhVz+N9trtYTEzGiegn5zhjo9icli2+Z58JOr0o1gHJImYApUF8Sk/XEW5txZ4dAamm+Qpe/uDDTwIy/nUw==","signatures":[{"sig":"MEYCIQCbAl43o2ec4pVkMajICHlDFFmM+I6WGoCxok9ONlsNhwIhANqsI+GDw/6EEAyRyfh3TYpOGPWUXO4TlEnXV2SuINRm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfu+dACRA9TVsSAnZWagAAozMP/0Z8Xgrxh3CN/7KT7lo/\nl5hvhgWtWpunqthkXBfJo2YORTDt3QLqj3CNk0LXGii5X9t8kcV4bibNMRtM\nwuFO1gduRtHkvtiFHbmpx3WLCGD9EHbNjMxrBse82JhGi7KdQxViQ0aeA05e\np+lzskNskc4+2lwTBjItKl/0gBL6C5JN+fj9eQJjYIlhrxyO916D7rRj+YdF\nJbImozJt3V+weHzafL90+kJvb9VrSrS/x1khApdGptjWP3skovcnSSCXRFeL\ncLx1XBq2TXmQimODax9Z4L2q0kQuYzkuF6/orCCHTi0GBrprmPW+xbCqtv9x\nhQ2hFMN1tggpCl12AuepsVJsFPeLBiR+WyVWphpeno2Tx1XxGeAODctHuRRv\ndFXTbMWFeafXPYZ6SPlerRDlQdbD/BboYekfqCohmra995nASi6lDhQJZA6W\nEAJHOlj/CJYZp01PeD2QPg3vnoRnHv1VbjC3btXl22/NDUTN4AaAwwLR6vJO\nKK38ODEehCN0yiL2SbM350eWVMbwhONCbIUhVfkSr1vBYbOHhNPLOEJSsjEJ\nka4etStcciUrvozQkI+IKaDj7+QkFg0sexnSS6N7nYhmUv6Scckb4fiX3dW6\ndOuTn93PLn5aETD7ixjkfrVwheSnas3kzSLSflA/eK0vNbltOrK2M/l/lbwk\ntteV\r\n=FB49\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","readme":"# Summary\n\n`react-compose` provides a set of tools for creating themable components. The `compose` tool takes a functional component and, given default options and contextual overrides provided through React context, computes injected props including `classes`, `slots`, and `slotProps`. Styles are computed only when encountering unique theme objects per component, resulting in optimized performance.\n\nExample:\n\n```\nimport { SliderBase } from './Slider.base';\nimport { compose } from '@fluentui/react-theming';\n\nexport const Slider = compose(SliderBase, {\n  // the themable name of the component\n  name: 'Slider'\n\n  // the set of replacement tokens to be injected into the styles\n  tokens,\n\n  // The css styling to be injected as a `classes` prop\n  styles\n\n  // A dictionary of React components representing the actual subcomponents to be used by the Slider\n  slots\n});\n\n// Composed components can be recomposed to offer slightly different permutations.\nexport const RedSlider = compose(Slider, {\n  tokens: { railColor: 'red' }\n});\n```\n\nTheming can be achieved through applications using a `ThemeProvider` component, also provided in the library:\n\n```tsx\n// Create a theme with a token override for the Slider.\nconst theme = createTheme({\n  components: {\n    Slider: {\n      tokens: {\n        railColor: 'green',\n      },\n    },\n  },\n});\n\n// Render the slider using the theme.\nconst App = () => (\n  <ThemeProvider theme={theme}>\n    <Slider />\n  </ThemeProvider>\n);\n```\n\n## Principles\n\n`compose` follows 3 principles:\n\n- Prefer faster components over more flexible components (if a decision between the 2 must be made.)\n\n- Decouple theming/styling from implementation in order to ensure the styling approach can be replaced without rewriting the component.\n\n- Keep it simple; avoid adding too many concepts for developers to learn.\n\n## Who is `compose` for?\n\nComponents created with `compose` are meant for use by anyone.\n\n`compose` itself is primarily intended for use by component authors; it provides a consistent means of attaching to a \"themed context\".\n\n`compose` can also be used by application developers to enable a greater level of customization when the \"theme\" does not provide enough flexibility.\n\n## When should I use `compose`?\n\n- When creating a component that should be themeable.\n- When overriding major details of an existing component. (Explained\n  later in \\\"Overriding (tokens\\|slots) with a new component\\\".)\n\n## What\\'s in a theme?\n\nA Fluent UI theme contains several major sections. At at high level, it\ncontains detail about colors, types, effects, spacing, and animation.\nFurthermore, a theme has the ability to override major details about\neach and every component\\'s look and feel as well as behavior.\n\n> TODO: document theme\n\n# Using components created with `compose`\n\nThere is no requirement around using components build with `compose`. If you use them without a theme, they will render with whichever default token/styling values, if any, are provided.\n\nIt is recommended the default styling provide very limited styling, leaving tokens as the preferred method for customizing the component.\n\n## Styling components with a theme\n\nDefault styling and tokens can always be overridden using theme.\n\n> TODO: how would one replace styling completely, instead of overriding it?\n\n## Customizing with tokens\n\nFrequently, individual products design needs conflict with that of the\nbase style. To accomodate necessary changes, `Tokens` exist to allow easy\nmodification of most all aspects of look and feel.\n\nA token is a key that corresponds to a value, usually from from the\napplied theme. Examples of tokens might be `fontSize`, `fontFamily`,\n`borderRadius`, `animationDuration`, and `labelHoveredbBackground`.\n\n### Setting tokens with a theme\n\nTo understand the set of tokens that a specific component understands,\nrefer to the documentation of that component. For this example, we will\nassume that a `Button` component exists that supports the following\ntokens:\n\n- `backgroundColor`\n- `fontSize`\n- `backgroundHoverColor`\n\nTo override any (or all) of the Button\\'s tokens, an object should be\nprovided within the theme under:\n\n```{.json}\n{\n  \"components\": {\n    \"Button\": {\n      \"tokens\": {\n        \"values\": \"here...\"\n      }\n    }\n  }\n}\n```\n\nTokens are represented by the following:\n\n1.  Function\n\n    A functional token is the preferred method of adjusting look and\n    feel. Functional tokens reference values in the applied theme.\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": t => t.fonts.base,\n            \"backgroundColor\": t => t.colors.brand[2]\n          }\n        }\n      }\n    }\n    ```\n\n2.  Literal value\n\n    A literal value allows a token to be hard-coded. It is considered\n    the least desirable (as it will never be affected by other changes\n    in the theme).\n\n    A literal token in practice looks like:\n\n    ```{.json}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": 12\n          }\n        }\n      }\n    }\n    ```\n\n3.  Dependent value\n\n    There are several cases where the value of a token is based on a\n    calculation of another value. For instance, the background hover\n    color of a button might be desired to be a shade lighter than the\n    default background color of the button. (In order to specify this,\n    assume we have a `lighten()` function available.)\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"backgroundHoverColor\": {\n              dependsOn: ['backgroundColor'],\n              value: ([backgroundColor: Color]) => lighten(backgroundColor)\n            }\n          }\n        }\n      }\n    }\n    ```\n\n### Customizing tokens by creating variants\n\nIf adjusting all instances of a component with a token override is not\ndesirable, then it is possible to create a component variant using\n`compose`.\n\nFor instance, it might be the case that most `Button` instances should\nlook a certain way, but `Button` instances in a toolbar should not\ninherit the same tokens.\n\nThe solution is to create a component that can apply different tokens,\nbut retains the same underlying behavior.\n\nTo create a new component that can be targeted separately from the base\ncomponent, simply call `compose` and optionally provide new tokens.\n\n```{.javascript org-language=\"js\"}\nconst ToolbarButton = compose(Button, {\n  tokens: {\n    fontSize: t => t.font.small\n  }\n});\n```\n\n## Customizing with slots\n\nWhile tokens affect the look and feel of rendered elements, `slots`\nprovides a way to make more significant adjustments to a component\\'s\nstructure and behavior.\n\nA slot is a rendered DOM element or higher level control that can be\nreplaced at runtime.\n\nAs an example, a `Checkbox` might choose to render a `label` element to\nhold descriptive text. If a use-case called for a proprietary\n`<MyLabel />` control instead of a `label`, that slot could be targeted\nfor replacement.\n\n### Overriding slots with a theme\n\nTo override a slot from a theme, specify a reference to the component in\nthe theme.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n{\n  \"components\": {\n    \"Checkbox\": {\n      \"slots\": {\n        \"label\": MyLabel\n      }\n    }\n  }\n}\n```\n\n### Overriding slots with a new component\n\n`compose` can also specify slot assignments directly.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n\nconst MyCheckbox = compse(Checkbox, {\n  slots: {\n    label: MyLabel\n  }\n});\n```\n\n# Creating a component meant for use with `compose`\n\nComponents that work well with compose consist of 2 parts: an unstlyled\nbased component and a composed layer that glues look and feel to the\nbase component.\n\nThis section first describes how tokens and styles are calculated, then\nexplains what an unstyled base component must do in order to be a good\ncitizen in the compose world.\n\n## Understanding tokens\n\nTokens are the exclusive means of getting data from a theme into a\ncomponent. Tokens should be specified for every aspect of a control\\'s\nlook and feel.\n\nTokens should be named according to the following anatomy:\n\n    {slot (or none for root)}{property}{state (or none for default)}\n\nExamples:\n\n- `thumbSizeHovered`\n- `backgroundColor`\n- `labelBorderDisabled`\n\nTODO: Exhaustive description of token declarations\n\n## Understanding styles\n\nAfter evaluating tokens, the tokens are passed to a `style` function.\nThe `style` function should return an object which can be rendered by\n`JSS`.\n\nExample:\n\n```{.javascript org-language=\"js\"}\nconst styles = (tokens: MyComponentTokens) => {\n  return {\n    root: {\n      backgroundColor: tokens.backgroundColor,\n      '&:hover': {\n        backgroundColor: tokens.backgroundHoverColor\n      }\n    },\n    widget: {\n      borderColor: tokens.borderColor\n    }\n  };\n}\n```\n\n## Understanding slots\n\nComponents should define a set of logical elements that are reasonable\nto replace. Additionally, sensible defaults should be provided. Slots\nprovide an opportunity for callers to late-bind sections for\nreplacement.\n\nTODO: examples of more slots\n\n## Writing the base component\n\nAny functional component can be used with `compose`. However, there are\nseveral conventions that should be respected in order to make the user\nexperience predictable.\n\nA good base component deviates from a run-of-the-mill component in 3\nways:\n\n- It should have no built-in opinion of styling. When styled via\n  `compose`, class names will be passed in via `slotProps` to provide\n  styling.\n- It accepts a prop named `slots`, which define the component to use\n  for subcomponents.\n- It accepts a prop named `slotProps`, which will be handed off to\n  subcomponents.\n\n### States\n\nEach component should ennumerate the possible set of states as a set of\nboolean flags.\n\nFor instance, a checkbox might declare these flags:\n\n- `checked`\n- `readonly`\n- `disabled`\n- `labeled`\n\n**NB:** States should be **boolean** values only.\n\nThese states affect what classNames are selected to render on the root\nelement of a component.\n\nFor instance, in the case of a checkbox, the previous states would cause\nthose selectors to appear on the root making them available to all\ndownlevel slots.\n\n### Slots\n\nTODO: Describe how to interact with slots\n\n### Slot Props\n\nTODO: Describe how to interact with slotProps\n\n### Building in practice\n\nA simple base component that renders a button might look like the\nfollowing:\n\n```{.javascript org-language=\"js\"}\ninterface Props {\n  slots;\n  slotProps;\n  children;\n  onClick;\n}\nconst BaseButton: React.FunctionComponent<Props> = (props: Props) => {\n\n  // First, define the slots\n  // define `Root` as a const which renders the root.\n  // Default to a button element.\n  const { root: Root = 'button' } = props.slots || {};\n\n  // Break out slot props to be passed to various components.\n  // Mix in the props specified directly in props.\n  const { root: rootProps } = props.slotProps || {};\n\n  const resolvedRootProps = { ...rootProps, onClick: props.onClick };\n\n  // Finally, render the component\n  return <Root {...resolvedRootProps}>{props.children}</Root>\n}\n```\n\nAs components grow and become more complex, it is expected that hooks\nwill be developed to resolve state and intelligently merge `props` into\n`slotProps`.\n\n## Conformance\n\nTODO: Describe how to run conformance tests to make sure that base\ncomponents appropriately react to theme changes.\n","gitHead":"4a06e5501d5248eb5b6e1ce7c7f7684773332e45","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.15.1","@uifabric/merge-styles":"^7.8.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.47.14_1606149952060_0.05165490824092145","host":"s3://npm-registry-packages"}},"0.47.15":{"name":"@fluentui/react-theming","version":"0.47.15","license":"MIT","_id":"@fluentui/react-theming@0.47.15","maintainers":[{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"jdhuntington","email":"jdhuntington@gmail.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"ecraig12345","email":"ecraig12345@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"7a9ebf0d82ed0e9a5527753cdc429da0eeed97b2","tarball":"https://registry.npmjs.org/@fluentui/react-theming/-/react-theming-0.47.15.tgz","fileCount":90,"integrity":"sha512-1KswWOzVh9XTbziV4e9yMok5rJw2UoqkS4vBD/wRAlltscQAM4Pys/c6S4NcS5IDoIlcUtNtditBxXVcMqCJXg==","signatures":[{"sig":"MEQCIFo9/GC/5d0upsQtSxqxIO6rOlgKnEo+gpu5DN1u0mL6AiBjwfn1GKKKPQYP8S2fFUi7DZW//alUQRRBsPubPIB36w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvqV/CRA9TVsSAnZWagAACjQP/2hr4QEGWEZDgLjR8eLh\nl+h0BeGxxE7CVYtzXQaBAILmkXTh8+F/omP5GpkaI24FPUGP9T2YNMzFczrt\nDfwgMcOEX3Ytwh3HWf6zlNjzPCGQfnP23DQfcB/Ll/U6yGQWjrSpUROVkae9\n5Nj7Wi0JqHHrvPI7Yw/XV8CNewpBYKR7FZ0ahRVNUZZQdYkPfJeoUdGUsRUj\nYffYJKHWvmb4BB8tPsKMKNYuYpoG04JmdzaR2CtuCvPmZ5OzbDWbskuCeckk\nhoVvfrTSmY4uabHjoOkHd2zsGIdSyxp5CImJ448pvZkgIqVSPkSiiMNH2LVm\n7HDh35BwEGtk042Nr03gZytCxv+X0bxlQIL5YLIGSuh84J9j2Z6hjQ+Hj6+b\nCMSxLRTPCCSdfxl9u9bVdT/Kg/pnzzUXv0r10vFBMNOa4/4/7pSmY2Szs46w\ncwp4in0Bue6lfJ3B3t/QIRvRH995zqLLkW9N/VzEbFLE3kmS9a4XXktMcX/j\ny0A3vXtdcFCg5TV9Knq1hdV+uaJdIH3+n5FAGOd0lmvzh47b2HBX2By4yL0A\nPVGqW3xgj5wT3XCWbdFMfn4MvWFfmbeRgzZX+HqeZREGvNO2UcNCKB1W2CC+\nKXmk7jemdDHV8ts+rAJKvbQ47FqrJQ8wHaC7m82tmO1aije13LrxsjS8Lbep\nqXdG\r\n=NHFX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.ts","readme":"# Summary\n\n`react-compose` provides a set of tools for creating themable components. The `compose` tool takes a functional component and, given default options and contextual overrides provided through React context, computes injected props including `classes`, `slots`, and `slotProps`. Styles are computed only when encountering unique theme objects per component, resulting in optimized performance.\n\nExample:\n\n```\nimport { SliderBase } from './Slider.base';\nimport { compose } from '@fluentui/react-theming';\n\nexport const Slider = compose(SliderBase, {\n  // the themable name of the component\n  name: 'Slider'\n\n  // the set of replacement tokens to be injected into the styles\n  tokens,\n\n  // The css styling to be injected as a `classes` prop\n  styles\n\n  // A dictionary of React components representing the actual subcomponents to be used by the Slider\n  slots\n});\n\n// Composed components can be recomposed to offer slightly different permutations.\nexport const RedSlider = compose(Slider, {\n  tokens: { railColor: 'red' }\n});\n```\n\nTheming can be achieved through applications using a `ThemeProvider` component, also provided in the library:\n\n```tsx\n// Create a theme with a token override for the Slider.\nconst theme = createTheme({\n  components: {\n    Slider: {\n      tokens: {\n        railColor: 'green',\n      },\n    },\n  },\n});\n\n// Render the slider using the theme.\nconst App = () => (\n  <ThemeProvider theme={theme}>\n    <Slider />\n  </ThemeProvider>\n);\n```\n\n## Principles\n\n`compose` follows 3 principles:\n\n- Prefer faster components over more flexible components (if a decision between the 2 must be made.)\n\n- Decouple theming/styling from implementation in order to ensure the styling approach can be replaced without rewriting the component.\n\n- Keep it simple; avoid adding too many concepts for developers to learn.\n\n## Who is `compose` for?\n\nComponents created with `compose` are meant for use by anyone.\n\n`compose` itself is primarily intended for use by component authors; it provides a consistent means of attaching to a \"themed context\".\n\n`compose` can also be used by application developers to enable a greater level of customization when the \"theme\" does not provide enough flexibility.\n\n## When should I use `compose`?\n\n- When creating a component that should be themeable.\n- When overriding major details of an existing component. (Explained\n  later in \\\"Overriding (tokens\\|slots) with a new component\\\".)\n\n## What\\'s in a theme?\n\nA Fluent UI theme contains several major sections. At at high level, it\ncontains detail about colors, types, effects, spacing, and animation.\nFurthermore, a theme has the ability to override major details about\neach and every component\\'s look and feel as well as behavior.\n\n> TODO: document theme\n\n# Using components created with `compose`\n\nThere is no requirement around using components build with `compose`. If you use them without a theme, they will render with whichever default token/styling values, if any, are provided.\n\nIt is recommended the default styling provide very limited styling, leaving tokens as the preferred method for customizing the component.\n\n## Styling components with a theme\n\nDefault styling and tokens can always be overridden using theme.\n\n> TODO: how would one replace styling completely, instead of overriding it?\n\n## Customizing with tokens\n\nFrequently, individual products design needs conflict with that of the\nbase style. To accomodate necessary changes, `Tokens` exist to allow easy\nmodification of most all aspects of look and feel.\n\nA token is a key that corresponds to a value, usually from from the\napplied theme. Examples of tokens might be `fontSize`, `fontFamily`,\n`borderRadius`, `animationDuration`, and `labelHoveredbBackground`.\n\n### Setting tokens with a theme\n\nTo understand the set of tokens that a specific component understands,\nrefer to the documentation of that component. For this example, we will\nassume that a `Button` component exists that supports the following\ntokens:\n\n- `backgroundColor`\n- `fontSize`\n- `backgroundHoverColor`\n\nTo override any (or all) of the Button\\'s tokens, an object should be\nprovided within the theme under:\n\n```{.json}\n{\n  \"components\": {\n    \"Button\": {\n      \"tokens\": {\n        \"values\": \"here...\"\n      }\n    }\n  }\n}\n```\n\nTokens are represented by the following:\n\n1.  Function\n\n    A functional token is the preferred method of adjusting look and\n    feel. Functional tokens reference values in the applied theme.\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": t => t.fonts.base,\n            \"backgroundColor\": t => t.colors.brand[2]\n          }\n        }\n      }\n    }\n    ```\n\n2.  Literal value\n\n    A literal value allows a token to be hard-coded. It is considered\n    the least desirable (as it will never be affected by other changes\n    in the theme).\n\n    A literal token in practice looks like:\n\n    ```{.json}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"fontSize\": 12\n          }\n        }\n      }\n    }\n    ```\n\n3.  Dependent value\n\n    There are several cases where the value of a token is based on a\n    calculation of another value. For instance, the background hover\n    color of a button might be desired to be a shade lighter than the\n    default background color of the button. (In order to specify this,\n    assume we have a `lighten()` function available.)\n\n    ```{.javascript org-language=\"js\"}\n    {\n      \"components\": {\n        \"Button\": {\n          \"tokens\": {\n            \"backgroundHoverColor\": {\n              dependsOn: ['backgroundColor'],\n              value: ([backgroundColor: Color]) => lighten(backgroundColor)\n            }\n          }\n        }\n      }\n    }\n    ```\n\n### Customizing tokens by creating variants\n\nIf adjusting all instances of a component with a token override is not\ndesirable, then it is possible to create a component variant using\n`compose`.\n\nFor instance, it might be the case that most `Button` instances should\nlook a certain way, but `Button` instances in a toolbar should not\ninherit the same tokens.\n\nThe solution is to create a component that can apply different tokens,\nbut retains the same underlying behavior.\n\nTo create a new component that can be targeted separately from the base\ncomponent, simply call `compose` and optionally provide new tokens.\n\n```{.javascript org-language=\"js\"}\nconst ToolbarButton = compose(Button, {\n  tokens: {\n    fontSize: t => t.font.small\n  }\n});\n```\n\n## Customizing with slots\n\nWhile tokens affect the look and feel of rendered elements, `slots`\nprovides a way to make more significant adjustments to a component\\'s\nstructure and behavior.\n\nA slot is a rendered DOM element or higher level control that can be\nreplaced at runtime.\n\nAs an example, a `Checkbox` might choose to render a `label` element to\nhold descriptive text. If a use-case called for a proprietary\n`<MyLabel />` control instead of a `label`, that slot could be targeted\nfor replacement.\n\n### Overriding slots with a theme\n\nTo override a slot from a theme, specify a reference to the component in\nthe theme.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n{\n  \"components\": {\n    \"Checkbox\": {\n      \"slots\": {\n        \"label\": MyLabel\n      }\n    }\n  }\n}\n```\n\n### Overriding slots with a new component\n\n`compose` can also specify slot assignments directly.\n\n```{.javascript org-language=\"js\"}\nimport { MyLabel } from 'my-library';\n\nconst MyCheckbox = compse(Checkbox, {\n  slots: {\n    label: MyLabel\n  }\n});\n```\n\n# Creating a component meant for use with `compose`\n\nComponents that work well with compose consist of 2 parts: an unstlyled\nbased component and a composed layer that glues look and feel to the\nbase component.\n\nThis section first describes how tokens and styles are calculated, then\nexplains what an unstyled base component must do in order to be a good\ncitizen in the compose world.\n\n## Understanding tokens\n\nTokens are the exclusive means of getting data from a theme into a\ncomponent. Tokens should be specified for every aspect of a control\\'s\nlook and feel.\n\nTokens should be named according to the following anatomy:\n\n    {slot (or none for root)}{property}{state (or none for default)}\n\nExamples:\n\n- `thumbSizeHovered`\n- `backgroundColor`\n- `labelBorderDisabled`\n\nTODO: Exhaustive description of token declarations\n\n## Understanding styles\n\nAfter evaluating tokens, the tokens are passed to a `style` function.\nThe `style` function should return an object which can be rendered by\n`JSS`.\n\nExample:\n\n```{.javascript org-language=\"js\"}\nconst styles = (tokens: MyComponentTokens) => {\n  return {\n    root: {\n      backgroundColor: tokens.backgroundColor,\n      '&:hover': {\n        backgroundColor: tokens.backgroundHoverColor\n      }\n    },\n    widget: {\n      borderColor: tokens.borderColor\n    }\n  };\n}\n```\n\n## Understanding slots\n\nComponents should define a set of logical elements that are reasonable\nto replace. Additionally, sensible defaults should be provided. Slots\nprovide an opportunity for callers to late-bind sections for\nreplacement.\n\nTODO: examples of more slots\n\n## Writing the base component\n\nAny functional component can be used with `compose`. However, there are\nseveral conventions that should be respected in order to make the user\nexperience predictable.\n\nA good base component deviates from a run-of-the-mill component in 3\nways:\n\n- It should have no built-in opinion of styling. When styled via\n  `compose`, class names will be passed in via `slotProps` to provide\n  styling.\n- It accepts a prop named `slots`, which define the component to use\n  for subcomponents.\n- It accepts a prop named `slotProps`, which will be handed off to\n  subcomponents.\n\n### States\n\nEach component should ennumerate the possible set of states as a set of\nboolean flags.\n\nFor instance, a checkbox might declare these flags:\n\n- `checked`\n- `readonly`\n- `disabled`\n- `labeled`\n\n**NB:** States should be **boolean** values only.\n\nThese states affect what classNames are selected to render on the root\nelement of a component.\n\nFor instance, in the case of a checkbox, the previous states would cause\nthose selectors to appear on the root making them available to all\ndownlevel slots.\n\n### Slots\n\nTODO: Describe how to interact with slots\n\n### Slot Props\n\nTODO: Describe how to interact with slotProps\n\n### Building in practice\n\nA simple base component that renders a button might look like the\nfollowing:\n\n```{.javascript org-language=\"js\"}\ninterface Props {\n  slots;\n  slotProps;\n  children;\n  onClick;\n}\nconst BaseButton: React.FunctionComponent<Props> = (props: Props) => {\n\n  // First, define the slots\n  // define `Root` as a const which renders the root.\n  // Default to a button element.\n  const { root: Root = 'button' } = props.slots || {};\n\n  // Break out slot props to be passed to various components.\n  // Mix in the props specified directly in props.\n  const { root: rootProps } = props.slotProps || {};\n\n  const resolvedRootProps = { ...rootProps, onClick: props.onClick };\n\n  // Finally, render the component\n  return <Root {...resolvedRootProps}>{props.children}</Root>\n}\n```\n\nAs components grow and become more complex, it is expected that hooks\nwill be developed to resolve state and intelligently merge `props` into\n`slotProps`.\n\n## Conformance\n\nTODO: Describe how to run conformance tests to make sure that base\ncomponents appropriately react to theme changes.\n","gitHead":"3703ce0db52804a7da4b3d6df145bdab1bb7a380","scripts":{"just":"just-scripts","lint":"yarn lint:eslint && yarn lint:old","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","lint:fix":"yarn lint:eslint --fix && yarn lint:old --fix","lint:old":"tslint -t stylish -p .","start-test":"just-scripts test:watch","lint:eslint":"eslint --ext .js,.ts,.tsx ."},"_npmUser":{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.15.0+x64 (darwin)","description":"> TODO: description","directories":{"lib":"lib","test":"__tests__"},"_nodeVersion":"12.15.0","dependencies":{"jss":"^10.0.0","@types/jss":"^9.5.8","classnames":"^2.2.6","@types/classnames":"^2.2.9","jss-preset-default":"^10.0.0","@uifabric/utilities":"^7.15.1","@uifabric/merge-styles":"^7.8.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"16.8.6","@types/jss":"^9.5.8","@types/react":"16.8.11","@uifabric/build":"^7.0.0"},"peerDependencies":{"react":"^16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-theming_0.47.15_1606329726816_0.5050162086297076","host":"s3://npm-registry-packages"}}},"time":{"created":"2019-12-10T22:39:01.343Z","modified":"2026-07-24T19:29:52.363Z","0.41.1":"2019-12-10T22:39:01.755Z","0.42.0":"2019-12-13T06:39:31.516Z","0.43.0":"2020-01-08T16:46:20.837Z","0.44.0":"2020-02-05T12:02:08.498Z","0.31.1-alpha.6224":"2020-02-25T15:56:51.398Z","0.45.0":"2020-03-02T14:54:10.539Z","0.46.0":"2020-03-05T16:26:11.463Z","0.47.0":"2020-03-19T15:15:23.012Z","0.48.0":"2020-04-15T11:05:25.089Z","0.47.1":"2020-04-15T12:29:51.833Z","0.49.0":"2020-05-10T07:37:01.594Z","0.47.2":"2020-05-14T14:10:44.399Z","0.47.3":"2020-06-02T13:19:03.006Z","0.47.4":"2020-06-15T18:05:59.613Z","0.47.5":"2020-06-15T18:43:21.432Z","0.50.0":"2020-06-16T15:02:26.461Z","0.47.6":"2020-06-19T15:00:48.365Z","0.47.7":"2020-07-15T16:13:43.943Z","0.47.8":"2020-08-07T14:58:10.812Z","0.47.9":"2020-08-18T09:50:56.699Z","0.47.10-experimental.0":"2020-09-18T12:53:20.960Z","0.47.10":"2020-09-24T14:38:16.250Z","0.47.11":"2020-10-15T15:36:07.652Z","0.47.12":"2020-10-21T09:19:21.266Z","0.47.13":"2020-10-26T15:09:30.791Z","0.47.14":"2020-11-23T16:45:52.287Z","0.47.15":"2020-11-25T18:42:06.955Z"},"bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"license":"MIT","homepage":"https://github.com/microsoft/fluentui","repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"description":"> TODO: description","maintainers":[{"email":"fui-svc@microsoft.com","name":"uifabricteam"},{"email":"uifrnbot@microsoft.com","name":"uifrnbot"},{"email":"npmjs@microsoft.com","name":"microsoft1es"},{"email":"microsoft-oss-publishing@microsoft.com","name":"microsoft-oss-releases"}],"readme":"","readmeFilename":""}