{"id":15093048,"url":"https://github.com/angular/material-tools","last_synced_at":"2025-10-06T11:30:55.155Z","repository":{"id":51080692,"uuid":"63349117","full_name":"angular/material-tools","owner":"angular","description":"Tools for AngularJS Material","archived":true,"fork":false,"pushed_at":"2021-05-24T20:00:05.000Z","size":567,"stargazers_count":47,"open_issues_count":11,"forks_count":11,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-09-26T11:03:14.407Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/angular.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null}},"created_at":"2016-07-14T15:41:29.000Z","updated_at":"2024-03-20T16:35:35.000Z","dependencies_parsed_at":"2022-08-19T06:02:01.520Z","dependency_job_id":null,"html_url":"https://github.com/angular/material-tools","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fmaterial-tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fmaterial-tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fmaterial-tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fmaterial-tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angular","download_url":"https://codeload.github.com/angular/material-tools/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219877267,"owners_count":16554853,"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-09-25T11:03:15.718Z","updated_at":"2025-10-06T11:30:49.835Z","avatar_url":"https://github.com/angular.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-material-tools\n\nTool that generates custom [AngularJS Material](http://github.com/angular/material) builds, consisting of:\n\n*  JS files for a set Material components\n*  CSS for a set of components\n*  Static theme files\n*  Layout CSS, separated from the specific component styling\n\n## Quick Links\n- [Installation](#installation)\n- [Available Options](#options)\n- [CLI Usage](#cli-usage)\n- [NodeJS Usage](#nodejs-usage)\n- [Theme Building](#theming)\n- [Development Environment](#development)\n\n## Installation\n\n- `npm install angular-material-tools --save`\n\n## Usage\n\n`material-tools` can be easily used from the **command-line** or from your own custom **NodeJS** code. \nThe build tools also include a CLI, which can be used by installing the tools globally.\n- `npm install -g angular-material-tools`\n\n### Options\n\n|          Name           |    Type     |                             Description                                    |\n| ----------------------- | ----------- | -------------------------------------------------------------------------- |\n| `destination` (*)       | `string`    | Target location for the Material build.                                    |\n| `modules`               | `string[]`  | Modules that should be part of the build.\u003cbr/\u003e All modules will be built if nothing is specified.                                                                                                           |\n| `version`               | `string`    | Version of AngularJS Material.\u003cbr/\u003e If set to `local`, it will take the local installed AngularJS Material version from the node modules. \u003cbr/\u003e If set to `latest`, the latest version will be downloaded.                                                           |\n| `theme`                 | `MdTheme`   | Material Theme to be used to generate a static theme stylesheet.           |\n| `themes`                | `MdTheme[]` | Multiple Material Themes, which are used to generated a static stylesheet. |\n| `cache`                 | `string`    | Directory for caching the downloads                                        |\n| `mainFilename`          | `string`    | Name of the entry file that will be loaded to figure out the dependencies. |\n| `destinationFilename`   | `string`    | Name to be used as a base for the output files.                            |\n\n\u003e **Note:** The options can be set in a JSON file whose path can be passed to the CLI or API.\n\n\n### CLI usage\n\nTo create a custom AngularJS Material build with the command-line interface (CLI), you can pass the\n[options](#options) as CLI arguments.\n\nAll possible options in the CLI can be listed with the command:\n\n  - `material-tools --help`\n\nThe CLI includes the following commands:\n\n|                Name                 |              Arguments              |                    Description                 |\n| ----------------------------------- | ----------------------------------- | ---------------------------------------------- |\n| `\u003carguments\u003e`                       | Everything from [options](#options) | Default command that builds all files.         |\n| `material-tools js \u003carguments\u003e`     | Everything from [options](#options) | Only builds the JS files.                      |\n| `material-tools css \u003carguments\u003e`    | Everything from [options](#options) | Only builds the CSS files                      |\n| `material-tools theme \u003carguments\u003e`  | Everything from [options](#options) \u003cbr/\u003e\u003cbr/\u003e `--name` \u003cbr/\u003e `--primary-palette` \u003cbr/\u003e `--accent-palette` \u003cbr/\u003e `--warn-palette` \u003cbr/\u003e `--background-palette` \u003cbr/\u003e `--dark` | Builds the theme files for a single theme. |\n| `material-tools themes \u003carguments\u003e`  | Everything from [options](#options) \u003cbr/\u003e\u003cbr/\u003e `--name` \u003cbr/\u003e `--primary-palette` \u003cbr/\u003e `--accent-palette` \u003cbr/\u003e `--warn-palette` \u003cbr/\u003e `--background-palette` \u003cbr/\u003e `--dark` | Builds the theme files for an array of themes. |\n\n**Examples**\n```bash\nmaterial-tools --destination ./output --modules list datepicker autocomplete --version 1.2.1\n```\n\nIf you do not specify a version, the CLI will automatically use the installed AngularJS Material version from\nyour local `node_modules` directory.\n```bash\nmaterial-tools -d ./output -m list\n```\n\n----\n\n### NodeJS usage\n\n```js\nconst MaterialTools = require('angular-material-tools');\n\nlet tools = new MaterialTools({\n  destination: './output',\n  version: '1.2.1',\n  modules: ['menu', 'checkbox'],\n  theme: {\n    primaryPalette: 'indigo',\n    accentPalette: 'purple',\n    warnPalette: 'deep-orange',\n    backgroundPalette: 'grey'\n  }\n});\n\nconst successHandler = () =\u003e console.log('Build was successful.');\nconst errorHandler = error =\u003e console.error(error);\n\ntools.build().then(successHandler).catch(errorHandler);         // Build all JS/CSS/themes\n\ntools.build('js').then(successHandler).catch(errorHandler);     // Only build the JS.\ntools.build('theme').then(successHandler).catch(errorHandler);  // Only build the theme.\ntools.build('css').then(successHandler).catch(errorHandler);    // Only build the CSS\n\n// You can also build a subset of files.\ntools.build('css', 'js');   // Builds both the CSS and the JS.\n```\n\n#### Output Files\n\n|                   File                   |                                   Description                                        |\n| ---------------------------------------- | ------------------------------------------------------------------------------------ |\n| `angular-material.js`                    | Contains the modules that you specified, as well as their dependencies.              |\n| `angular-material.css`                   | CSS files that has the modules you selected, as well as the layout CSS and core CSS. |\n| `angular-material.layout-none.css`       | Only contains the modules that you selected, in addition to the core structural CSS. |\n| `angular-material.themes.css`            | Static generated theme stylesheet, which includes all generated themes.              |\n| `angular-material.layouts.css`           | Standalone Layout stylesheet with class selectors                                    |\n| `angular-material.layout-attributes.css` | Standalone Layout stylesheet with attribute selectors                                |\n\n----\n\n### Theming\nDevelopers are able to easily build a static theme stylesheet\n\n```js\n{\n  destination: './myBuild',\n  version: '1.2.1',\n  modules: ['list'],\n  theme: {\n    primaryPalette: 'blue',\n    accentPalette: 'grey'\n  }\n}\n```\n\nIn some cases you may want to have multiple themes in your application.\n```js\n{\n  themes: [{\n    name: 'firstTheme',\n    primaryPalette: 'red'\n  }, {\n    name: 'secondTheme',\n    primaryPalette: 'blue'\n  }]\n}\n```\n\nIt is also possible to use [custom palettes](https://material.angularjs.org/latest/Theming/03_configuring_a_theme)\nfor your static theme.\n\n```js\n{\n  theme: {\n    primaryPalette: 'light-orange',\n    accentPalette: 'blue'\n  },\n  palettes: {\n    'light-orange': {\n      '50': 'FBE9E7',\n      '100': 'FFCCBC',\n      '200': 'FFAB91',\n      '300': 'FF8A65',\n      '400': 'FF7043',\n      '500': 'FF7043',\n      '600': 'F4511E',\n      '700': 'E64A19',\n      '800': 'D84315',\n      '900': 'BF360C',\n      'A100': 'FF9E80',\n      'A200': 'FF6E40',\n      'A400': 'FF3D00',\n      'A700': 'DD2C00',\n      'contrastDefaultColor': 'light',\n      'contrastDarkColors': ['50', '100', '200', '300', '400', 'A100', 'A200'],\n      'contrastStrongLightColors': ['500', '600', '700', '800', '900', 'A400', 'A700']\n    }\n  }\n}\n```\n\nSometimes you want to create a custom palette which is based on another one. \n\u003e Material Tools for AngularJS Material provides an easy way to extend palettes.\n\n```js\n{\n  theme: {\n    primaryPalette: 'darkerRed',\n    accentPalette: 'blue'\n  },\n  palettes: {\n    'darkerRed': {\n      extends: 'red',\n      contrastDefaultColor: 'dark'\n    }\n  }\n}\n```\n\n### Development\n\nIf you've cloned the repo, a quick way to explore NodeJS usages is to *directly* run TypeScript without\ntranspiling processes. Developers can use [ts-node](https://github.com/TypeStrong/ts-node) for this.\n\nInstall a TypeScript compiler (requires `typescript` by default):\n```bash\nnpm install -g ts-node typescript\n```\n\nThen use the command-line to directly run the `debug.ts` sample from the project root:\n```bash\nts-node debug.ts\n```\n\nwhich will generate the output:\n```bash\n[13:37:00]: Successfully built list, core, animate, layout, gestures, theming, palette,\n            datepicker, icon, virtualRepeat, showHide.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular%2Fmaterial-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular%2Fmaterial-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular%2Fmaterial-tools/lists"}