{"_id":"@auroratide/carica","_rev":"1-0e7f1448a7ac9ef8a989c21596090008","name":"@auroratide/carica","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@auroratide/carica","version":"0.1.0","description":"Custom elements for embedding characters into web pages","keywords":["carica","character","builder","web components"],"type":"module","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"wds --node-resolve -p 3000","clean":"rm -rf dist","build":"tsc","postbuild":"copyfiles -u 1 -e 'src/**/*.ts' 'src/**/*' dist","demo":"npm-run-all --parallel 'build -- --watch' 'start -- --watch'","test":"npm run clean && npm run build && wtr --node-resolve 'dist/**/*.spec.js'","prepublishOnly":"npm run clean && npm run build && npm run test"},"author":{"name":"Timothy Foster","url":"https://auroratide.com"},"repository":{"type":"git","url":"git+https://github.com/Auroratide/carica.git"},"license":"ISC","devDependencies":{"@open-wc/testing":"^2.5.33","@web/dev-server":"^0.1.21","@web/test-runner":"^0.13.16","copyfiles":"^2.4.1","npm-run-all":"^4.1.5","typescript":"^4.3.5"},"gitHead":"01acc87de60226a1e1dbbbefa8cf9dd5c71e4634","bugs":{"url":"https://github.com/Auroratide/carica/issues"},"homepage":"https://github.com/Auroratide/carica#readme","_id":"@auroratide/carica@0.1.0","_nodeVersion":"16.9.0","_npmVersion":"7.21.1","dist":{"integrity":"sha512-4/HJJ+c3TV0mQ8A0YGibtuI8ht4GsnHrk5vvquFdUl7cOwdmPCYUca2fqazM1OdLliVfx2/cxrrOvfoMvo+pHg==","shasum":"ccca89e023dac8c144bd18d746ede6f6eb837ae4","tarball":"https://registry.npmjs.org/@auroratide/carica/-/carica-0.1.0.tgz","fileCount":82,"unpackedSize":47832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhPR/WCRA9TVsSAnZWagAAErgP/1qKpGHexc+Db0TwMp18\ndowCORI8uWuKX8pII9XqCb0BghrXWln6py+B682cPFD+LeOitABP0ttGlkth\n3q6VxLgjETQ9EPAkTxz1Mh/L767t0FEhTL2gSSkN0kDMjD8BYyKLk1KDgzcc\nmY6JeIQF85/7+a9Zyu+QPZgZBSRLQMBs0FI/R6i7NnVUGbGi6hMjhR+J6e3e\ny7BwqAiAF1BiPVDvB05mnSFmR7oLLy8Syz6lbFyuvk3e2iLQNAfk/TuJyZam\nXxBQcaICk6pj4gqc5fmKtr1rfjviWGBY0etGAsQ+661nZtP1fM2aje86jwF3\nIwEe2+Ql+LYVtxkGTqYNvt2RpNIdGU6pY00iidlZ865prwzSVv4W1slseFe6\n9uswYGlYIA9QTl6gurNgf0ZHoMu+XNUmPxWEKyAafiNrFtXcIHJoV/OnRMnW\nelxREKcm54S6EGVrHOOAlbpeLWGvWvlt72J0z+29hOPXBmH62P4N0Zt7Ck6q\nCOtAtkxz/0dTirfgIgSLdSm20x9v9BdHNo2LiFpZqM+dy/j9Vf9ABUz0o8vT\nswIgW8CoD2ocQZT2SkSFHd2eVIf3qeLvKBkgGhtaFX3FUA1aDzIkC5ytoX0n\nnDjXGAf5JK3Dgf+lCg4lPO7rJYAhMuN8bFrubdt71WfPkCeZB1O7fO4uEVz+\nTjzi\r\n=z1JB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHmPbTui5oBEbNQ6AvgU7Iu5Ko9EY7fszmQQy21tJVh5AiEAxURt4AoMz2MfUdlCPqSUw4D6nfIvsd+XIvA7FecN9s8="}]},"_npmUser":{"name":"auroratide","email":"tf.auroratide@gmail.com"},"directories":{},"maintainers":[{"name":"auroratide","email":"tf.auroratide@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/carica_0.1.0_1631395797852_0.7637196102640702"},"_hasShrinkwrap":false}},"time":{"created":"2021-09-11T21:29:57.794Z","0.1.0":"2021-09-11T21:29:57.999Z","modified":"2022-04-04T16:29:00.800Z"},"maintainers":[{"name":"auroratide","email":"tf.auroratide@gmail.com"}],"description":"Custom elements for embedding characters into web pages","homepage":"https://github.com/Auroratide/carica#readme","keywords":["carica","character","builder","web components"],"repository":{"type":"git","url":"git+https://github.com/Auroratide/carica.git"},"author":{"name":"Timothy Foster","url":"https://auroratide.com"},"bugs":{"url":"https://github.com/Auroratide/carica/issues"},"license":"ISC","readme":"# Carica\n\n**Carica** lets you embed characters into web pages! This library provides a number of semantic elements that help build interesting people from scratch. This can be useful for:\n\n* Providing illustrations for colorfully teaching interesting topics\n* Animating stories you have always wanted to tell\n* Creating concept art for roleplaying games\n* And many other things. Let your creativity run free!\n\n## Disclaimer!\n\nCarica is in its early phases (prior to version 1.0), and as such many things are subject to change. The goal is to define a set of standards that are flexible and intuitive as possible, granting the greatest sense of ease for both creating new Caricas and the models that compose them.\n\n## A Quick Example\n\nThis image of Janet...\n\n<img src=\"example-library/janet.svg\" alt=\"A girl with brown hair and blue eyes.\"  height=\"256\" />\n\n...was made using this HTML:\n\n```html\n<carica-character class=\"janet\" alt=\"A girl with brown hair and blue eyes.\"\n  color-skin=\"#fff0e0\"\n  color-hair=\"#cb803f\" color-hair-dark=\"#8e5225\"\n  color-iris=\"#2d5e94\"\n>\n  <carica-head>\n    <carica-hair src=\"hair/medium.svg\"></carica-hair>\n    <carica-eyes src=\"eyes/neutral.svg\"></carica-eyes>\n    <carica-eyebrows src=\"eyebrows/neutral.svg\"></carica-eyebrows>\n    <carica-eyelashes src=\"eyelashes/neutral.svg\"></carica-eyelashes>\n    <carica-mouth src=\"mouths/smile.svg\"></carica-mouth>\n  </carica-head>\n</carica-character>\n```\n\n## Installation\n\nYou can import Carica through CDN:\n\n```html\n<script type=\"module\" src=\"https://unpkg.com/@auroratide/carica/lib/define.js\"></script>\n```\n\nOr, you may install Carica through NPM and include it as part of your build process:\n\n```\nnpm i @auroratide/carica\n```\n\n```js\nimport '@auroratide/carica/lib/define.js`\n```\n\n## Using Carica\n\nCarica is basically a collection of custom HTML elements.\n\nEach element takes a **`src`** attribute indicating what actual model to draw to the screen.\n\n```html\n<carica-hair src=\"hair/medium.svg\"></carica-hair>\n```\n\nYou can then customize the colors of that SVG's materials using **`color-*`** attributes. This is covered in greater detail below (see [Customizing Colors](#customizing-colors)), but for now since we know the hair SVG is composed of the \"hair\" material, we can change the color with `color-hair`:\n\n```html\n<carica-hair color-hair=\"red\" src=\"hair/medium.svg\"></carica-hair>\n```\n\nAnd finally, to make the shape accessible to everyone, the **`alt`** attribute is used to provide a textual representation.\n\n```html\n<carica-hair alt=\"red medium-length hair\" color-hair=\"red\" src=\"hair/medium.svg\"></carica-hair>\n```\n\nBuilding a Carica is as simple as assembling the different parts together and putting them under a single `carica-character` element!\n\n```html\n<carica-character alt=\"A girl with red hair\">\n  <carica-hair alt=\"red medium-length hair\" color-hair=\"red\" src=\"hair/medium.svg\"></carica-hair>\n</carica-character>\n```\n\n### Available Tags\n\n**`<carica-entity />`** is the most basic tag available and represents any visible model. All other tags are based off `<carica-entity />` but carry more semantic value:\n\n* **`<carica-character />`**: Represents a character such as a person; generally should contain all the parts belonging to a single character\n* **`<carica-head />`**: Represents the head of a character; generally should contain all the parts of a head, including hair and facial expressions\n* **`<carica-hair />`**: Represents hair on a character, including the hair on top of the head or even facial hair\n* **`<carica-mouth />`**: Represents a character's mouth\n* **`<carica-eyes />**: Represents the eyes of a character\n* **`<carica-eyebrows />`**: Represents the eyebrows above a character's eyes\n* **`<carica-eyelashes />`**: Represents eyelashes on a character's eyes, if any\n\nTechnically, all tags are _optional_ on a carica; for instance, a carica which does not have pronounced eyelashes does not need to specify a `<carica-eyelashes />` element.\n\nSince all the above tags are entites, they all share the same attributes:\n\n* **`src`**: The source SVG model to use; only `carica-head` has a default model\n* **`alt`**: The textual replacement for a carica, mostly useful for assistive technologies\n* **`color-*`**: A flexible set of attributes allowing you to define colors in-line; see [Customizing Colors](#customizing-colors)\n\n### Customizing Colors\n\nEach carica model is composed shapes, and each shape defines a **material** and a **shade**.\n\n* The **material** of a shape is its primary composition, and can be thought of as the shape's main color.\n* The **shade** is a variation of the material, such as \"dark\", or \"light\". A shape which does not specify a shade just uses the material's base color.\n\nA single model can have shapes of different materials within it. For example, hair models usually just consist of shapes with the \"hair\" material, but it's possible for a hair model to have an in-built bow with material \"hairbow\" or \"clothing\".\n\n<small>Unfortunately, at the moment the only way to know what materials compose a model is to look at the model's source code.</small>\n\nThe primary way to customize colors is through the inline `color-*` attributes. The asterisk is replaced with the material and shade you want to customize. Some examples:\n\n* `color-hair=\"red\"` makes all shapes with the `hair` material red.\n* `color-skin=\"brown\"` makes all shapes with the `skin` material brown.\n* `color-hair-dark=\"darkred\"` makes all shapes with the `hair` material and `dark` shade a dark red color.\n\nIt is also possible to use CSS to customize colors. Each material/shade combo is exposed as a CSS variable and as shadow parts. The following two CSS definitions will make dark hair into a dark red color.\n\n```css\n.janet carica-hair {\n  --hair-dark_color: darkred;\n}\n\n.janet ::part(hair dark) {\n  fill: darkred;\n}\n```\n\n### Carica Models\n\nThe `src` attribute lets you specify SVGs for the parts, but... what SVGs do you use?\n\nAt the moment there are very few models available, but the intent is to design the library in such a way that authoring new reusable models is easy.\n\nFor now, the only models that exist can be found here:\n\n* [Auroratide Carica Models](https://github.com/Auroratide/carica-models)\n\n## Authoring New Carica Models\n\nIt's honestly a bit early to author new models, as the details of how it should be done are still subject to change.\n\nAt the moment, [Auroratide Carica Models](https://github.com/Auroratide/carica-models) can be used as examples for how models may look. The important notes are:\n\n* Each model should define the Carica namespace:\n```xml\n<svg ... xmlns:carica=\"https://auroratide.com/carica\">\n```\n* Layers are defined with `carica:layer`.\n* Material and shade are defined with `carica:material` and `carica:shade` respectively.\n","readmeFilename":"README.md"}