{"_id":"@carpenjk/themeweaver","_rev":"2-0668643496f7aa60cd6d36d655e763ad","name":"@carpenjk/themeweaver","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@carpenjk/themeweaver","version":"1.0.0","description":"A library for creating and usig themes interchangeably in third party components","main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src -d lib --ignore ./src/jest,./src/test_themes","test":" jest","semantic-release":"semantic-release --branches main","commit":"git-cz"},"repository":{"type":"git","url":"git+https://github.com/carpenjk/themeweaver.git"},"keywords":["responsive","css","styled-components","styled-components","theme","reusable","components"],"author":{"name":"Jeremy Carpenter"},"license":"Apache-2.0","bugs":{"url":"https://github.com/carpenjk/themeweaver/issues"},"homepage":"https://github.com/carpenjk/themeweaver#readme","devDependencies":{"@babel/cli":"^7.18.10","@babel/core":"^7.10.4","@babel/preset-env":"^7.10.4","babel-jest":"^26.1.0","cz-conventional-changelog":"^3.3.0","jest":"^26.1.0","react":"^17.0.1","semantic-release":"^19.0.3","rimraf":"^3.0.2"},"dependencies":{"@carpenjk/prop-x":"^1.0.2"},"peerDependencies":{"@carpenjk/prop-x":"^1.0.2"},"publishConfig":{"access":"public"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"de7908e66db8b7e64ee2b24292264bd711a676a5","_id":"@carpenjk/themeweaver@1.0.0","_nodeVersion":"16.16.0","_npmVersion":"8.15.1","dist":{"integrity":"sha512-LVndS2qXgAzsXAlUuVjM5Qfgjj8Oi5AsXLgMnGPKO0Em8qx8Y0OTbry8svWoYx251lLm55hWqrQVobaMRdRO5w==","shasum":"af9d92db278f2fc61f2a983ae2548248afbff898","tarball":"https://registry.npmjs.org/@carpenjk/themeweaver/-/themeweaver-1.0.0.tgz","fileCount":3,"unpackedSize":33592,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk03Ptab+cEC15BFvgYtERN7aZkEGIk/r65N0PcKd6rwIhAI5Kzq5oYj/w+T5Ls24Njud56uUJlV94KJqJLMe6KxOK"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sqnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrfA/+IbHVe0QNKXsb7XiIiXoABgVjWFORC3+gzfZDvnbjq75zcR++\r\nMShTPaE+5x/7hU5tA2HH0IGvXsEDfkH8F6XjIW0uQz9TQl7nmU/ngIGkFLLT\r\n8iSFTHvFfL2H6v/r/Xs1zR4qGotIHZ+n5MllHOD20ZyMt9Js9ztFLA7P9EP8\r\nSQgQdLTF5ty8OR6l9Azx1wlmMsEkHJ7KI50/udHaGnikPnafuKWn4qeTUKko\r\nzv0ro/ql8GzE9VMpssybZguaY+sSlRFMj/nJgoQdvL42Y6ApdknNtnJBuzm1\r\n7GNtymat3jEyp/OPkoaiYoRISB/U4BUNEyiPeCuXXdps4N6UyFSHK5AXm+tq\r\n1n2b9jebWWrahGy4q6VLZQhzFebJh1NIO5DhMc6ddEvOszbPkBfJT+I9RGpr\r\nhFxy3Z16IgUdPqt0/9e60IvOkQILENDxiEvPzlr8qIA3fFUGwC31eWoh/XPD\r\nGTe6c4R/K2RA+ACwWP5l1+l+bkok6S8GqP+hF6SE3M1lzZ97KvwcpMsWkP1g\r\ngPldbwn1lnUbhi/tDbXpjGax9bW0qrVI4Qy9FerrphhAcVaxYsIUOxlOldIv\r\nIxsZ0arobUI8WoQPJQ+lsrpiEit6l9hMWjpLSyFOVUg/xMK2qWHcTXLoqHWh\r\nGe+4laoaHQKhSmpUfBWFMm3MDxzmizF4Gac=\r\n=evLg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"carpenjk","email":"jcarpenterwebdev@gmail.com"},"directories":{},"maintainers":[{"name":"carpenjk","email":"jcarpenterwebdev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/themeweaver_1.0.0_1659554471633_0.7743581041551146"},"_hasShrinkwrap":false},"1.0.1":{"name":"@carpenjk/themeweaver","version":"1.0.1","description":"A library for creating and usig themes interchangeably in third party components","main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src -d lib --ignore ./src/jest,./src/test_themes","prepublishOnly":"npm run build","test":" jest","semantic-release":"semantic-release --branches main","commit":"git-cz","forceRelease":""},"repository":{"type":"git","url":"git+https://github.com/carpenjk/themeweaver.git"},"keywords":["responsive","css","styled-components","styled-components","theme","reusable","components"],"author":{"name":"Jeremy Carpenter"},"license":"Apache-2.0","bugs":{"url":"https://github.com/carpenjk/themeweaver/issues"},"homepage":"https://github.com/carpenjk/themeweaver#readme","devDependencies":{"@babel/cli":"^7.18.10","@babel/core":"^7.10.4","@babel/preset-env":"^7.10.4","babel-jest":"^26.1.0","cz-conventional-changelog":"^3.3.0","jest":"^26.1.0","react":"^17.0.1","semantic-release":"^19.0.3","rimraf":"^3.0.2"},"dependencies":{"@carpenjk/prop-x":"^1.0.2"},"peerDependencies":{"@carpenjk/prop-x":"^1.0.2"},"publishConfig":{"access":"public"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"ac3999eb00367f8f60982f29e7bde9643491e0f1","_id":"@carpenjk/themeweaver@1.0.1","_nodeVersion":"16.16.0","_npmVersion":"8.15.1","dist":{"integrity":"sha512-glrvEZ5q4X5CZ3SmQdbB7w6ubZFWMWjxFifd31e4qUqZ3mzOQC/geSwaYhYBBDBFxUvPj4ylHcE4nhFgG/neZA==","shasum":"0341d62f4aa49e5dc78ea72846328436f9b9662f","tarball":"https://registry.npmjs.org/@carpenjk/themeweaver/-/themeweaver-1.0.1.tgz","fileCount":4,"unpackedSize":66957,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQ+ZE03k4P3hypThy6SfKgnC5kWfjBQCLGGfeaH9xZIgIgNethessflGTVupr/lgu0sGEqShsNQ+EJtVKMrBiGYCM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6/XgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrS6hAAnTbiB19AhZEaZSZ533eyNwUSTmYnlhs3Ydocn/NtivzLMEZ0\r\n2aq9UNjgHu//UoDi+lS68uRtYtJrXlGJeB0/c5CRSbrVFu8Ks8/ikkm2pX2Z\r\nrUu3jSC+BEcL0V23P9pt20MCX/jDojoyt6bDJZHDFPPAaF6YmVUblB8Vj5yB\r\n2/wyFq/evvgOXdS/71lcFZvu3aI7YXrQcyMc1V6btdaCWbIMLcz22MS/Sn5m\r\nviHZEPn+GPmJfgxRBIrs8VjV96mnYtjhRTrtj7yfN6NFKx2s5cqCYn2226mm\r\nYl0VnjYQQt5mJ9cCSByTPLgtEbfSjy7TQ+5JvqZPZBo/1+Ktz6zBzR6dsbPV\r\n5sPTVUNO0zN3AzZ+UAnqK6Fl9r/dGmqcTS4agqFQbBcR54XYW+8lo1sjiG6K\r\n7FBmiyQObgNxfc+z6O+Wk4H0YNH6BUrgbMoKR0GcQbvKDtiRykIGh4mg3+Pj\r\ngsE4srEESOQRfdmitvawbNt0LjnihpT9tL48UonBs2/H1DpnqGVsBhKTqoyQ\r\nEQ1MtpWnbrYOyB6I08WsHXHGAaFhuToO+ucHNQ3nwN/vxUytE/1uXbm1sPOd\r\nxCeskLKdk5gFmFNXM16I8hd+/FFC5mjk280Kq8wuvXDq/az41VVsrFUfHb9A\r\n+2uO59vJylpWSIPh4BycRQ1v4wdj8GygnmM=\r\n=Qwjw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"carpenjk","email":"jcarpenterwebdev@gmail.com"},"directories":{},"maintainers":[{"name":"carpenjk","email":"jcarpenterwebdev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/themeweaver_1.0.1_1659631071968_0.01842359517160075"},"_hasShrinkwrap":false},"1.0.2":{"name":"@carpenjk/themeweaver","version":"1.0.2","description":"A library for creating and usig themes interchangeably in third party components","main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src -d lib --ignore ./src/jest,./src/test_themes","prepublishOnly":"npm run build","test":" jest","semantic-release":"semantic-release --branches main","commit":"git-cz"},"repository":{"type":"git","url":"git+https://github.com/carpenjk/themeweaver.git"},"keywords":["responsive","css","styled-components","styled-components","theme","reusable","components"],"author":{"name":"Jeremy Carpenter"},"license":"Apache-2.0","bugs":{"url":"https://github.com/carpenjk/themeweaver/issues"},"homepage":"https://github.com/carpenjk/themeweaver#readme","devDependencies":{"@babel/cli":"^7.18.10","@babel/core":"^7.10.4","@babel/preset-env":"^7.10.4","babel-jest":"^26.1.0","cz-conventional-changelog":"^3.3.0","jest":"^26.1.0","react":"^17.0.1","semantic-release":"^19.0.3","rimraf":"^3.0.2"},"dependencies":{"@carpenjk/prop-x":"^1.0.2"},"peerDependencies":{"@carpenjk/prop-x":"^1.0.2"},"publishConfig":{"access":"public"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"827bd6e282e620e289fb06ff62a4e52494dfe655","_id":"@carpenjk/themeweaver@1.0.2","_nodeVersion":"16.16.0","_npmVersion":"8.15.1","dist":{"integrity":"sha512-kY+DnsETUKCtXHU8LnkX2/PMUtB/3BFumNiY4oq0lD0YRGD1yiCgWA/he0trc6hrDiQNDjxmzOeJ5AMstUj9wQ==","shasum":"9ad2f6656686ca0c7547849fe7e7192883abedbe","tarball":"https://registry.npmjs.org/@carpenjk/themeweaver/-/themeweaver-1.0.2.tgz","fileCount":4,"unpackedSize":66933,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFRX7+YIJ3vDLlxMyWDzMHuySIZLJDIwvBR0n/xdpmFLAiEAmdS5xWzmxbAbfQQcvD1lEaP9IzqWHaASsx0u7xo/dx8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6/iVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHYRAAhV6XGm3tsX6kqR7OymvWifV6gcqj9grE5IePVRzUUTkZ0GJX\r\nJCfDd4D82PlQKyLGUInPqz2gK97jIxmGrsxqphqWEdA2Hc3ku1gwwABehC6t\r\nakaLXUdXXyUdd+KF5Yef2UI938Zr5xlSpo5F33rv6Qi6rJWvuRg+BZheLNo0\r\nqFkRIsMQvsOyz1swDawweuO751jqeBEzEKEfCW38XB7faTNsZeoegd9iMdW4\r\nbJVTqa1LIuPJw2hp98G0xnfa58MrtbU2VaM7f2QfzvOGjkvQX/EsAGbhETch\r\nXkHSqXUz5fLS/by3s3/U+pXPpLIUj6GFF9rg9md94fTYrMAxe+LLaYZEjV5W\r\nQ1jKmJfkdaNkm8jZhs8hJ7BryEWtbd0fvSMuylzWDE/BGLwGvz9c0oqbI667\r\nNiGSsdfOT9ttEVpp6k7rgmTzf+ghHSCtSf+LDQNhx6shhbN6TEvcoGBi/n++\r\nUcsc43xEL9HYrx+6YvZ2swA8jHDqJloq0ie6jheCQOGVZlYhFESiM/UveXLo\r\nJoiY5Y/NeVsoX7raYU8uB2OcTGtRY+yNMQlJKnPhymnAG8s/xuDfX4o4sJej\r\nwfUrpVzsGMRztHRwEjqFENrxq67VBrMFDCN637+xpTsPWHTANRbF+jtQY1HI\r\ng/T7Y9tFIgP0ccea88H5xb7b0esN+zREPsA=\r\n=68De\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"carpenjk","email":"jcarpenterwebdev@gmail.com"},"directories":{},"maintainers":[{"name":"carpenjk","email":"jcarpenterwebdev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/themeweaver_1.0.2_1659631765296_0.11941851968520734"},"_hasShrinkwrap":false}},"time":{"created":"2022-08-03T19:21:11.569Z","1.0.0":"2022-08-03T19:21:11.777Z","modified":"2022-08-04T16:49:25.556Z","1.0.1":"2022-08-04T16:37:52.215Z","1.0.2":"2022-08-04T16:49:25.479Z"},"maintainers":[{"name":"carpenjk","email":"jcarpenterwebdev@gmail.com"}],"description":"A library for creating and usig themes interchangeably in third party components","homepage":"https://github.com/carpenjk/themeweaver#readme","keywords":["responsive","css","styled-components","styled-components","theme","reusable","components"],"repository":{"type":"git","url":"git+https://github.com/carpenjk/themeweaver.git"},"author":{"name":"Jeremy Carpenter"},"bugs":{"url":"https://github.com/carpenjk/themeweaver/issues"},"license":"Apache-2.0","readme":"# Themeweaver\n\nA library for creating and using themes interchangeably in third party components.\n\n## Introduction\n\nThemeweaver is a perspective on styling components as part of a broader effort to\nmake 100% reusable and interchangeable components. Themeweaver provides an interface\nfor passing styles to components making it an excellent choice for creating a\ncollection of components controlled by a single theme. It works as an abstraction\non top of styling libraries such as styled-components and emotion for a more\nadvanced theming utility and is enhanced by the [prop-x](https://github.com/carpenjk/prop-x) library. One of the objectives of component based systems is\nreusability of code. However, oftentimes components are used as a starting point\nand then modified for each project. Additionally, while theming has been\nintroduced in common styling libraries, there are limited standards and tools\nfor creating and using themes across the component ecosystem. Themeweaver aims\nto provide infrastructure needed to solve these problems.\n\n## Features\n\n- **Semantic** Themeweaver encourages defining standard semantic customization points across components that are similar to how html tags define a document.\n- **Universal:** Themeweaver creates and common interface for passing themes between components while adding additional features to common css-in-js libraries\n- **Responsive:** Themeweaver contains tools for using breakpoints and dynamically selecting theme values based on the current viewport width.\n- **Variants:** Themeweaver contains tools for creating and consuming variants within the theme.\n- **Lightweight:** Themeweaver is a standalone library and is written to modern javascript standards.\n- **Separation of Concerns:** Themeweaver gives more responsibility to the theme definition compared to other solutions that depend on style props applied to base level components. This is purposeful to facilitate the larger goal of 100% reusable and interchangeable high level components.\n\n## Theme Specification\n\nThemeweaver utilizes [System UI](https://system-ui.com/) specification for theme structure and functionality.\n\n## Use Case\n\n- **Agency Component Libraries:** Themeweaver can be used to speed up prototyping,\n  development, and testing for Agencies. When utilized to build a reusable component\n  library in combination with a standard set of semantic customization points, it\n  creates a highly customizable solution with minimal touchpoints.\n- **Feelancers** Themeweaver can be used by freelancers with the same benefits as\n  agencies.\n- **Corporate Development Teams:** Themeweaver can be used by development teams in\n  combination with a standard set of semantic customization points to maintain global\n  themes across the they're component landscape.\n- **Third Party Components** In combination with a global specification for\n  semantic customization points, Third Party Components can use Themeweaver to create\n  an ecosystem of interchangeable components without the need for code modification.\n\n# License\n\n[Apache License 2.0](./LICENSE)\n\n# Get Started\n\n## Install\n\n```js\n    npm install carpenjk/themeweaver carpenjk/prop-x\n```\n\n## Create Theme\n\nUtilize a theme file and pass it to components as your normally would with styled-components or emotion.\n\n#### Import\n\n```js\nimport { withThemeweaver, variant } from 'themeweaver';\n```\n\n#### Define\n\n```js\nexport const theme = withThemeweaver(\n  //System UI compliant theme\n  {\n    colors: {\n      primary: '#7789C8',\n      secondary: '#C6D8FF',\n      action: '#E5707A',\n      lightText: '#979797',\n      mainText: '#444649',\n    },\n    fonts: {\n      h1: \"'Poppins', sans-serif\",\n      button: \"'Roboto', sans-serif\",\n      text: \"'Open Sans', sans-serif\",\n    },\n    fontSizes: [10, 12, 14, 18, 24, 32],\n    fontWeights: {\n      regular: 400,\n      bold: 700,\n    },\n    sizes: [0, '100%'],\n    space: [0, 4, 8, 16, 20, 32, 64],\n    breakpoints: ['40em', '52em', '64em', '80em'],\n  },\n  {\n    // beginning of themeweaver semantic key styles *****************\n    nav: {\n      ...variant('main', {\n        color: ['primary', 'mainText'],\n        backgroundColor: 'secondary',\n        fontFamily: 'h1',\n        fontSize: 3,\n        fontWeight: 'bold',\n        padding: [2, 5],\n      }),\n    },\n  }\n);\n```\n\n## Use Theme\n\n#### Import\n\n```js\nimport { getColor, getBackgroundColor, getPadding } from 'themeweaver';\nimport { breakpoint } from '@carpenjk/prop-x';\nimport styled from 'styled-components';\n```\n\n#### Usage\n\n##### Static keys\n\n```js\nconst StyledLink = styled.a`\n  color: ${getColor('nav.main', 'yellow')};\n  background-color: ${getBackgroundColor('nav.main', 'grey')};\n  padding: ${getPadding('nav.main', '20px')};\n\n  ${breakpoint(1)`\n      padding: ${getPadding('nav.main', '20px')};\n      `}\n`;\n```\n\n##### Dynamic keys\nPassing an empty object as the first parameter of the get functions causes them to look for the tw property for semkey object containing keys for semKey, variant (optional).\n\n```js\nimport styled from 'styled-components';\nimport { breakpoint } from '@carpenjk/prop-x';\n\nconst StyledLink = styled.a`\n  color: ${getColor({}, 'yellow')};\n  background-color: ${getBackgroundColor({}, 'grey')};\n  padding: ${getPadding({}, '20px')};\n\n  ${breakpoint(1)`\n      padding: ${getPadding({}, '20px')};\n      `}\n`;\n\nconst DEFAULT_TW = {\n  tw: {semKey: \"nav\", variant: \"main\"}\n}\n\nconst FancyLink = ({tw}) => {\n const mergedTw = { ...DEFAULT_TW, ...tw };\n return (<StyledLink tw={mergedTw} />)\n}\n```\n##### suffixes\nA suffix can be passed inside of the path object to apply to the theme query. The following code defining a suffix is the same as using a path of 'nav.main_disabled'.\n\n```js\nimport styled from 'styled-components';\nimport {condition} from '@carpenjk/prop-x';\n\n\nconst StyledLink = styled.a`\n  color: ${getColor({}, 'yellow')};\n  ${condition('disabled)`\n      color: ${getColor({suffix: '_disabled'}, '20px')};\n    `}\n`;\n\nconst DEFAULT_TW = {\n  tw: {semKey: \"nav\", variant: \"main\"}\n}\n\nconst FancyLink = ({tw}) => {\n const mergedTw = { ...DEFAULT_TW, ...tw };\n return (<StyledLink tw={mergedTw} />)\n}\n`\n// \n```\n\n# API: Theme Creation\n\n## withThemeweaver\n\nThis is a wrapper function that recieves a theme object following the [System UI](https://system-ui.com/)\ntheme specification and a config object which defines style groupings within the theme. The\nfunction creates and returns a shallow copy of the theme, modifying\nit with aliases which are later utilized to intelligently access the theme.\n\nThe Themeweaver config can be configured with and without the use of variants,\nbut must contain at least one semantic group. Together, the semantic group\nand the variant becomes the semantic key which is used to intellegently\nretrieve styles within components using Themeweaver.\n\n#### Example\n\n```js\nimport { withThemeweaver } from 'themeweaver';\n\nexport const theme = withThemeweaver(\n  //System UI compliant theme\n  {\n    colors: {\n      primary: '#7789C8',\n      secondary: '#C6D8FF',\n      action: '#E5707A',\n      lightText: '#979797',\n      mainText: '#444649',\n    },\n    fonts: {\n      h1: \"'Poppins', sans-serif\",\n      button: \"'Roboto', sans-serif\",\n      text: \"'Open Sans', sans-serif\",\n    },\n    fontSizes: [10, 12, 14, 18, 24, 32],\n    fontWeights: {\n      regular: 400,\n      bold: 700,\n    },\n    sizes: [0, '100%'],\n    space: [0, 4, 8, 16, 20, 32, 64],\n    breakpoints: ['40em', '52em', '64em', '80em'],\n  },\n  {\n    // beginning of Themeweaver config with semantic key styles *****************\n    nav: {\n      color: ['primary', 'mainText'],\n      backgroundColor: 'secondary',\n      fontFamily: 'h1',\n      fontSize: 3,\n      fontWeight: 'bold',\n      padding: 2,\n    },\n  }\n);\n\nexport default theme;\n```\n\n##### Theme Keys with Array Scales\n\nThe [System UI](https://system-ui.com/) theme specification utilizes scales which are commonly assigned\nvia arrays for ordinal values like padding or fontSize, and named object\nliterals for named values like color. For instance padding utilizes the \"space\"\nscale defined by the theme object.\n\nPadding uses the space scale.\n\n```js\nspace: [0, 4, 8, 16, 20, 32, 64],\n```\n\nWithin the config object for the semantic key, the padding is given an index of\nthe space array. The code below equates to '8px'. The array could also contain\nstrings with any valid padding value and unit.\n\n```js\npadding: 2,\n```\n\n##### Nested Scales\n\nTheme values can be defined in arrays or object literals. This is an example of colors defined as object literals.\n\n```js\nexport const theme = withThemeweaver(\n  //System UI compliant theme\n  {\n    colors: {\n      primary: '#7789C8',\n      secondary: '#C6D8FF',\n      action: '#E5707A',\n    },\n    ...\n```\n\nThese colors could also be defined as an array.\n\n```js\nexport const theme = withThemeweaver(\n  //System UI compliant theme\n  {\n    colors: {\n      [\n        '#7789C8',\n        '#C6D8FF',\n        '#E5707A'\n      ]\n    },\n    ...\n```\n\nHowever, the two approaches can be combined for a more power effect. The following\nexample represents shades by nesting an array in the object literal.\n\n```js\nexport const theme = withThemeweaver(\n\n  {\n    colors: {\n      primary: ['#D4D9ED','#7789C8', '#4F66BA'], //multiple shades\n      secondary: ['#C6D8FF','#00277A'],\n      action: ['#F6E8E8', '#E5707A'],\n    },\n    ...\n```\n\nThese values are accessed by suffixing the key with an index.\n\n```js\n{\n  // beginning of Themeweaver config with semantic key styles *****************\n  nav: {\n    color: 'action[0]',  //#D4D9ED\n    ...\n  }\n}\n```\n\n##### Responsive themes\n\nTo define values for different breakpoints, the breakpoints theme key must be\ndefined in the theme object:\n\n```js\nspace: [0, 4, 8, 16, 20, 32, 64],\nbreakpoints: ['40em', '52em', '64em', '80em'],\n```\n\nThe style value must be set with an array in the semantic key style. The following\nvalue will produce a padding of '8px' for screen widths between 0 and 40em, the\nfirst defined breakpoint. It will produce a value of 32px for any screens 40em and wider.\n\n```js\npadding: [2, 5],\n```\n\n## variant\n\nUtilize the variant function to create a variant object and spread it into the config.\nThe function recieves a name parameter and a config object with styles for the variant to use.\n\n```js\nimport { withThemeweaver, variant } from 'themeweaver';\n\nexport const theme = withThemeweaver(\n  {\n    ...\n  },\n  {\n    // beginning of Themeweaver config with semantic key styles *****************\n    nav: {\n      ...variant('main', {\n        color: ['primary', 'mainText'],\n        backgroundColor: 'secondary',\n        fontFamily: 'h1',\n        fontSize: 3,\n        fontWeight: 'bold',\n        padding: [2, 5],\n      }),\n      ...variant('secondary', {\n        color: ['primary', 'mainText'],\n        backgroundColor: 'secondary',\n        fontFamily: 'h1',\n        fontSize: 3,\n        fontWeight: 'bold',\n        padding: [2, 5],\n      }),\n    },\n  }\n);\n\nexport default theme;\n```\n\n## value\n\nIt is possible to assign explicit values directly to the semantic key by wrapping\nit in the value function.\n\n```js\nimport {withThemeweaver, variant, value } from 'themeweaver';\n  export const theme = withThemeweaver(\n  {\n    ...\n  },\n  {\n    // beginning of Themeweaver config with semantic key styles *****************\n  nav: {\n    ...variant('main', {\n      color: value('Salmon'),  // color assigned explicitly\n    ...\n  }\n```\n\n## API: Theme Usage\n\nAll API functions can be individually imported into a component prefixed with\n\"get\" such as \"getColor\". \n\n#### Import\n\n```js\nimport { getColor, getBackgroundColor, getPadding } from 'themeweaver';\nimport { breakpoint } from '@carpenjk/prop-x';\nimport styled from 'styled-components';\n```\n\n#### Usage\n\n```js\nconst StyledLink = styled.a`\n  color: ${getColor('nav.main', 'yellow')};\n  background-color: ${getBackgroundColor('nav.main', 'grey')};\n  padding: ${getPadding('nav.main', '20px')};\n  ${breakpoint(1)`\n      padding: ${getPadding('nav.main', '20px')};\n      `}\n`;\n```\n\n### Get functions\n\nGet functions are imported individually to limit the size of the code base for the component\nThese are the same functions which are accessable by the tw object. All get\nfunctions follow the same convention except for [getTransitions](#getTransitions) and [getZIndex](#getZIndex).\n\n```js\ngetStyle(semanticKey, fallbackValue);\n```\n\nGet functions are imported individually.\n\n```js\nimport { getColor, getBackgroundColor, getPadding } from 'themeweaver';\n```\n\nThe semantic key is a string containing the concatenated semantic group and the\nvariant name delimited by a period.\n\n```js\ncolor: ${getColor('nav.main', 'blue')};\n```\n\nAlternatively, the fallback value can be moved outside of the function for the\nsame result. Removing it completely is acceptable, but will produce an invalid\nstyle if the semantic key cannot be found.\n\n```js\ncolor: ${getColor('nav.main') || 'blue'};\ncolor: ${getColor('nav.main')};\n```\n\nAll valid css style values can be used. Ordinal values without a unit will be\ngiven a unit of \"px\". Numerical values without units such as zIndex should be\ndefined as strings in both the theme and fallback value.\n\n```js\nfont-size: ${getFontSize('nav.main', '1rem')}\nfont-size: ${getFontSize('nav.main', 16)}\n```\n\n##### Complete List\n\n```js\nbackground-color: ${getBackgroundColor('nav.main', 'red')};\n\nborder: ${getBorder('nav.main,'thick double #32a1ce')};\n\nborder-top: ${getBorderTop('nav.main', 'thick green')};\n\nborder-right: ${getBorderRight('nav.main', 'thick green')};\n\nborder-bottom: ${getBorderBottom('nav.main', 'thick green')};\n\nborder-left: ${getBorderLeft('nav.main', 'thick green')};\n\nborder-color: ${getBorderColor('nav.main', 'blue')};\n\nborder-width: ${getBorderWidth('nav.main', '1em')};\n\nborder-style: ${getBorderStyle('nav.main', 'dashed solid')};\n\nborder-radius: ${getBorderRadius('nav.main', '5px')};\n\nbox-shadow: ${getBoxShadow('nav.main', '10px 5px 5px red')};\n\ncolor: ${getColor('nav.main', 'blue')};\n\nfont-family: ${getFontFamily('nav.main', \"'Roboto', sans-serif\")};\n\nfont-size: ${getFontSize('nav.main', '2.4rem')};\n\nfont-weight: ${getFontWeight('nav.main', 'bold')};\n\nheight: ${getHeight('nav.main', 'auto')};\n\nline-height: ${getLineHeight('nav.main', '150%')};\n\nletter-spacing: ${getLetterSpacing('nav.main', 'normal')};\n\nmargin: ${getMargin('nav.main', '10px 5px 10px 5px')};\n\nmargin-top: ${getMarginTop('nav.main', '10px')};\n\nmargin-right: ${getMarginRight('nav.main', '5px')};\n\nmargin-bottom: ${getMarginBottom('nav.main', '10px')};\n\nmargin-left: ${getMarginLeft('nav.main', '5px')};\n\nmax-height: ${getMaxHeight('nav.main', '100vh')};\n\nmax-width: ${getMaxWidth('nav.main', '50%')};\n\nmin-height: ${getMinHeight('nav.main', '300px')};\n\nmin-width: ${getMinWidth('nav.main', '500px')};\n\npadding: ${getPadding('nav.main', '10px 5px 10px 5px')};\n\npadding-top: ${getPaddingTop('nav.main', '10px')};\n\npadding-right: ${getPaddingRight('nav.main', '5px')};\n\npadding-bottom: ${getPaddingBottom('nav.main', '10px')};\n\npadding-left: ${getPaddingLeft('nav.main', '5px')};\n\ntext-shadow: ${getTextShadow('nav.main', '1px 1px 2px pink')};\n\ntransition: ${getTransitions({\n        style: 'top',\n        path: 'nav.main',\n        fallback: 'top 500ms ease'\n      })};\n\nwidth: ${getWidth('nav.main', '600px')};\n\nz-index = {getZIndex('nav.main', '0')};\n```\n\n## getTransitions\n\ngetTransitions functions a little differently than the rest of the get functions.\nEach variant can assign 1 transition per css property and a transition object\nis used to pass the retrieval criteria.\n\n##### Theme\n\n```js\nimport { withThemeweaver, variant } from 'themeweaver';\n\nexport const theme = withThemeweaver(\n  {\n    ...\n    transitions: {fade: 'color 400 ms ease', top: 'top 500ms ease'} // named transition values\n  },\n  {\n    // beginning of Themeweaver config with semantic key styles *****************\n    nav: {\n      ...variant('main', {\n        color: ['primary', 'mainText'],\n        backgroundColor: 'secondary',\n        fontFamily: 'h1',\n        fontSize: 3,\n        fontWeight: 'bold',\n        padding: [2, 5],\n        transition: {color: 'fade', top: 'top'},  //transitions assigned by css property\n      })\n    },\n  }\n);\n\nexport default theme;\n```\n\n##### Usage\n\n```js\nimport { getTransitions } from 'themeweaver'\n\ntransition: ${getTransitions({\n        style: 'top',  //css property\n        path: 'nav.main', //semantic key path\n        fallback: 'top 500ms ease' //fallback transition value\n      })};\n\n```\n\n##### Multiple Transitions\n\nMultiple property transitions can be retrieved with a single getTransitions call by\npassing in an array of transition objects.\n\n```js\nimport { getTransitions } from 'themeweaver'\n\ntransition: ${getTransitions(\n      [\n        {\n          style: 'top',  //css property\n          path: 'nav.main', //semantic key path\n          fallback: 'top 500ms ease' //fallback transition value\n        },\n        {\n          style: 'color',  //css property\n          path: 'nav.main', //semantic key path\n          fallback: 'color 500ms ease' //fallback transition value\n        }\n      ]\n      )};\n```\n\n## getZIndex\n\nIt is possible to asign a z-index from the theme using the getZIndex function\nto set the component's properties.\n\n```js\nimport { getZIndex } from 'themeweaver'\n\n<StyledLink zIndex = {getZIndex('nav.main', 1)} >\n  click me!\n<StyledLink />\n```\n\n## breakpoint\n\nThe breakpoint function allows for setting multiple breakpoints within the\ncomponent style. The breakpoint function is a function which calls a tag\nfunction in which the styles are inserted. A breakpoint value must be passed\ndirectly to the function as a index of the breakpoints defined in the theme.\nThe breakpoint value is used by all of other style functions to find the correct\nstyle value from the theme definition.\n\n```js\n${breakpoint(breakpointValue)`\n  padding: ${getPadding('nav.main', '20px')};\n  ...\n  `}\n```\n\nThe following example styles a link with the primary color #7789C8 when the screen\nwidth is below 40em and uses the secondary color #C6D8FF when the screen width is at least\n40em.\n\n##### Theme\n\n```js\nexport const theme = withThemeweaver(\n  {\n    ...\n    colors: {\n      primary: '#7789C8',\n      secondary: '#C6D8FF',\n    },\n    breakpoints: ['40em', '52em', '64em', '80em'],  //Breakpoint 1 = '40em'\n  },\n  {\n    // beginning of Themeweaver config with semantic key styles *****************\n    nav: variant('main', {\n        color: ['primary', 'secondary'],      //breakpoint 1 value = 'secondary'\n        ...\n    }),\n  }\n);\n```\n\n##### Usage\n\n```js\nimport { breakpoint, getColor } from 'themeweaver';\nimport styled from 'styled-components';\n\nconst StyledLink = styled.a`\n  color: ${getColor('nav.main', 'yellow')}; // color: #7789C8\n\n  ${tw.breakpoint(1)`\n  color: ${getColor('nav.main', '20px')};       // color: #C6D8FF\n  `}\n`;\n```\n\n## toggleClass\n\nThe toggleClass function is an additional utility function used to conditionally\nset the className of a component. This function is helpful when\n[toggling transitions](#Toggling-Transitions).\n\n```js\ntoggleClass(triggerBln, className);\n```\n\n##### Import\n\n```js\nimport { toggleClass } from 'themeweaver';\n```\n\n##### Usage\n\nThe styledLink component will have a className of 'tw-transition' when triggerTransition is true.\n\n```js\n<StyledLink className={${toggleClass(props.triggerTransition, 'tw-transition')} >\n  click me!\n</StyledLink>\n```\n\n# Toggling Transitions\n\nTransitions often occur with a change in state. To facilitate this, use the\n[toggleClass](#toggleClass) function to toggle the clas of the component and add\na corresponding class selector in your component's css.\n\n```css\n&.tw-transition {\n  padding: ${getPadding('nav.hover', '20px')};\n  color: ${getColor('nav.hover', 'orange')};\n  transition: ${getTransitions(\n    [\n      {\n        style: 'padding',\n        path: 'nav.main',\n        fallback: 'padding 1000ms ease'\n      }, {\n        style: 'color',\n        path: 'nav.main',\n        fallback: 'color 1000ms ease'\n      }\n    ]\n    )};\n}\n```\n\nThis produces css similar to the folowing:\n\n```css\n&.tw-transition {\n  padding: 32px;\n  color: #f6e8e8;\n  transition: 'padding 200ms ease, color 500ms ease';\n}\n```\n\nThe functionality can be used within a breakpoint as well. Styles will be retrieved\nfor the appropriate breakpoint.\n\n```js\n${breakpoint(1)`\n  padding: ${getPadding('nav.main', '20px')};\n  &.tw-transition {\n    padding: ${getPadding('nav.hover', '20px')};\n    color: ${getColor('nav.hover', 'orange')};\n    transition: ${getTransitions(\n      [\n        {\n          style: 'padding',\n          path: 'nav.main',\n          fallback: 'padding 1000ms ease'\n        }, {\n          style: 'color',\n          path: 'nav.main',\n          fallback: 'color 1000ms ease'\n        }\n      ]\n      )};\n  }\n`}\n```\n\n# Examples\n\n[tw-mobile-menu](https://github.com/carpenjk/tw-mobile-menu)\n","readmeFilename":"README.md"}