{"id":13880910,"url":"https://github.com/Shopify/polaris-tokens","last_synced_at":"2025-07-16T17:31:20.817Z","repository":{"id":45060229,"uuid":"113612892","full_name":"Shopify/polaris-tokens","owner":"Shopify","description":"Design tokens for Polaris, Shopify’s design system","archived":true,"fork":false,"pushed_at":"2022-01-11T22:20:14.000Z","size":7333,"stargazers_count":234,"open_issues_count":1,"forks_count":31,"subscribers_count":227,"default_branch":"main","last_synced_at":"2025-06-30T02:41:55.281Z","etag":null,"topics":["design-systems","design-tokens","polaris","shopify","shopify-polaris"],"latest_commit_sha":null,"homepage":"https://polaris.shopify.com","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/Shopify.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-08T20:06:42.000Z","updated_at":"2025-06-23T03:34:10.000Z","dependencies_parsed_at":"2022-09-05T05:00:55.627Z","dependency_job_id":null,"html_url":"https://github.com/Shopify/polaris-tokens","commit_stats":null,"previous_names":[],"tags_count":95,"template":false,"template_full_name":null,"purl":"pkg:github/Shopify/polaris-tokens","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shopify%2Fpolaris-tokens","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shopify%2Fpolaris-tokens/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shopify%2Fpolaris-tokens/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shopify%2Fpolaris-tokens/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Shopify","download_url":"https://codeload.github.com/Shopify/polaris-tokens/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shopify%2Fpolaris-tokens/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265527547,"owners_count":23782480,"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":["design-systems","design-tokens","polaris","shopify","shopify-polaris"],"created_at":"2024-08-06T08:03:38.501Z","updated_at":"2025-07-16T17:31:20.200Z","avatar_url":"https://github.com/Shopify.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eLEGACY Polaris design tokens\u003c/h1\u003e\n\n\u003cimg src=\"https://user-images.githubusercontent.com/85783/39013335-ebf76f5e-43cb-11e8-81f2-706259125897.png\" alt=\"\" align=\"center\" /\u003e\n\n\u003ch3 align=\"center\"\u003eColors, spacing, animation, and typography for all platforms\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\u003cem\u003eJavaScript · JSON · CSS · SCSS · Android · Sketch · macOS · iOS · Adobe Swatch\u003c/em\u003e\u003c/p\u003e\n\n\u003cdiv align=\"center\" markdown=\"1\"\u003e\n\n[![npm version](https://img.shields.io/npm/v/@shopify/polaris-tokens.svg)](https://www.npmjs.com/package/@shopify/polaris-tokens) [![CI](https://github.com/shopify/polaris-tokens/workflows/CI/badge.svg)](https://github.com/shopify/polaris-tokens/actions?query=workflow%3ACI)\n\n\u003c/div\u003e\n\n---\n\n[Design tokens](https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421) for [Polaris](https://polaris.shopify.com), Shopify’s design system.\n\nDesign tokens originated at Salesforce, and the best way to describe them is to simply quote their documentation:\n\n\u003e Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development – [Salesforce UX](https://www.lightningdesignsystem.com/design-tokens/)\n\n## Installation\n\nPolaris design tokens are available as both a npm package (`@shopify/polaris-tokens`) on [npm](https://www.npmjs.com/), and as a Ruby gem (`polaris_tokens`) on [RubyGems](https://rubygems.org/).\n\nThe recommended way to use and install design tokens may vary depending on your project; the most common are documented below.\n\nUsing [npm](https://www.npmjs.com/):\n\n```console\nnpm install @shopify/polaris-tokens --save\n```\n\nUsing [yarn](https://yarnpkg.com/en/):\n\n```console\nyarn add @shopify/polaris-tokens\n```\n\nUsing [Bundler](https://bundler.io/):\n\n```console\nbundle add polaris_tokens\n```\n\n### JavaScript\n\nIn JavaScript, design token names are formatted in [lower camelCase](http://wiki.c2.com/?CamelCase).\n\n```js\nconst tokens = require('@shopify/polaris-tokens');\nconsole.log(tokens.colorBlueLighter); // rgb(235, 245, 250)\n```\n\nIn JSON, design token names are formatted in [kebab-case](http://wiki.c2.com/?KebabCase).\n\n```js\nconst tokens = require('@shopify/polaris-tokens/dist/index.json');\nconsole.log(tokens['color-blue-lighter']); // rgb(235, 245, 250)\n```\n\nNote that, if your project supports ECMAScript Modules, you can also use the `import` syntax.\n\n```js\nimport * as tokens from '@shopify/polaris-tokens';\n// or\nimport {colorBlueLighter} from '@shopify/polaris-tokens';\n```\n\n### Sass\n\nSass variables and map keys are formatted in [kebab-case](http://wiki.c2.com/?KebabCase).\n\n```scss\n// Using variables\n@import '~@shopify/polaris-tokens/dist/index';\n\na {\n  color: $color-blue-text;\n}\n\n// Using the map of all tokens\n@import '~@shopify/polaris-tokens/dist/index.map';\n\na {\n  color: map-get($polaris-index-map, 'color-blue-text');\n}\n\n// Using the map for a specific type of tokens (here: spacing)\n@import '~@shopify/polaris-tokens/dist/spacing.spacing-map';\n\na {\n  color: map-get($polaris-spacing-map, 'loose');\n}\n```\n\n### Sass, with CSS Custom Properties\n\nCustom properties are formatted in [kebab-case](http://wiki.c2.com/?KebabCase).\n\n```scss\n// Omit .css at the end of the file\n@import '~@shopify/polaris-tokens/dist/colors.custom-properties';\n\na {\n  color: var(--color-blue-text);\n}\n```\n\n### Rails\n\nToken files are added to the assets pipeline. In JSON, design token names are formatted in [kebab-case](http://wiki.c2.com/?KebabCase).\n\n```ruby\nrequire 'json'\npolaris_token_file = Rails.application.assets_manifest.find_sources('colors.json').first\npolaris_colors = JSON.parse(polaris_token_file)\npolaris_colors['color-blue-lighter'] # \"rgb(235, 245, 250)\"\n```\n\n### CSS Filters\n\nColor tokens include a [CSS Filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) (`filter`) value as part of their metadata. When this filter is applied to an element, it will change that element’s color to _approximate_ the target token color.\n\n```\n\u003cdiv\u003e\n  No background, no filter\n\u003c/div\u003e\n\n\u003cdiv style=\"background-color: #fff\"\u003e\n  White background, no filter\n\u003c/div\u003e\n\n\u003cdiv style=\"filter: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)\"\u003e\n  No background, red filter\n\u003c/div\u003e\n\n\u003cdiv style=\"background-color: #fff; filter: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)\"\u003e\n  White background, red filter\n\u003c/div\u003e\n```\n\n![text and non-transparent backgrounds become red when filter is applied](.github/filter-example-1.png)\n\nIn general, these filters shouldn’t be used unless absolutely necessary. The main use case for the filters is to apply a color to an unsafe (as in: user-provided) SVG. Since SVGs can contain arbitrary code, we should be careful about how they are displayed. The safest option is to render SVGs as an `img` (for example `\u003cimg src=\"circle.svg\" alt=\"\" /\u003e`); when SVGs are rendered like this, browsers will block code execution. Unfortunately, it also means that the SVGs cannot be styled with external CSS (applying `fill: red` to the `img` won’t do anything.)\n\nCSS filters allow us the safety of rendering SVGs inside `img` elements, but still give us control over their appearance.\n\n```\n\u003cdiv\u003e\n  \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'\u003e\u003ccircle cx='20' cy='20' r='16' /\u003e\u003c/svg\u003e\" alt=\"\" /\u003e black circle, no filter\n\u003c/div\u003e\n\u003cdiv\u003e\n  \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'\u003e\u003ccircle cx='20' cy='20' r='16' /\u003e\u003c/svg\u003e\" style=\"filter: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)\" alt=\"\" /\u003e black circle, red filter\n\u003c/div\u003e\n```\n\n![the filter turns the black circle red](.github/filter-example-2.png)\n\nNote that _all_ filled areas of an SVG will change color with this approach, including borders/strokes. For that reason it should only be used with monochromatic SVGs.\n\n```\n\u003cdiv\u003e\n  \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'\u003e\u003ccircle cx='20' cy='20' r='16' stroke='green' stroke-width='4' /\u003e\u003c/svg\u003e\" alt=\"\" /\u003e black circle with green border, no filter\n\u003c/div\u003e\n\u003cdiv\u003e\n  \u003cimg src=\"data:image/svg+xml;utf8,\u003csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'\u003e\u003ccircle cx='20' cy='20' r='16' stroke='green' stroke-width='4' /\u003e\u003c/svg\u003e\" style=\"filter: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)\" alt=\"\" /\u003e black circle with green border, red filter\n\u003c/div\u003e\n```\n\n![the filter turns the entire circle red, including the border](.github/filter-example-3.png)\n\nIf you need to generate new filter values, you can do so with [this CodePen](https://codepen.io/kaelig/full/jeObGP/).\n\n---\n\n## Contributing\n\nThe purpose of this repository is to see the core design elements of the Polaris design system\nevolve and improve over time with the needs of developers, designers and partners in mind.\n\nThis project is now deprecated and no longer accepting contributions.\n\n### [Code of conduct](https://github.com/Shopify/polaris-tokens/blob/main/.github/CODE_OF_CONDUCT.md)\n\nWe have a [code of conduct](https://github.com/Shopify/polaris-tokens/blob/main/.github/CODE_OF_CONDUCT.md),\nplease follow it in all your interactions with the project.\n\n### [License](https://github.com/Shopify/polaris-tokens/blob/main/LICENSE.md)\n\nThe polaris-tokens project is available under the [MIT license](https://github.com/Shopify/polaris-tokens/blob/main/LICENSE.md).\n\nParts of the code in this repository are directly inspired or borrowed\nfrom the [Theo project](https://github.com/salesforce-ux/theo),\nproperty of Salesforce.com, Inc., [licensed under BSD 3-Clause](https://git.io/sfdc-license).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FShopify%2Fpolaris-tokens","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FShopify%2Fpolaris-tokens","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FShopify%2Fpolaris-tokens/lists"}