{"id":19388805,"url":"https://github.com/james2doyle/rework-shade","last_synced_at":"2025-11-01T03:04:37.739Z","repository":{"id":9092934,"uuid":"10870389","full_name":"james2doyle/rework-shade","owner":"james2doyle","description":"Lighten and darken plugin for the Rework CSS preprocessing library. Parity with the Stylus version.","archived":false,"fork":false,"pushed_at":"2014-07-17T13:58:10.000Z","size":181,"stargazers_count":12,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T13:45:01.817Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"ewplc/message-focus-nodejs","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/james2doyle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-06-22T18:26:19.000Z","updated_at":"2018-01-29T07:57:33.000Z","dependencies_parsed_at":"2022-08-29T02:00:54.803Z","dependency_job_id":null,"html_url":"https://github.com/james2doyle/rework-shade","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/james2doyle%2Frework-shade","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/james2doyle%2Frework-shade/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/james2doyle%2Frework-shade/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/james2doyle%2Frework-shade/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/james2doyle","download_url":"https://codeload.github.com/james2doyle/rework-shade/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250532102,"owners_count":21446117,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T10:13:46.902Z","updated_at":"2025-11-01T03:04:37.670Z","avatar_url":"https://github.com/james2doyle.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"rework-shade\n================\n\n### Depreciated\n\nCheck out these other color libraries instead.\n\n* [rework-color-function](https://github.com/ianstormtaylor/rework-color-function \"rework-color-function\")\n* [rework-plugin-colors](https://github.com/reworkcss/rework-plugin-colors/ \"rework-plugin-colors\")\n* [rework-color](https://github.com/kristoferjoseph/rework-color \"rework-color\")\n\nIf you wanted to fork this and update it, well please do!\n\nLighten and darken function for the [Rework](https://github.com/visionmedia/rework) CSS preprocessing library.\n\nThis plugin is meant to share both the syntax and results of the stylus version. You can use `shade({color}, +/-{amount})` or the stylus syntax of `lighten|darken({color}, {amount}%)`.\n\n### Usage\n\nInstall the package via NPM.\n\n```shell\nnpm install rework-shade\n```\n\n```css\nbody {\n  padding: 10px;\n  background: shade(rgba(0, 0, 0, 0.5), 5);\n}\n\n/* using points */\n.stuff {\n  color: shade(rgb(0, 200, 50), 1.3);\n}\n\n.bright {\n  background: shade(#004080, 30);\n}\n\n.dark {\n  background: shade(#fff, -50);\n}\n```\n\nyields:\n\n```css\nbody {\n  padding: 10px;\n  background: rgba(13, 13, 13, 0.5);\n}\n\n.stuff {\n  color: rgb(3, 203, 53);\n}\n\n.bright {\n  background: rgb(77, 141, 205);\n}\n\n.dark {\n  background: rgb(128, 128, 128);\n}\n```\n\n### Amount explained\n\nThe amount you put, is the percentage of lightness that you want to increase or\ndecrease the color by. We use HSL and adjust the lightness. The math used is identical to how Stylus handles it.\n\n\n```css\n/* stylus in */\nbody {\n  color: lighten(rgb(0,0,0), 10%);\n}\n```\n\n```css\n/* stylus out */\nbody {\n  color: #1a1a1a; // or rgb(26,26,26)\n}\n```\n\n```css\n/* rework-shades in */\nbody {\n  color: shade(rgb(0,0,0), 10);\n}\n```\n\nyields:\n\n```css\n/* rework-shades out */\nbody {\n  color: rgb(26, 26, 26);\n}\n```\n\n### rework-vars support\n\nJust make sure you run/use rework-vars before shades:\n\n```css\n:root {\n  var-linkColor: #cccccc;\n}\n\nbody {\n  color: shade(var(linkColor), -10);\n  background: shade(rgba(0, 0, 0, 0.5), 10);\n}\n```\n\n```css\n:root {\n  var-linkColor: #cccccc;\n}\n\nbody {\n  color: rgb(179, 179, 179);\n  background: rgba(26, 26, 26, 0.5);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjames2doyle%2Frework-shade","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjames2doyle%2Frework-shade","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjames2doyle%2Frework-shade/lists"}