{"id":20742449,"url":"https://github.com/esri/calcite-base","last_synced_at":"2025-10-31T10:56:57.210Z","repository":{"id":35049880,"uuid":"178914594","full_name":"Esri/calcite-base","owner":"Esri","description":"Tokens, mixins, and other Sass utilities for Esri's Calcite Design System","archived":false,"fork":false,"pushed_at":"2023-04-30T19:23:23.000Z","size":825,"stargazers_count":11,"open_issues_count":24,"forks_count":4,"subscribers_count":384,"default_branch":"master","last_synced_at":"2025-04-24T05:11:42.681Z","etag":null,"topics":["calcite","css","design","mixins","sass","style"],"latest_commit_sha":null,"homepage":"https://esri.github.io/calcite-base/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Esri.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"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}},"created_at":"2019-04-01T17:37:05.000Z","updated_at":"2022-10-20T20:54:39.000Z","dependencies_parsed_at":"2024-06-18T22:39:21.160Z","dependency_job_id":"bc8a0265-1e90-4e01-adf4-ba6192c253b7","html_url":"https://github.com/Esri/calcite-base","commit_stats":{"total_commits":49,"total_committers":4,"mean_commits":12.25,"dds":"0.36734693877551017","last_synced_commit":"7017656ec106ee112275b43422cf77546a66a3ac"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Esri%2Fcalcite-base","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Esri%2Fcalcite-base/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Esri%2Fcalcite-base/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Esri%2Fcalcite-base/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Esri","download_url":"https://codeload.github.com/Esri/calcite-base/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250566509,"owners_count":21451232,"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":["calcite","css","design","mixins","sass","style"],"created_at":"2024-11-17T07:05:45.993Z","updated_at":"2025-10-31T10:56:52.169Z","avatar_url":"https://github.com/Esri.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Calcite Base\n\nThe calcite-base repository holds the variables and mixins used in Calcite Components. This includes resources regarding:\n\n- motion (easing functions, transitions)\n- type (font stacks, sizing, spacing mixins)\n- reponsive design (breakpoints, respond-to mixins)\n- utilities (clearfix, show/hide, etc)\n- shadow (defined levels of depth)\n- spacing (standardized vertical/horizontal spacing units)\n\n## Install\n\nIf you use npm, installation is as easy as:\n\n```\nnpm install @esri/calcite-base\n```\n\nYou can also [download the latest release manually](https://github.com/Esri/calcite-base/releases).\n\n## Use\n\nIn a Sass project, simply import calcite-base into your project and use the variables/mixins:\n\n```scss\n@import \"./node_modules/@esri/calcite-base/dist/_index.scss\";\n\n.myClass {\n  @include font-size(-1);\n}\n```\n\nIf you only require certain mixins, you can import each section directly as well:\n\n```scss\n@import \"./node_modules/@esri/calcite-base/dist/_type.scss\";\n\n.myClass {\n  @include avenir-light();\n  @include font-size(-1);\n  @include leading(2);\n  @include tracking(166);\n  @include word-spacing(200);\n}\n```\n\n### Custom Properties\n\nIf you are using PostCSS (or standard CSS) there are a series of files which declare the variables utilizing [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (CSS Variables). You can use these along with something like the [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties) library to utilize the base colors, styles, etc in your postcss project:\n\n```css\n@import \"./node_modules/@esri/calcite-base/dist/variables.css\";\n\n.myClass {\n  box-shadow: var(--shadow-1);\n}\n```\n\n### Focus State Styling\n\nThe included focus state styling mixins rely on a `--calcite-ui-blue-1` variable from `calcite-colors`. You can [find the Calcite Colors repository on GitHub](https://github.com/Esri/calcite-colors).\n\n### JavaScript\n\nIf you need some of these values and are using a CSS-in-JS approach, you can import them from the JavaScript file using ES6 modules:\n\n```js\nimport {avenirLight} from \"@esri/calcite-base\";\nconsole.log(avenirLight); // '\"Avenir Next\", \"Avenir\", \"Helvetica Neue\", sans-serif'\n```\n\nNote when using partial imports like this, the hyphenated variables become camel case.\n\n## Licensing\n\nCOPYRIGHT © 2020 Esri\n\nAll rights reserved under the copyright laws of the United States\nand applicable international laws, treaties, and conventions.\n\nThis material is licensed for use under the Esri Master License\nAgreement (MLA), and is bound by the terms of that agreement.\nYou may redistribute and use this code without modification,\nprovided you adhere to the terms of the MLA and include this\ncopyright notice.\n\nSee use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english\n\nFor additional information, contact:\nEnvironmental Systems Research Institute, Inc.\nAttn: Contracts and Legal Services Department\n380 New York Street\nRedlands, California, USA 92373\nUSA\n\nemail: contracts@esri.com\n\n## Contributing\n\nPlease read the [contribute document](CONTRIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fesri%2Fcalcite-base","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fesri%2Fcalcite-base","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fesri%2Fcalcite-base/lists"}