{"id":20904726,"url":"https://github.com/sage/design-tokens","last_synced_at":"2026-03-05T12:06:57.272Z","repository":{"id":37798699,"uuid":"339754443","full_name":"Sage/design-tokens","owner":"Sage","description":"Design tokens for the Sage Design system using Amazon Style Dictionary.","archived":false,"fork":false,"pushed_at":"2026-02-14T12:47:44.000Z","size":13015,"stargazers_count":20,"open_issues_count":3,"forks_count":9,"subscribers_count":17,"default_branch":"master","last_synced_at":"2026-02-15T06:15:00.643Z","etag":null,"topics":["amazon-style-dictionary","css","design","design-tokens","less","npm","sage","sage-design","tokens"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sage.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"license","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-02-17T14:44:36.000Z","updated_at":"2026-02-06T10:51:26.000Z","dependencies_parsed_at":"2026-01-16T14:01:56.005Z","dependency_job_id":null,"html_url":"https://github.com/Sage/design-tokens","commit_stats":{"total_commits":635,"total_committers":19,"mean_commits":"33.421052631578945","dds":0.6519685039370079,"last_synced_commit":"4c09bde9844d34a9897ac4f332b2441159a794ce"},"previous_names":[],"tags_count":337,"template":false,"template_full_name":null,"purl":"pkg:github/Sage/design-tokens","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sage%2Fdesign-tokens","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sage%2Fdesign-tokens/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sage%2Fdesign-tokens/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sage%2Fdesign-tokens/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sage","download_url":"https://codeload.github.com/Sage/design-tokens/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sage%2Fdesign-tokens/sbom","scorecard":{"id":124945,"data":{"date":"2025-08-11","repo":{"name":"github.com/Sage/design-tokens","commit":"a80fc4bf7c2042a8fd95b2e89f9d23de6ed070f1"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.7,"checks":[{"name":"Code-Review","score":7,"reason":"Found 17/24 approved changesets -- score normalized to 7","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":10,"reason":"30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: jobLevel 'contents' permission set to 'write': .github/workflows/build.yaml:15","Warn: jobLevel 'packages' permission set to 'write': .github/workflows/build.yaml:16","Warn: no topLevel permission defined: .github/workflows/build.yaml:1","Warn: no topLevel permission defined: .github/workflows/lint.yaml:1","Warn: no topLevel permission defined: .github/workflows/semantic-release.yaml:1","Warn: no topLevel permission defined: .github/workflows/validate.yml:1"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yaml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/Sage/design-tokens/build.yaml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yaml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/Sage/design-tokens/build.yaml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yaml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/Sage/design-tokens/lint.yaml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yaml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/Sage/design-tokens/lint.yaml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/semantic-release.yaml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/Sage/design-tokens/semantic-release.yaml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/semantic-release.yaml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/Sage/design-tokens/semantic-release.yaml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/semantic-release.yaml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/Sage/design-tokens/semantic-release.yaml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/validate.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/Sage/design-tokens/validate.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/validate.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/Sage/design-tokens/validate.yml/master?enable=pin","Info:   0 out of   8 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: license:0","Info: FSF or OSI recognized license: Apache License 2.0: license:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":0,"reason":"Project has not signed or included provenance with any releases.","details":["Warn: release artifact v16.0.0 not signed: https://api.github.com/repos/Sage/design-tokens/releases/228349835","Warn: release artifact v15.4.0 not signed: https://api.github.com/repos/Sage/design-tokens/releases/227979892","Warn: release artifact v15.3.0 not signed: https://api.github.com/repos/Sage/design-tokens/releases/226137478","Warn: release artifact v15.2.2 not signed: https://api.github.com/repos/Sage/design-tokens/releases/226110499","Warn: release artifact v15.2.1 not signed: https://api.github.com/repos/Sage/design-tokens/releases/225595169","Warn: release artifact v16.0.0 does not have provenance: https://api.github.com/repos/Sage/design-tokens/releases/228349835","Warn: release artifact v15.4.0 does not have provenance: https://api.github.com/repos/Sage/design-tokens/releases/227979892","Warn: release artifact v15.3.0 does not have provenance: https://api.github.com/repos/Sage/design-tokens/releases/226137478","Warn: release artifact v15.2.2 does not have provenance: https://api.github.com/repos/Sage/design-tokens/releases/226110499","Warn: release artifact v15.2.1 does not have provenance: https://api.github.com/repos/Sage/design-tokens/releases/225595169"],"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Packaging","score":10,"reason":"packaging workflow detected","details":["Info: Project packages its releases by way of GitHub Actions.: .github/workflows/semantic-release.yaml:10"],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 23 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":3,"reason":"7 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-xffm-g5w8-qvg7","Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx","Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-16T03:34:07.984Z","repository_id":37798699,"created_at":"2025-08-16T03:34:07.984Z","updated_at":"2025-08-16T03:34:07.984Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29585441,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T13:56:48.962Z","status":"ssl_error","status_checked_at":"2026-02-18T13:54:34.145Z","response_time":162,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["amazon-style-dictionary","css","design","design-tokens","less","npm","sage","sage-design","tokens"],"created_at":"2024-11-18T13:18:37.962Z","updated_at":"2026-02-18T16:00:38.841Z","avatar_url":"https://github.com/Sage.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sage Design Tokens\n\n[![GitHub release](https://img.shields.io/github/release/Sage/design-tokens.svg)](https://GitHub.com/Sage/design-tokens/releases/)\n[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)\n[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://GitHub.com/Sage/design-tokens/graphs/commit-activity)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\nThis repository contains the design tokens from the Sage Design System. These are maintained by the Sage DS team. This library is for distributing these tokens across multiple platforms.\n\n## What are design tokens?\n\nDesign Tokens are Design System’s most basic, lowest level element. In atomic design terminology those would be the protons or electrons.\n\nBasically those are **key-value records named and organized the same way regardless of the platform** (e.g. web, Android, iOS, Figma). They can define various properties, such as colors, paddings, margins, sizes, font sizes, font families, transitions, animations, and others. **They represent certain design decisions.**\n\nDesign tokens purpose is to:\n- **Release developers from taking design decisions.** Often while developing a component, developer needs to take decision what tint of what color should be used. This decision should be taken by designer, not developer.\n- **Improve handover process and communication between designers and developers.** Both, developers and designers are going to use the same token name for given property (color, background color, border, padding, margin, transition and so on). In the end, developers don't need to know what the final value will be.\n- **Narrow value set to only needed values.** Design System uses narrow set of values (spacings, colors, typography properties and others). Those are only values that are needed for visual description of the component.\n- **Keep visual consistency across all components of the library.**\n\n## Docs:\n- [Generating icons](./docs/icons.md)\n\n## Using the design tokens\n\n### Web\n\nTo make use of these tokens in your application, import the correct variable definitions based on your styling technology.\n\n#### Install\n\nTo add to a project using npm:\n\n```bash\n# If you're using npm:\nnpm install --save @sage/design-tokens\n\n# OR If you're using yarn:\nyarn add @sage/design-tokens\n```\n\nYou can also add the files directly by downloading from the [releases page on Github](https://github.com/Sage/design-tokens/releases).\n\n#### CSS\n\nTo make use of the css variables, import them into your code like so:\n\n```css\n@import url(\"@sage/design-tokens/css/light.css\");\n@import url(\"@sage/design-tokens/css/dark.css\") (prefers-color-scheme: dark);\n@import url(\"@sage/design-tokens/css/components/button.css\");\n```\n\n**Note:** For manual theme switching in JavaScript applications, we recommend using the HTML `\u003clink\u003e` approach rather than dynamic imports to avoid bundler complexity. You can import the component css files in your JS like below.\n\n```js\nimport \"@sage/design-tokens/css/components/button.css\";\n```\n\n```html\n\u003clink rel=\"stylesheet\" href=\"node_modules/@sage/design-tokens/css/light.css\" id=\"app-theme\"\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n  function switchTheme(theme) {\n    document.getElementById('app-theme').href = \n      `node_modules/@sage/design-tokens/css/${theme}.css`;\n  }\n  \n  function updateTheme() {\n    const prefersDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n    switchTheme(prefersDark ? \"dark\" : \"light\");\n  }\n  \n  // Listen for system preference changes\n  window.matchMedia(\"(prefers-color-scheme: dark)\")\n    .addEventListener(\"change\", updateTheme);\n\n  // Set initial theme on content load\n  document.addEventListener(\"DOMContentLoaded\", updateTheme);\n\u003c/script\u003e\n```\n\n#### SCSS\n\nThe SCSS format provides traditional Sass variables while handling mode switching through separate mode files. Due to variable naming conventions, loading both `light` and `dark` modes simultaneously would cause conflicts. To address this, dedicated mode files are provided.\n\n##### Available Files\n\n- Individual component files (e.g., `button.scss`, `container.scss`) - Available for granular imports\n- The `global`, `light` and `dark` tokens are also exported in their own files for granularity as well\n\n**Note:** The current SCSS output requires the use of `@import` statements to ensure variables are properly scoped across files. While `@import` will be deprecated when Dart Sass 3.0.0 is released, we will endeavor to update our output format to support the modern `@use` module system before that release.\n\nTo suppress deprecation warnings during compilation, add the `--silence-deprecation=import` flag to your Sass build command.\n\n##### Light and Dark Mode Support with Granular Imports\n\nImport specific components when you only need certain tokens and create separate CSS files for each mode:\n\n```scss\n// button-light.scss\n@import \"@sage/design-tokens/scss/global.scss\";\n@import \"@sage/design-tokens/scss/light.scss\";\n@import \"@sage/design-tokens/scss/components/button.scss\";\n\n.button-destructive-primary {\n  background-color: $button-destructive-primary-bg-default;\n\n  \u0026:hover {\n    background-color: $button-destructive-primary-bg-hover;\n  }\n}\n```\n\n```scss\n// button-dark.scss\n@import \"@sage/design-tokens/scss/global.scss\";\n@import \"@sage/design-tokens/scss/dark.scss\";\n@import \"@sage/design-tokens/scss/components/button.scss\";\n\n.button-destructive-primary {\n  background-color: $button-destructive-primary-bg-default;\n\n  \u0026:hover {\n    background-color: $button-destructive-primary-bg-hover;\n  }\n}\n```\n\nBuild process:\n```bash\nsass button-light.scss:button-light.css --no-source-map --silence-deprecation=import\n\nsass button-dark.scss:button-dark.css --no-source-map --silence-deprecation=import\n```\n\n#### Common JS module\n\n```js\nconst commonTokens = require(\"@sage/design-tokens/js/common\");\nconst buttonTokens = commonTokens.button;\n\nelement.style.backgroundColor = buttonTokens.buttonDestructivePrimaryBgDefault;\n```\n\n#### ES6 module\n\n```js\nimport { button } from \"@sage/design-tokens/js/es6\";\n \nelement.style.backgroundColor = button.buttonDestructivePrimaryBgDefault;\n```\n\nA type definition file is also included to work in projects with typescript installed.\n\n#### Other formats\n\nIt is possible to export design tokens to any format or language. If you need to use design tokens in your technology, please contact us and describe your needs.\n\n## Contributing\n\nIf you would like to help contribute to this library, please read our [contributing documentation](./docs/CONTRIBUTING.md),\n\n## Licence\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use these files except in compliance with the License.\nYou may obtain a copy of the License at [Apache 2.0 license](./license).\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n\nCopyright (c) 2025 Sage Group Plc. All rights reserved.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsage%2Fdesign-tokens","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsage%2Fdesign-tokens","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsage%2Fdesign-tokens/lists"}