{"_id":"@css19/system-ui-tokens","_rev":"1-02fbcf5c53b1b0234a89ed4368e84bad","name":"@css19/system-ui-tokens","description":"CSS19 - React CSS system-ui tokens","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@css19/system-ui-tokens","version":"0.1.0","keywords":["react","css","prop","style","design-system","tokens","theme"],"author":{"name":"Christian Alfoni"},"license":"MIT","_id":"@css19/system-ui-tokens@0.1.0","homepage":"https://github.com/christianalfoni/css19#readme","bugs":{"url":"https://github.com/christianalfoni/css19/issues"},"dist":{"shasum":"95e947dba128cd69177b2a6d9f9a8c9b816f5ab6","tarball":"https://registry.npmjs.org/@css19/system-ui-tokens/-/system-ui-tokens-0.1.0.tgz","fileCount":4,"integrity":"sha512-dEjPLNSPrT7qCXQY1nMZaPGgzplzVcgPgoAYymZy9T2qLcVCRT1mxP0vTmxbFYEDiMaShiuMznS/44VN93tE0Q==","signatures":[{"sig":"MEYCIQCz6ZHr71xdjBFhgl7XqgBOKTfx9a973lU3unGqJHWsowIhANuDh9cdq4tRIV4J15fiQBYMktOyUjfzw/0Sl6hHaW98","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12521},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"42862eccbdd44415b768b908fbb7d885502265a5","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"repository":{"url":"git+https://github.com/christianalfoni/css19.git","type":"git"},"_npmVersion":"10.2.4","description":"CSS19 - React CSS system-ui tokens","directories":{},"_nodeVersion":"20.11.1","dependencies":{"@css19/core":"^0.1.13","@css19/tokens":"^0.1.3"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","typescript":"^5.5.2","@types/react":"^18.3.3"},"_npmOperationalInternal":{"tmp":"tmp/system-ui-tokens_0.1.0_1719661851956_0.3248099931919286","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@css19/system-ui-tokens","version":"0.1.1","description":"CSS19 - React CSS system-ui tokens","type":"module","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/christianalfoni/css19.git"},"keywords":["react","css","prop","style","design-system","tokens","theme"],"author":{"name":"Christian Alfoni"},"license":"MIT","bugs":{"url":"https://github.com/christianalfoni/css19/issues"},"homepage":"https://github.com/christianalfoni/css19#readme","devDependencies":{"@types/react":"^18.3.3","react":"^18.3.1","typescript":"^5.5.2"},"dependencies":{"@css19/css":"^0.1.0","@css19/tokens":"^0.1.2"},"_id":"@css19/system-ui-tokens@0.1.1","gitHead":"43c18bc5c6ebd2e21acd8da82cc8057934eee464","_nodeVersion":"20.11.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-iehlabt6n7C/g6OiVzpbHe9oqhTa+0BK2FoCFm1L6LcdL0LYUlxHnLbnGJtXUkXD4f4Rz/S8DS3tx/qXDHZbtA==","shasum":"17226fd8f4a2507b77d6588f49b1e58f958ae450","tarball":"https://registry.npmjs.org/@css19/system-ui-tokens/-/system-ui-tokens-0.1.1.tgz","fileCount":4,"unpackedSize":12445,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGmF7KOJJKHEdMJWIjmJkgksIgVQEDBLzUxEoUlOHpuwAiEA0xWAzyihGnYZ7stfpJjzpH5W87EiG1vkhSQ639Bh0hI="}]},"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/system-ui-tokens_0.1.1_1719682574856_0.2397206392508071"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-29T11:50:51.856Z","modified":"2024-06-29T17:36:15.222Z","0.1.0":"2024-06-29T11:50:52.105Z","0.1.1":"2024-06-29T17:36:15.022Z"},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"author":{"name":"Christian Alfoni"},"repository":{"type":"git","url":"git+https://github.com/christianalfoni/css19.git"},"keywords":["react","css","prop","style","design-system","tokens","theme"],"license":"MIT","homepage":"https://github.com/christianalfoni/css19#readme","bugs":{"url":"https://github.com/christianalfoni/css19/issues"},"readme":"# @css19/system-ui-tokens\n\n## Install\n\n```shell\nnpm install @css19/system-ui-tokens\n```\n\n**NOTE!** Requires @css19/css\n\n## Configure\n\n```tsx\nimport { createTokens } from \"@css19/system-ui-tokens\";\n\nconst [systemUi, tokens, style] = createTokens({\n  // These categories maps to specific CSS properties, where\n  // tokens are enforced. See source code for the specific mappings\n  colors: {\n    primary: \"red\",\n  },\n  fonts: {},\n  fontSizes: {},\n  lineHeights: {},\n  letterSpacings: {},\n  sizes: {},\n  space: {},\n  transitions: {},\n  radii: {},\n  zIndices: {},\n  shadows: {},\n  borderWidths: {},\n  borderStyles: {},\n});\n\nfunction App() {\n  return (\n    <>\n      {style}\n      <div>\n        <h1\n          css={systemUi({\n            // The mapped tokens ensures type safety and restricts to only using tokens\n            // on mapped CSS properties\n            color: \"primary\",\n            // You can still use the tokens for manual composition\n            border: `1px solid ${tokens.colors.primary}`,\n          })}\n        >\n          Hello World\n        </h1>\n      </div>\n    </>\n  );\n}\n```\n\n## How it works\n\nThe `createTokens` function converts your tokens into CSS variables. The `style` tag is used to mount these variable into your application. This works with client and server. The `systemUi` function only translates token values into the respective token variables.\n\nThis package requires `@css19/css`\n","readmeFilename":"README.md"}