{"id":13524003,"url":"https://github.com/mrmlnc/material-color","last_synced_at":"2025-04-08T04:17:47.304Z","repository":{"id":19006985,"uuid":"22229570","full_name":"mrmlnc/material-color","owner":"mrmlnc","description":":high_brightness: The colour palette, based on Google's Material Design, for use in your project.","archived":false,"fork":false,"pushed_at":"2017-07-28T20:06:13.000Z","size":62,"stargazers_count":133,"open_issues_count":1,"forks_count":10,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-14T06:36:02.095Z","etag":null,"topics":["colour-palette","css","google","google-material","less","material","scss","stylus"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mrmlnc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-07-24T20:20:16.000Z","updated_at":"2023-08-24T16:05:00.000Z","dependencies_parsed_at":"2022-09-25T07:24:21.820Z","dependency_job_id":null,"html_url":"https://github.com/mrmlnc/material-color","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrmlnc%2Fmaterial-color","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrmlnc%2Fmaterial-color/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrmlnc%2Fmaterial-color/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrmlnc%2Fmaterial-color/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrmlnc","download_url":"https://codeload.github.com/mrmlnc/material-color/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247773721,"owners_count":20993639,"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":["colour-palette","css","google","google-material","less","material","scss","stylus"],"created_at":"2024-08-01T06:01:06.046Z","updated_at":"2025-04-08T04:17:47.271Z","avatar_url":"https://github.com/mrmlnc.png","language":"CSS","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Material Design Color\n\n\u003e The colour palette, based on [Google's Material Design](http://www.google.com/design/spec/style/color.html), for use in your project.\n\n## Installation\n\n  * git: `git clone git://github.com/mrmlnc/material-color.git`;\n  * bower: `bower install --save material-color`\n  * npm: `npm install --save material-design-color`;\n\n## Supported languages\n\nSupport for all popular css preprocessors:\n\n  * [Less](http://lesscss.org/)\n  * [Sass](http://sass-lang.com/)\n  * [Stylus](http://learnboost.github.io/stylus/)\n\n## How to use\n\nJust import the file, whitch includes variables colors in your project.\n\n```less\n// Less, SCSS, Stylus\n@import \"lib/material-color\";\n```\n\n**The build variable:**\n\n`(@|$)clr-(color)-(range)`\n\n  * **(@|$)** - Sign of the variable in the preprocessor.\n  * **(color)** - Color.\n  * **(range)** - 100, 300, 700, A100 and so on. The default value of 500.\n\n**Example:**\n\n```less\n@import \"lib/material-color\";\n\n.example-1 {\n  background-color: @clr-blue;\n}\n\n.example-2 {\n  background-color: @clr-green-700;\n}\n```\n\n**Additional variables**\n\nAdditional variables for text based on [Material Design Typography](http://www.google.com/design/spec/style/typography.html).\n\n```\n// Typography\nclr-ui-display-4\nclr-ui-display-3\nclr-ui-display-2\nclr-ui-display-1\nclr-ui-headline\nclr-ui-title\nclr-ui-subhead-1\nclr-ui-body-2\nclr-ui-body-1\nclr-ui-caption\nclr-ui-menu\nclr-ui-button\n```\n\n**Mixin**\n\nThere are provided lists of variables for looping through the colors. In order to use this functionality you must import file and call mixin(s):\n\n```less\n@import \"mixins/class-generator\";\n\n// Less\n.material-color-class(\"red\"); // another color or \"all\"\n.material-color-class(\"red\", background-color); // another property or empty (default: color)\n\n// SCSS\n@include material-color-class(\"red\"); // another color or \"all\"\n@include material-color-class(\"red\", background-color); // another property or empty (default: color)\n\n// Stylus\nmaterial-color-class('red'); // another color or 'all'\nmaterial-color-class('red', background-color); // another property or empty (default: color)\n```\n\n## Thanks\n\n  * **Ali Amini** \u0026lt;aliamini.af@gmail.com\u0026gt; ([@AliAmini](https://github.com/AliAmini))\n  * **Chris Pawlukiewicz** \u0026lt;hi@paynoattn.com\u0026gt; ([@paynoattn](https://github.com/paynoattn))\n\n## Changelog\n\nSee the [Releases section of our GitHub project](https://github.com/mrmlnc/material-color/releases) for changelogs for each release version.\n\n## License\n\nThis software is released under the terms of the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrmlnc%2Fmaterial-color","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrmlnc%2Fmaterial-color","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrmlnc%2Fmaterial-color/lists"}