{"id":18496605,"url":"https://github.com/oddbird/accoutrement","last_synced_at":"2025-10-31T16:30:24.870Z","repository":{"id":38300070,"uuid":"138920393","full_name":"oddbird/accoutrement","owner":"oddbird","description":"Combined Sass Accoutrement tools, with option for individual module imports","archived":false,"fork":false,"pushed_at":"2024-10-01T16:55:11.000Z","size":12310,"stargazers_count":38,"open_issues_count":3,"forks_count":6,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-29T18:48:42.556Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"SCSS","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/oddbird.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"oddbird","open_collective":"oddbird-open-source"}},"created_at":"2018-06-27T18:44:24.000Z","updated_at":"2024-10-21T20:20:44.000Z","dependencies_parsed_at":"2024-11-06T13:56:11.608Z","dependency_job_id":null,"html_url":"https://github.com/oddbird/accoutrement","commit_stats":{"total_commits":404,"total_committers":19,"mean_commits":"21.263157894736842","dds":0.655940594059406,"last_synced_commit":"b9732fb3f00ed42a26e61cb68cabbc13c4bf6b27"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Faccoutrement","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Faccoutrement/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Faccoutrement/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Faccoutrement/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oddbird","download_url":"https://codeload.github.com/oddbird/accoutrement/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238453414,"owners_count":19475078,"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-06T13:30:12.996Z","updated_at":"2025-10-31T16:30:24.735Z","avatar_url":"https://github.com/oddbird.png","language":"SCSS","funding_links":["https://github.com/sponsors/oddbird","https://opencollective.com/oddbird-open-source"],"categories":[],"sub_categories":[],"readme":"# Sass Accoutrement\n\n**Robust design systems** require\n_meaningful_, _readable_, _reusable_ code.\nThese Sass utilities are designed to\nhelp define and manage your design tokens\n(colors, fonts, sizes, etc.)\nin a format that can be understood\nby both humans and parsers --\nopening the door for automation,\nwhile improving consistency and readability.\nThese tools also integrate with [Herman][herman],\nour automated living pattern-library generator\nbuilt on [SassDoc][sassdoc].\n\n[herman]: https://www.oddbird.net/herman/\n[sassdoc]: http://sassdoc.com/\n\n- [Official Site](https://www.oddbird.net/accoutrement/)\n- [Documentation](https://www.oddbird.net/accoutrement/docs/)\n- [Source Code](https://github.com/oddbird/accoutrement/)\n- [Issues](https://github.com/oddbird/accoutrement/issues)\n\n_Brought to you by [OddBird][oddbird] --\nthe creators of [Susy][susy],\n[True][true],\nand [Herman][herman]._\n\n[oddbird]: https://www.oddbird.net/\n[susy]: https://www.oddbird.net/susy/\n[true]: https://www.oddbird.net/true/\n[herman]: https://www.oddbird.net/herman/\n[fonts]: https://www.oddbird.net/accoutrement/docs/type.html\n\n## Installation\n\nInstall the package with npm or yarn\n\n```bash\nnpm install accoutrement [--save-dev]\nyarn add accoutrement [--dev]\n```\n\nUse what you need:\n\n```scss\n// all the modules (these are functionally the same)\n@use '\u003cpath-to\u003e/accoutrement';\n@use '\u003cpath-to\u003e/accoutrement/sass/tools';\n\n// individual modules (at `/accoutrement/sass/\u003cname\u003e`)\n@use '\u003cpath-to\u003e/accoutrement/sass/color';\n```\n\nIf you're using [Eyeglass](https://github.com/linkedin/eyeglass),\nyou can use the default \"tools\" using only:\n\n```scss\n@use 'accoutrement';\n```\n\n## Modules for common data types\n\n- **[Utilities](https://www.oddbird.net/accoutrement/docs/utils.html)** --\n  For helpers with Sass lists, strings, and maps\n- **[Ratios](https://www.oddbird.net/accoutrement/docs/ratios.html)** --\n  For managing aspect and typography ratios\n  (several common ratios are provided)\n- **[Animate](https://www.oddbird.net/accoutrement/docs/animate.html)** --\n  For managing CSS transitions and animations\n- **[Color](https://www.oddbird.net/accoutrement/docs/color.html)** --\n  For managing CSS colors and contrast-ratios\n- **[Layout](https://www.oddbird.net/accoutrement/docs/layout.html)** --\n  For managing CSS sizes: typographic scales, spacing, etc.\n- **[Scale](https://www.oddbird.net/accoutrement/docs/scale.html)** --\n  For managing CSS sizes: typographic scales, spacing, etc.\n- **[Type](https://www.oddbird.net/accoutrement/docs/type.html)** --\n  For managing webfonts, generated content, and other text needs\n\n## Tokens\n\nThe [**Tokens**](https://www.oddbird.net/accoutrement/docs/tokens.html)\nmodule provides a special syntax for managing design tokens\nwith Sass \"map\" objects:\n\n```scss\n$map: (\n  'root': 16px,\n  'gutter': 1em,\n);\n```\n\nUsing the custom syntax,\nwe can extend maps to handle internal reference,\nand functional adjustments --\ncapturing meaningful relationships\nbetween design tokens:\n\n```scss\n$map: (\n  'root': 16px,\n  // internal reference \u0026 adjustments\n  'gutter': '#root'\n    (\n      scale: '_major-third' 1,\n      'convert-units': 'rem',\n    ),\n);\n```\n\nMap storage serves a larger purpose:\n\n- Related data is grouped explicitly,\n  making the code more readable and maintainable\n- The \"single source of truth\"\n  encourages reusable design patterns\n- Meaningful structure allows automation,\n  from [automated style guides][herman]\n  to automated functionality\n\n[herman]: https://www.oddbird.net/herman/\n[type]: https://www.oddbird.net/accoutrement/docs/type.html\n\nThis module provides the generic\n(non data-specific)\nsetup and syntax parsing:\n\n- Retrieve \u0026 parse map values\n  with `token.get()`\n  and other [token api functions][api]\n- Use the many [registered functions][internal]\n  to manipulate tokens in the map\n- Register your own [functions][functions],\n  for extra functionality\n\n[api]: https://www.oddbird.net/accoutrement/docs/token-api.html\n[internal]: https://www.oddbird.net/accoutrement/docs/token-internal.html\n[functions]: https://www.oddbird.net/accoutrement/docs/token-register.html\n\n**Note:** We no longer use token maps\ninternally at [OddBird](https://www.oddbird.net/)\nsince Sass \"modules\" now provide a way\nto group \u0026 namespace normal Sass variables meaningfully,\nand [access module variables as a map](https://sass-lang.com/documentation/modules/meta#module-variables).\nBy relying on core Sass features,\nwe avoid any confusion around the custom token syntax.\n\n---\n\n### Sponsor OddBird's OSS Work\n\nAt OddBird, we love contributing to the languages \u0026 tools developers rely on.\nWe're currently working on polyfills for new Popover \u0026 Anchor Positioning\nfunctionality, as well as CSS specifications for functions, mixins, and\nresponsive typography. Help us keep this work sustainable and centered on your\nneeds as a developer! We display sponsor logos and avatars on our\n[website](https://www.oddbird.net/accoutrement/#open-source-sponsors).\n\n[Sponsor OddBird's OSS Work](https://opencollective.com/oddbird-open-source)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foddbird%2Faccoutrement","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foddbird%2Faccoutrement","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foddbird%2Faccoutrement/lists"}