{"_id":"@anyvision/style-guide","_rev":"9-010bd09cd8e64ad5ad2999a9c4d78c50","time":{"1.0.2-beta.1":"2020-09-07T16:20:11.511Z","created":"2020-10-06T15:18:46.206Z","1.0.3":"2020-10-06T15:18:46.722Z","modified":"2022-04-04T14:27:52.598Z","1.0.4":"2020-10-06T16:04:25.899Z"},"name":"@anyvision/style-guide","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.3":{"name":"@anyvision/style-guide","version":"1.0.3","description":"This library design to make the user much more easier to work with the design system of Anyvision.
What is the goal of this project?
Now days to change the current application theme takes long time and because of that this r","main":"index.scss","repository":{"type":"git","url":"git+https://github.com/AnyVisionltd/anv-ui-style-guide.git"},"scripts":{"test-jenkins":"echo 'No Tests'"},"author":"","license":"ISC","bugs":{"url":"https://github.com/AnyVisionltd/anv-ui-style-guide/issues"},"homepage":"https://github.com/AnyVisionltd/anv-ui-style-guide#readme","dependencies":{"node-sass":"^4.13.1","normalize.css":"^8.0.1"},"gitHead":"d3272eec08b214230c2a365ccb2ace5fac9f2232","_id":"@anyvision/style-guide@1.0.3","_nodeVersion":"12.17.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-GTqVArHRgqszoDO2/DSoZaFbZCpY+AO/MLeAn1Vjs3T+kLfZb9JOTw4W1QT7GXfY/3H+1m5RqAf6lBptA/3GWw==","shasum":"295bff764d48bfdf3e26e1b66cca63e105601168","tarball":"https://registry.npmjs.org/@anyvision/style-guide/-/style-guide-1.0.3.tgz","fileCount":33,"unpackedSize":37082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffIrXCRA9TVsSAnZWagAADHAQAKCRcSZlpuopcy1qTGPo\nW8EgGXsFRsxranE9SSAKnP9fnsENV68rPSx1TO/JXLnGX3eL9EszhvUMalnn\n9vafhyS+Xz411yoj7P67fCHX0XU30GidsuJd7H1INRnlFAb9Zl7UuutiFkwc\nFnVU9hhKFiBXuz5tT7L+Fy8gU4OoICHbP1ieSyDGuI6/L+3QkFzZ8G73Cl+F\nEIJm+53uZrscFpuODJf9rm9rVYDif60J4mXdrAZoJurMfPw0iiC6/9Y/NeDQ\nQg18kejLttacRruXUJix1R+VmYk0w/BOq7xKaYVzTuZxu0cL3aUKD8nQfWfa\nTIx6nhve/6SKKh7wodoaluPaTv+t9wYlfY6E8SBuTlMsvw0RnxSC0WPhhxzH\n5PKge5Rwp+qXNlqPBHqunJaR0lBrJra/s+mUJHsQf7Hqyl178dqjU2j6CpYp\n1HFMS1fvaYxNJU8Oo1+TGYBcK319wv8Uj8JftJ13Zx8uedfdZQNuzuPtv+Kf\nZ8Vnyuyi08wQr+rYY4cgoSlS5n9lz+nwh/Nu2ItDtp/mhgXLdXk2PHAmIAIN\nuGSZ/Tq3VH6p0JFpn7xRpcXo/Tk2h/IvWYCbTSPVdNT8tmYsXJ+o0qRbMt8p\nXMIMJSyP7PXxBrL8wd9TE27iPwFQJmws0BrjIC5BArnojDUQUONFFWwMf5Vk\nbn1L\r\n=dV6I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHJdlBhRG0dR79IjGKKyOT6tn84tjlOaBy+KxJcrNOrkAiAdGipD7ZQTnAglvp1nKS1xgzbDEPz0NfjFoItKmyIpOg=="}]},"maintainers":[{"name":"kobi.anyvision.co","email":"kobi@anyvision.co"},{"name":"rnachmany","email":"rnachmany@anyvision.co"},{"name":"ozb","email":"ozb@anyvision.co"}],"_npmUser":{"name":"ozb","email":"ozb@anyvision.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-guide_1.0.3_1601997526594_0.3876796892816776"},"_hasShrinkwrap":false},"1.0.4":{"name":"@anyvision/style-guide","version":"1.0.4","description":"Anyvision Style Guide Library","main":"index.scss","repository":{"type":"git","url":"git+https://github.com/AnyVisionltd/anv-ui-style-guide.git"},"scripts":{"test-jenkins":"echo 'No Tests'"},"author":"","license":"MIT","bugs":{"url":"https://github.com/AnyVisionltd/anv-ui-style-guide/issues"},"homepage":"https://github.com/AnyVisionltd/anv-ui-style-guide#readme","dependencies":{"node-sass":"^4.13.1","normalize.css":"^8.0.1"},"gitHead":"e0dab44ced877c493b4cd910064e55ac5bb696db","_id":"@anyvision/style-guide@1.0.4","_nodeVersion":"12.17.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-zga3vCY/pbJ/F7ETlJPsAe/rayklW7qXqDjjbIiLihm8sJVB6fZi7AOZG78DX/2KOEQ4bCBqMC55IojV3W1zog==","shasum":"dc242bdb9acb884fe7aeeb1aa6315d4936896aff","tarball":"https://registry.npmjs.org/@anyvision/style-guide/-/style-guide-1.0.4.tgz","fileCount":33,"unpackedSize":37111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffJWKCRA9TVsSAnZWagAAEFwP/0eVW4ctEW84MAdP0UMd\nPxtlMqimcs5GTLrh6JtAH22RPstUq6m0n9AmFxAOzuzUuLPNMAnKDqRe7jIz\n9rCKFppQgKczn7qtsEZAdG1Ajyw4V38xBkAjQQUO2VnqrPa4zzEo89r3YnZ6\nIg5xRPWFMHl7X5n/KF63GRjheIe7fU9rqXL8AwNQhwE4/441ewN6IEcp1ALZ\nU9hzFolhasdsKJ4DERTQL3dFISm9ro7hCxEbkBtpgCZ9+wPRJlgFgC0Q+ODd\nzeAJcMs4tk74xC9XqOwUuRMIyY6mHKgVS/xe0dhXW5iG34fXbVLJrXIp9MzW\nJwdPEMvAvtBhn3lqgQpj7ZXB5+LOrEdQmr8ZHkNs874c3gH29JYpS5TGGG1U\nD+um+o28Zb06fK/RMkD4qzJyOXgYXWodA79QS7HiIDlv0n2CMPKNg6xi7+V7\nQjBUInL66lm5+r6FE/MS4Xp/X+bIOI6KXNlSgVnyFtwKc0464+0yaOrumpO5\nr57wtgngRtUv+b7CqhYur/GPF8poc10xootdJKsgR2nA3wbkeh2LeKOC28+x\nH3qXlYTbkOt0tcK4IT0EH+YkS/INdMKaDxVO/0f30KbW8tBuZUxUzQqD9qzX\nlaAqRshXTbysVTAfAgJUBTREDUa1mOAD58nJj4WZXI0xCzjV3VWE2pmVxCw2\n2Jq2\r\n=IWnU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDm7VyweOmROrHkPoLZzOsJcrQ/0sc2epLob2+wPlpFHgIhALpBcysS2dpSfpaIRoomcun3EMAWqq2ai39XOXlbtFci"}]},"maintainers":[{"name":"kobi.anyvision.co","email":"kobi@anyvision.co"},{"name":"rnachmany","email":"rnachmany@anyvision.co"},{"name":"ozb","email":"ozb@anyvision.co"}],"_npmUser":{"name":"ozb","email":"ozb@anyvision.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-guide_1.0.4_1602000265767_0.7176291279315734"},"_hasShrinkwrap":false}},"maintainers":[{"name":"kobi.anyvision.co","email":"kobi@anyvision.co"},{"name":"rnachmany","email":"rnachmany@anyvision.co"},{"name":"ozb","email":"ozb@anyvision.co"}],"description":"Anyvision Style Guide Library","homepage":"https://github.com/AnyVisionltd/anv-ui-style-guide#readme","repository":{"type":"git","url":"git+https://github.com/AnyVisionltd/anv-ui-style-guide.git"},"bugs":{"url":"https://github.com/AnyVisionltd/anv-ui-style-guide/issues"},"license":"MIT","readme":"# Anyvision Design System\nThis library design to make the user much more easier to work with the design system of Anyvision.\n
\n
\nWhat is the goal of this project?\n
\n
\nNow days to change the current application theme takes long time and because of that this repo became live.\n
\nAll you have to do now is just copy your new colors to you'r project and BOOM this works.\n\n\n## Contents\n1. [Installation](#installation)\n2. [Usage](#usage)\n3. [Functions & Mixins](#functions--mixins)\n4. [Fonts](#fonts)\n5. [Override](#override)\n6. [Extensions](#extensions)\n7. [Utils](#utils)\n\n## Installation\nUse the package manager npm.\n\n```\nnpm i @anyvision/style-guide --save\n```\n\n## Usage\n#### Access from scss\n```scss\n@import '~@anyvision/style-guide';\n\n.header { \n background-color: av-color(trueblack);\n}\n``` \n\n#### Access from js\n```js\nimport colors from '@anyvision/style-guide'\n```\n\n## Functions & Mixins\nThis section will contain the available functions and the way to use them\n
\nand their default value.\n\n* [av-color](#av-color) \n* [av-opacity](#av-opacity)\n* [av-size](#av-size)\n* [av-space](#av-space)\n* [av-z-index](#av-z-index)\n* [av-font-size](#av-font-size)\n* [av-font-weight](#av-font-weight)\n* [av-elevation](#av-elevation)\n\n### av-color\nThis function will return the color HEX of the given parameter as CSS variable.\n
\nThe function can get 2 parameters, the key of the requested color and the opacity.\n
\nIn case of using the opacity parameter the color value will be as RGBA.\n
\n\n#### Values\n##### Primary\nUsed to display the main colors of thee application\n-  `primary` - `#3e7afc` `rgb(62, 122, 252)`\n-  `secondary` - `#02234b` `rgb(2, 35, 75)`\n-  `accent` - `#19e7fc` `rgb(25, 231, 252)`\n-  `decorative` - `#f43aac` `rgb(244, 58, 172)`\n\n##### Native\nUsed for native styles like shadow and etc...\n-  `purewhite` - `#ffffff` `rgb(255, 255, 255)`\n-  `trueblack` - `#010a14` `rgb(1, 10, 20)`\n\n##### Content\nUsed in surfaces, Icons, Typography and any other UI elements\n-  `surface` - `#fcfcff` `rgb(255, 254, 254)`\n-  `content` - `#021d3d` `rgb(2, 29, 61)`\n\n##### Status\nUsed for showing the user the current status of a situation\n-  `success` - `#00d0a0` `rgb(0, 208, 160)`\n-  `alert` - `#ffc400` `rgb(255, 196, 0)`\n-  `error` - `#d50000` `rgb(213, 0, 0)`\n\n##### Additional\nUsed for content differentiate (charts, watch lists, avatars...)\n-  `ac-sirius` - `#55efc4` `rgb(85, 239, 196)`\n-  `ac-earth` - `#00b894` `rgb(0, 184, 148)`\n-  `ac-procyon` - `#ffeaa7` `rgb(255, 234, 167)`\n-  `ac-sun` - `#fdcb6e` `rgb(253, 203, 110)`\n-  `ac-canopus` - `#81ecec` `rgb(129, 236, 236)`\n-  `ac-achernar` - `#00cec9` `rgb(0, 206, 201)`\n-  `ac-altair` - `#fab1a0` `rgb(250, 177, 160)`\n-  `ac-antares` - `#e17055` `rgb(225, 112, 85)`\n-  `ac-vega` - `#74b9ff` `rgb(116, 185, 255)`\n-  `ac-betelgeuse` - `#0984e3` `rgb(9, 132, 227)`\n-  `ac-aldebaran` - `#ff7675` `rgb(255, 118, 117)`\n-  `ac-pollux` - `#d63031` `rgb(214, 48, 49)`\n-  `ac-rigel` - `#a29bfe` `rgb(162, 155, 254)`\n-  `ac-agena` - `#6c5ce7` `rgb(108, 92, 231)`\n-  `ac-spica` - `#fd79a8` `rgb(253, 121, 168)`\n-  `ac-mimosa` - `#e84393` `rgb(232, 67, 147)`\n\n\nDo:\n\n```scss\n.my-class {\n color: av-color(primary);// will return var(--primary, #3e7afc)\n background-color: av-color(secondary, opacity(ghost));// will return var(--secondary, rgba(2, 35, 75, var(--ghost, 0.05)))\n border-color: av-color(primary, .5);// will return var(--secondary, rgba(2, 35, 75, 0.5))\n}\n```\n\nDont:\n\n```scss\n.my-class {\n color: rgba(av-color(primary), .5);\n}\n\n.my-other-class {\n color: av-color(no-such-variable);// will throw compile error\n}\n```\n\n### av-radius\nThis variables are manage to display the relevant `border-radius` as needed.\n
\nThe default value is in `px` to change the measure unit change the parameter `$border-radius-measure-unit`.\n
\n\nDefault value - `base`.\n\n#### Values\n```\ntidy: 4,\nbase: 8,\nround: 16,\ncurvy: 24,\n```\n\nDo:\n\n```scss\n.my-class {\n border-radius: av-radius(tidy);// will return var(--tidy, 4px)\n}\n\n.my-other-class {\n border-radius: av-radius();\n}\n```\n\nDont:\n\n```scss\n.my-class {\n width: av-radius(tidy);\n}\n\n.my-other-class {\n border-radius: av-radius(no-such-variable);\n}\n```\n
\n\n### av-opacity\nThis function will return the opacity number value of the given parameter as CSS variable.\n
\n\n#### Values \n```\nhigh: 1,\nmedium: 0.6,\ndisabled: 0.34,\ndivider: 0.12,\nghost: 0.05\n```\nDo:\n\n```scss\n.my-class {\n opacity: av-opacity(ghost);// will return var(--ghost, 0.05)\n color: av-color(primary, av-opacity(ghost));// will return rgba(2, 35, 75, var(--ghost, 0.05))\n}\n```\n\nDont:\n\n```scss\n.my-class {\n opacity: av-opacity(no-such-variable);// will throw compile error\n}\n```\n
\n\n### av-size\nThis variables are manage to display the relevant `width` as needed.\n
\n\n#### Values\n\n```\nsz-8: 8,\nsz-16: 16,\nsz-24: 24,\nsz-32: 32,\nsz-40: 40,\nsz-48: 48,\nsz-56: 56,\nsz-64: 64,\nsz-80: 80,\nsz-96: 96,\nsz-144: 144,\nsz-240: 240,\nsz-320: 320,\nsz-480: 480,\nsz-640: 640,\nsz-960: 960\n``` \n\nDo:\n\n```scss\n.my-class {\n width: av-size(sz-16);// will return var(--sz-16, 16px)\n}\n```\n\nDont: \n\n```scss\n.my-class {\n height: av-size(sz-16);\n margin: av-size(sz-16);\n padding: av-size(sz-16);\n}\n\n.my-other-class {\n width: av-size(no-such-variable);// will throw compile error\n}\n```\n
\n\n### av-space\nThis variables are manage to display the relevant `margin` or `padding` as needed.\n
\nDefault value - `base`.\n
\n
\n\n#### Values\n```\nmicro: 4,\ntiny: 8,\nbase: 16,\nmedium: 24,\nloose: 32,\nlarge: 48,\ngrand: 64,\ngiant: 80\n```\n\nDo:\n\n```scss\n.my-class {\n margin: av-space(tiny);// will return var(--tiny, 8px)\n padding: av-space();\n}\n```\n\nDont: \n\n```scss\n.my-class {\n width: av-space(tiny);\n height: av-space();\n}\n\n.my-other-class {\n width: av-space(no-such-variable);// will throw compile error\n}\n```\n
\n\n### av-z-index\nthis function will return relevant z-indexes.\n
\n
\n\n#### Values\n```\n raised: 1,\n navigation: 10,\n popup: 20,\n notification: 30,\n important: 40\n```\n\nDo:\n\n```scss\n.my-class {\n z-index: av-z-index(raised);\n}\n```\n\n
\n\n### av-font-size\nThis function will return the font size number value of the given as REM.\n
\nDefault value - `base`.\n
\n\n#### Values\n```\nmicro: 10,\ntiny: 12,\nsmall: 14,\nbase: 16,\nmedium: 20,\nlarge: 24,\nx-large: 32,\ngrand: 48,\ngiant: 60,\nheader: 96\n```\n\nDo:\n\n```scss\n.my-class {\n font-size: av-font-size();// will return 1rem\n}\n\n.my-other-class {\n font-size: av-font-size(x-large);// will return 2rem\n}\n```\n\nDont: \n\n```scss\n.my-class {\n font-size: av-font-size(no-such-variable);// will throw compile error\n}\n```\n
\n\n### av-font-weight\nThis function will return the font weight number value of the given parameter.\n
\nDefault value - `normal`.\n
\n\n#### Values\n```\nlighter: 300,\nnormal: 400,\nbold: 700\n``` \n\nDo:\n\n```scss\n.my-class {\n font-weight: av-font-weight();// will return 400\n}\n\n.my-other-class {\n font-weight: av-font-weight(bold);// will return 700\n}\n```\n\nDont: \n\n```scss\n.my-class {\n font-weight: av-font-weight(no-such-variable);// will throw compile error\n}\n```\n\n### av-elevation\nThis mixin will return the relevant properties to the given elevation.\n
\nBy default this mixin will return `background-color: av-color(surface);` \n
\neven if the given elevation not exist.\n\nExample: \n```scss\n.my-class {\n @include av-elevation(); // this will return `background-color: av-color(surface);`\n}\n\n.my-other-class {\n @include av-elevation(pop-out);\n // will return -\n // background-color: var(--surface, rgba(2, 36, 77, 0.16));\n // box-shadow: 0 12px 24px 0 var(--trueblack, rgba(1, 10, 20, 0.1));\n}\n```\n\n## Fonts \n\nAny text should use one of the fonts placeholders. \n\nDo:\n\n```scss\n.my-class {\n @extend %av-headline1;\n}\n```\n\nDont: \n\n```scss\n.my-class {\n font-size: av-font-size(small);\n font-weight: av-font-weight(bold);\n}\n```\n\n### Values\n\n#### av-button \n```\n fontSize: 14px;\n fontWeight: 700;\n lineHeight: 0px;\n textTransform: uppercase;\n letterSpacing: 1.34px;\n```\n\n#### av-body1\n```\n fontSize: 16px;\n fontWeight: 400;\n lineHeight: 24px;\n letterSpacing: 0.44px;\n```\n\n\n#### av-body2\n```\n fontSize: 14px;\n fontWeight: 400;\n lineHeight: 22px;\n letterSpacing: 0.24px;\n```\n\n#### av-caption\n```\n fontSize: 12px;\n fontWeight: 400;\n lineHeight: 16px;\n letterSpacing: 0.4px;\n```\n\n#### av-headline1\n```\n fontSize: 96px;\n fontWeight: 300;\n lineHeight: 145px;\n letterSpacing: -1.54px;\n```\n\n#### av-headline2\n```\n fontSize: 60px;\n fontWeight: 300;\n lineHeight: 90px;\n letterSpacing: -0.48px;\n```\n\n#### av-headline3\n```\n fontSize: 48px;\n fontWeight: 400;\n lineHeight: 0;\n``` \n\n#### av-headline4\n```\n fontSize: 32px;\n fontWeight: 400;\n lineHeight: 51px;\n letterSpacing: 0.26x;\n```\n\n#### av-headline5\n```\n fontSize: 24px;\n fontWeight: 400;\n lineHeight: 0;\n```\n\n#### av-headline6\n```\n fontSize: 20px;\n fontWeight: 600;\n lineHeight: 0;\n letterSpacing: 0.15x;\n```\n\n#### av-overline\n```\n fontSize: 10px;\n fontWeight: 400;\n lineHeight: 0;\n letterSpacing: 1.5px;\n textTransform: uppercase;\n```\n\n#### av-subtitle1\n```\n fontSize: 16px;\n fontWeight: 700;\n lineHeight: 0;\n letterSpacing: 1.14px;\n```\n\n#### av-subtitle1\n```\n fontSize: 14px\n fontWeight: 600\n lineHeight: 24px\n letterSpacing: 0.1px\n```\n\n\n## Override\nOn this section you can see how to override the default values and theme CSS variables.\n\n\n### Override Theme\nTheme described with [Colors](VARIABLES.md#colors), [Spaces](VARIABLES.md#spaces) and [Border Radius](VARIABLES.md#radius).\n
\nColors the custom properties (variables) are in default define in ``:root`` element.\n
\nTo override the theme default colors, all need to do is create a CSS selector and \n
\nto define new CSS variables.\n
\n\n\nDo:\n``` scss\n:root {\n --primary: #{hexToRGBString(#3e7afc)};\n --secondary: #{hexToRGBString(#02234b)};\n --accent: 255, 255, 255;\n etc...\n}\n\n.my-theme {\n --primary: #{hexToRGBString(#3e7afc)};\n --secondary: #{hexToRGBString(#02234b)};\n --accent: 255, 255, 255;\n etc...\n}\n```\nDont: \n``` scss\n:root {\n --primary: #3e7afc};\n --secondary: #{hexToRGBString(#NOTHEX)};\n --accent: rgb(255, 255, 255);\n etc...\n}\n\n```\n\n### Override Default Values\nTo override the default value, need to create new file for example `my-override-file`.\n
\nOn this file need to declare SCSS variables with the same names as the default\n
\nvalues.\n
\n
\n\nDo:\n``` scss\n// my-override-file.scss\n\n$border-radius-types: (\n tidy: 14,\n base: 18,\n round: 116,\n curvy: 124,\n);\n```\nindex.scss\n``` scss\n@import 'my-override-file';\n@import '~@anyvision/style-guide';\n```\n\nDont: \n``` scss\n// my-override-file.scss\n\n$border-radius-types: (\n tidy: 14,\n base: 18,\n round: 116,\n curvy: 124,\n);\n```\nindex.scss\n``` scss\n@import '~@anyvision/style-guide';\n@import 'my-override-file';\n```\n\n\nOn this way it will override `border-radius-sizes`.\n\n## Extensions\nOn this section will be the documentation of the available extensions.\n
\nALL THE EXTENSIONS MUST COME BEFORE THE IMPORT OF THE STYLE GUIDE!!\n\n* [Reset](#reset)\n* [Normalize](#normalize)\n* [av-normalize](#av-normalize)\n\nHow to `@import` all the extensions?\n\n`@import '@anyvision/style-guide/extensions';`\n\n### Reset\nWe use https://gist.github.com/DavidWells/18e73022e723037a50d6 CSS\n
\nThe goal of a reset stylesheet is to reduce browser inconsistencies in things like\n
\ndefault line heights, margins and font sizes of headings, and so on.\n\nDo:\n```scss\n@import '@anyvision/style-guide/extensions/_reset.scss;\n@import '@anyvision/style-guide';\n```\n\nDont:\n```scss\n@import '@anyvision/style-guide';\n@import '@anyvision/style-guide/extensions/_reset.scss;\n```\n\n### Normalize\nWe use https://necolas.github.io/normalize.css/\n
\nNormalize.css makes browsers render all elements more consistently and in line\n
\nwith modern standards. It precisely targets only the styles that need normalizing.\n\nDo:\n```scss\n@import '@anyvision/style-guide/extensions/_normalize.scss;\n@import '@anyvision/style-guide';\n```\n\nDont:\n```scss\n@import '@anyvision/style-guide';\n@import '@anyvision/style-guide/extensions/_normalize.scss;\n```\n\n### av-normalize\nThis is the common usages of the css styles in the Anyvision projects.\n\nDo:\n```scss\n@import '@anyvision/style-guide/extensions/_av-normalize.scss;\n@import '@anyvision/style-guide';\n```\n\nDont:\n```scss\n@import '@anyvision/style-guide';\n@import '@anyvision/style-guide/extensions/_av-normalize.scss;\n```\n\n## Utils\n\n### set-as-var\nThis function will return the given key as `--key`.\n
\nUse only to generate css variables!\n\nDo:\n```scss\n// lets say $key = my-key\n@function my-function($key) {\n $my-css-var: set-as-var($key);// will return --my-key\n //...\n @return var($my-css-var, #fff);\n}\n```\n\nDont:\n```scss\n// lets say $key = my-key\n@function my-function($key) {\n $summary: set-as-var($key);\n //...\n @return $summary - 2px; \n}\n```\n\n### get-number\nThis function will return from a given map and a given key a number value\n
\nand if the value is not a number the function will throw an error.\n\nDo:\n```scss\n$my-map: (\n key1: 1,\n key2: '2'\n);\n\n// lets say $key = key1\n@function my-function($key) {\n $my-css-var: get-number($my-map, $key);// will return 1\n //...\n}\n```\n\nDont:\n```scss\n$my-map: (\n key1: 1,\n key2: '2'\n);\n\n// lets say $key = key2\n@function my-function($key) {\n $my-css-var: get-number($my-map, $key);// will throw an error\n //...\n}\n```\n\n### rem\nThis function will return a px value as rem.\n\nDo:\n```scss\n.my-class {\n font-size: rem(16px); //will return 1rem\n}\n```\n\nDont:\n```scss\n.my-class {\n font-size: rem(16cm); //will return 1rem\n}\n```\n\n### hex-to-rgb-string\nThis function will return the red, green, blue values of an Hex color.\n\nDo:\n```scss\n.my-class {\n --my-color: hex-to-rgb-string(#ffffff);\n --my-other-color: unquote(hex-to-rgb-string(#ffffff));\n}\n```\n\nDont:\n```scss\n.my-class {\n --my-color: hex-to-rgb-string(#not-hex-color);\n}\n```\n","readmeFilename":"README.md"}