{"_id":"@biz-storefront/hdt-scheme","_rev":"2-5d4453caa44fbaa8ef6bdcc75c7181e0","name":"@biz-storefront/hdt-scheme","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@biz-storefront/hdt-scheme","version":"1.1.0","description":"Histogram driven themes style scheme","main":"index.js","scripts":{"build":"style-dictionary build","test":"echo \"Error: no test specified\" && exit 1"},"keywords":["hdt","css","colors","histogram","style"],"author":{},"license":"ISC","devDependencies":{"style-dictionary":"^2.8.1"},"_id":"@biz-storefront/hdt-scheme@1.1.0","dist":{"shasum":"5aaa2270d93a80b496bb117af59fc3f958e21bab","integrity":"sha512-NOmV9QOVMBLDd1cjadmRpi+wlnqMr55/TX2xpJNihcBUqEfbEDlfQPf0BXt0IfTcC12JS/2DXUiELkaRA2OKtg==","tarball":"https://registry.npmjs.org/@biz-storefront/hdt-scheme/-/hdt-scheme-1.1.0.tgz","fileCount":16,"unpackedSize":5910,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfafC8CRA9TVsSAnZWagAAx9MP/2Dtmm/3Eb+OoxE+0wuz\nAEM99MgkeeUK7bIVShfwQUGApDG02WntsqK2bq/rgp6BCjB8JSVCXNW/2J3c\ngT14Zm9nEzw+RfN63XwwVV6jLHSYZoXsiqwdqYtVWOLe1861jtLSjbiEUXZL\nuxzOJftJqJnCwoQxeM494Z9Crg8tkzNB/u9Ow8E2XtNw9volfzNaU01wOtM6\nPNoYs53aECvIG2OoksKI81B+m+/4ql67TRd43SiMj/Qkqb7IqOI9qeQ9XU8p\n9KTjVb7IsaUFxVqSFjlA9il2oEwUOItY7rNsiNa2E/B7CY4roU8vXEBYLO6X\nwG1tmz80pE2ycA9oh7yivE+54c+TObsCOiNfwUoY1w3wgG1Yt6ymjM4RN8z+\n2brVAX8bTCLJmWoLc+DCJ+tk45GrH06/4wcgDJTNSbA/qLE9uNFa4ze6kb3v\nyhbfBD87dMVEpOxQab2OR0770PN28YurriTDTDouMT//CYmz6sgC6+TB/T2D\n/9nX6ya8XCVy5BLA573i181c09Z5q1mjj3wQ9B6glEQtw75sauP1NKIELSgf\nrRFEm/hJkur0//9OE6v0pKF3xadlLp0P2MHPGUQxpmVXZaQJGHGFSEqoUcFb\n9Dnmph4PM1fXQz9X2vaun7oeuB5Xmg2K+eW9xy924WhYwvFqn/yj6eFK/fjU\nHYI7\r\n=72ra\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAPYtEm2MpwmJQX845Ug2lZTy83O+0kvhD1nX5orJAAJAiEAsu9kn5WD2qi69fzrc73NnUhUdFsdGlMr8n0dkRxrgkE="}]},"maintainers":[{"name":"manobi","email":"manobi.oliveira@gmail.com"},{"name":"bizcommerce","email":"gabriel.oliveira@bizcommerce.com.br"}],"_npmUser":{"name":"bizcommerce","email":"gabriel.oliveira@bizcommerce.com.br"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hdt-scheme_1.1.0_1600778427744_0.28625632829766157"},"_hasShrinkwrap":false}},"time":{"created":"2020-09-22T12:40:27.431Z","1.1.0":"2020-09-22T12:40:27.833Z","modified":"2022-04-04T19:15:35.573Z"},"maintainers":[{"email":"dev@bizcommerce.com.br","name":"bizcommerce"}],"description":"Histogram driven themes style scheme","keywords":["hdt","css","colors","histogram","style"],"author":{},"license":"ISC","readme":"# Histogram driven themes - V2\n\nA colour scheme inspired by photography knowledge, to make your styles remarkable, composable, accessible and \"themable\".\n\n▁▁▁▁▁▂▂▂▂▂▃▃▃▃▃▅▅▅▅▅▇▇▇▇▇\n\n**brightness** • **highlight** • **midtone** • **shadow** • **darkness** + **cta**\n\n-----------------------------------------------------------------------------\n\n## Usage\nWe recomend to declare your variables in a style html tag inside the ```<head>``` of your document, so can be \"SSRed\" from any serve-side language.\n\n```html\n<style>\n:root {\n    --brightness: #fff;\n    --highlight: #f9f9f9;\n    --midtone: #666;\n    --shadow: #404040;\n    --darkness: #2d2d2d;\n    --cta: #da2f2f;\n    --root-font: 'Lato', sans-serif;\n    --root-font-2: 'Open Sans', sans-serif\n}\n</style>\n```\n\nThem import the hdt-scheme declaration to use with your preprocessor:\n```less\n@import 'hdt-schemes/build/less/_variables.less'\nbutton {\n    background: @shadow;\n    color: @highlight;\n}\n```\n\nLearn more:\n* What is a histogram?\n* Why not X?\n\n### Accessible\nYou don't have remember to what color each variable is associated, you only have know that a button with background **darkness** and text color **brightness** will have a very intense contrast.\n\nIn the same manner it's easy to predict that a paragraph with color **shadow** in a **darkness** background would be really hard to read.\n\nBy reading a code like these, your brain will be able render the visuals,  without having to leave your editor. Even a color blind developer, can understand how the visual would work, without worrying about the colour pallet.\n\n## Install\n```shell\nnpm install hdt-scheme\n```\n\n## Why would you use HDT?\n\n> There are only two hard things in Computer Science: cache invalidation and naming things. -- Phil Karlton\n\nAs a project grows you can start to hate yourself when a appropriate color scheme have not being well chosen.\n\n**HDT v2 spec** recommends the usage of the following abstract css vars, when developing digital products with themable capabilities:\n**brightness** • **highlight** • **midtone** • **shadow** • **darkness** + **cta**\n\nPhotographers around the world have used cameras built-in and image editing software histograms features, to create visually balanced photos for years. \n**Why not bring these concepts to web design?**\n\n## What is a histogram?\nA histogram can tell if a photo have too much light or too much dark elements, it empower the image producer with data to change the aspec if he wants to. A image histogram is a graph, that shows the tonal distribution in a digital image.\n\nUsally it's represented by blacks, shadows, midtones, highlights, whites. But since we want to keep our variables abstract we have replaced blacks and whites with darkness and brightness.\n\nBrightness and darkness are usually synonyms to white and black, but you must be able to redefine the limit of tone allowed in your theme.\n\nPure black like #000000 or white like #ffffff, might never be used in one of your current designs so feel free to define something like brown as your darkness and yellow as brigthness.\n\n\n## Why not X?\n\nWe consider the following variable naming conventions actually a bad pratices:\n\n### Numeral\ncolor1\nbg2\n\n### Freezed\npurple\ndarkBlue\n\n### Section based\nheaderColor\nfooterBackground","readmeFilename":"readme.md"}