polaris_tokens_plus 2.5.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: c2a547e6961bb3658bb9da929bef65c7cac236a17c12ed9ffcd5ee25797148bd
+  data.tar.gz: 6121c57546e32afea20feef29278343b877b885f6949f17dd3aa3641ba8f3413
+SHA512:
+  metadata.gz: b96e50b6895df9ac8eb3e84661624257a4db90ea4949e30b7e6f733db99452d8ab47d3d44fbb6a99f0b4ec8f4c0f4680a77516c6e374ee49aec797d927befe8d
+  data.tar.gz: 5bb315bb55473349528c232e32d163200923a2bf4cebcf6aae0d10adfa39ede66c344757a8ca4414721828129f8d8b7b7c952fa3d8d4d77617c485464a06a4b3

data/LICENSE.md

@@ -0,0 +1,19 @@
+Copyright (c) 2017 Shopify
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,206 @@
+<h1 align="center">Polaris design tokens</h1>
+
+<img src="https://user-images.githubusercontent.com/85783/39013335-ebf76f5e-43cb-11e8-81f2-706259125897.png" alt="" align="center" />
+
+<h3 align="center">Colors, spacing, animation, and typography for all platforms</h3>
+
+<p align="center"><em>JavaScript · JSON · CSS · SCSS · Android · Sketch · macOS · Adobe Swatch</em></p>
+
+<div align="center" markdown="1">
+
+[![CircleCI](https://circleci.com/gh/Shopify/polaris-tokens.svg?style=shield)](https://circleci.com/gh/Shopify/polaris-tokens) [![npm version](https://img.shields.io/npm/v/@shopify/polaris-tokens.svg)](https://www.npmjs.com/package/@shopify/polaris-tokens) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+
+</div>
+
+---
+
+[Design tokens](https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421) for [Polaris](https://polaris.shopify.com), Shopify’s design system.
+
+Design tokens originated at Salesforce, and the best way to describe them is to simply quote their documentation:
+
+> 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/)
+
+## Installation
+
+Polaris 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/).
+
+The recommended way to use and install design tokens may vary depending on your project; the most common are documented below.
+
+Using [npm](https://www.npmjs.com/):
+
+```console
+npm install @shopify/polaris-tokens --save
+```
+
+Using [yarn](https://yarnpkg.com/en/):
+
+```console
+yarn add @shopify/polaris-tokens
+```
+
+Using [Bundler](https://bundler.io/):
+
+```console
+bundle add polaris_tokens
+```
+
+## Usage
+
+Find all available tokens in the [design tokens documentation](https://shopify.github.io/polaris-tokens/).
+
+### JavaScript
+
+In JavaScript, design token names are formatted in [lower camelCase](http://wiki.c2.com/?CamelCase).
+
+```js
+const tokens = require('@shopify/polaris-tokens');
+console.log(tokens.colorBlueLighter); // rgb(235, 245, 250)
+```
+
+In JSON, design token names are formatted in [kebab-case](http://wiki.c2.com/?KebabCase).
+
+```js
+const tokens = require('@shopify/polaris-tokens/dist/index.json');
+console.log(tokens['color-blue-lighter']); // rgb(235, 245, 250)
+```
+
+Note that, if your project supports ECMAScript Modules, you can also use the `import` syntax.
+
+```js
+import * as tokens from '@shopify/polaris-tokens';
+// or
+import {colorBlueLighter} from '@shopify/polaris-tokens';
+```
+
+### Sass
+
+Sass variables and map keys are formatted in [kebab-case](http://wiki.c2.com/?KebabCase).
+
+```scss
+// Using variables
+@import '~@shopify/polaris-tokens/dist/index';
+
+a {
+  color: $color-blue-text;
+}
+
+// Using the map of all tokens
+@import '~@shopify/polaris-tokens/dist/index.map';
+
+a {
+  color: map-get($polaris-index-map, 'color-blue-text');
+}
+
+// Using the map for a specific type of tokens (here: spacing)
+@import '~@shopify/polaris-tokens/dist/spacing.spacing-map';
+
+a {
+  color: map-get($polaris-spacing-map, 'loose');
+}
+```
+
+### Sass, with CSS Custom Properties
+
+Custom properties are formatted in [kebab-case](http://wiki.c2.com/?KebabCase).
+
+```scss
+// Omit .css at the end of the file
+@import '~@shopify/polaris-tokens/dist/colors.custom-properties';
+
+a {
+  color: var(--color-blue-text);
+}
+```
+
+### Rails
+
+Token files are added to the assets pipeline. In JSON, design token names are formatted in [kebab-case](http://wiki.c2.com/?KebabCase).
+
+```ruby
+require 'json'
+polaris_token_file = Rails.application.assets_manifest.find_sources('colors.json').first
+polaris_colors = JSON.parse(polaris_token_file)
+polaris_colors['color-blue-lighter'] # "rgb(235, 245, 250)"
+```
+
+### CSS Filters
+
+Color tokens include a [CSS Filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) (`filter`) value as part of [their metadata](https://github.com/Shopify/polaris-tokens/blob/master/data/color-metadata.yml). When this filter is applied to an element, it will change that element’s color to _approximate_ the target token color.
+
+```
+<div>
+  No background, no filter
+</div>
+
+<div style="background-color: #fff">
+  White background, no filter
+</div>
+
+<div style="filter: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)">
+  No background, red filter
+</div>
+
+<div style="background-color: #fff; filter: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)">
+  White background, red filter
+</div>
+```
+
+![text and non-transparent backgrounds become red when filter is applied](.github/filter-example-1.png)
+
+In 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 `<img src="circle.svg" alt="" />`); 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.)
+
+CSS filters allow us the safety of rendering SVGs inside `img` elements, but still give us control over their appearance.
+
+```
+<div>
+  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><circle cx='20' cy='20' r='16' /></svg>" alt="" /> black circle, no filter
+</div>
+<div>
+  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><circle cx='20' cy='20' r='16' /></svg>" style="filter: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)" alt="" /> black circle, red filter
+</div>
+```
+
+![the filter turns the black circle red](.github/filter-example-2.png)
+
+Note 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.
+
+```
+<div>
+  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><circle cx='20' cy='20' r='16' stroke='green' stroke-width='4' /></svg>" alt="" /> black circle with green border, no filter
+</div>
+<div>
+  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><circle cx='20' cy='20' r='16' stroke='green' stroke-width='4' /></svg>" style="filter: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)" alt="" /> black circle with green border, red filter
+</div>
+```
+
+![the filter turns the entire circle red, including the border](.github/filter-example-3.png)
+
+If you need to generate new filter values, you can do so with [this CodePen](https://codepen.io/kaelig/full/jeObGP/).
+
+---
+
+## Contributing
+
+The purpose of this repository is to see the core design elements of the Polaris design system
+evolve and improve over time with the needs of developers, designers and partners in mind.
+
+We gratefully accept impromptu contributions to the documentation, typo and bug fixes,
+and expect design token requests and changes to be discussed before a pull request.
+
+### [Code of conduct](https://github.com/Shopify/polaris-tokens/blob/master/.github/CODE_OF_CONDUCT.md)
+
+We have a [code of conduct](https://github.com/Shopify/polaris-tokens/blob/master/.github/CODE_OF_CONDUCT.md),
+please follow it in all your interactions with the project.
+
+### [Contributing guide](https://github.com/Shopify/polaris-tokens/blob/master/.github/CONTRIBUTING.md)
+
+Read the [contributing guide](https://github.com/Shopify/polaris-tokens/blob/master/.github/CONTRIBUTING.md)
+to learn how to propose changes and understand our development process.
+
+### [License](https://github.com/Shopify/polaris-tokens/blob/master/LICENSE.md)
+
+The polaris-tokens project is available under the [MIT license](https://github.com/Shopify/polaris-tokens/blob/master/LICENSE.md).
+
+Parts of the code in this repository are directly inspired or borrowed
+from the [Theo project](https://github.com/salesforce-ux/theo),
+property of Salesforce.com, Inc., [licensed under BSD 3-Clause](https://git.io/sfdc-license).

data/dist/Polaris.sketchpalette

@@ -0,0 +1,402 @@
+{
+  "compatibleVersion": "2.0",
+  "pluginVersion": "2.21",
+  "colors": [
+    {
+      "name": "Purple Text",
+      "red": 0.3137254901960784,
+      "green": 0.28627450980392155,
+      "blue": 0.35294117647058826,
+      "alpha": 1
+    },
+    {
+      "name": "Purple Darker",
+      "red": 0.13725490196078433,
+      "green": 0,
+      "blue": 0.3176470588235294,
+      "alpha": 1
+    },
+    {
+      "name": "Purple Dark",
+      "red": 0.3137254901960784,
+      "green": 0.1411764705882353,
+      "blue": 0.5607843137254902,
+      "alpha": 1
+    },
+    {
+      "name": "Purple",
+      "red": 0.611764705882353,
+      "green": 0.41568627450980394,
+      "blue": 0.8705882352941177,
+      "alpha": 1
+    },
+    {
+      "name": "Purple Light",
+      "red": 0.8901960784313725,
+      "green": 0.8156862745098039,
+      "blue": 1,
+      "alpha": 1
+    },
+    {
+      "name": "Purple Lighter",
+      "red": 0.9647058823529412,
+      "green": 0.9411764705882353,
+      "blue": 0.9921568627450981,
+      "alpha": 1
+    },
+    {
+      "name": "Indigo Text",
+      "red": 0.24313725490196078,
+      "green": 0.2549019607843137,
+      "blue": 0.3333333333333333,
+      "alpha": 1
+    },
+    {
+      "name": "Indigo Darker",
+      "red": 0,
+      "green": 0.023529411764705882,
+      "blue": 0.2235294117647059,
+      "alpha": 1
+    },
+    {
+      "name": "Indigo Dark",
+      "red": 0.12549019607843137,
+      "green": 0.1803921568627451,
+      "blue": 0.47058823529411764,
+      "alpha": 1
+    },
+    {
+      "name": "Indigo",
+      "red": 0.07058823529411765,
+      "green": 0.2196078431372549,
+      "blue": 0.7490196078431373,
+      "alpha": 1
+    },
+    {
+      "name": "Indigo Light",
+      "red": 0.7019607843137254,
+      "green": 0.7372549019607844,
+      "blue": 0.9607843137254902,
+      "alpha": 1
+    },
+    {
+      "name": "Indigo Lighter",
+      "red": 0.9568627450980393,
+      "green": 0.9607843137254902,
+      "blue": 0.9803921568627451,
+      "alpha": 1
+    },
+    {
+      "name": "Blue Text",
+      "red": 0.24313725490196078,
+      "green": 0.3058823529411765,
+      "blue": 0.3411764705882353,
+      "alpha": 1
+    },
+    {
+      "name": "Blue Darker",
+      "red": 0,
+      "green": 0.0784313725490196,
+      "blue": 0.1607843137254902,
+      "alpha": 1
+    },
+    {
+      "name": "Blue Dark",
+      "red": 0.03137254901960784,
+      "green": 0.3058823529411765,
+      "blue": 0.5411764705882353,
+      "alpha": 1
+    },
+    {
+      "name": "Blue",
+      "red": 0,
+      "green": 0.47843137254901963,
+      "blue": 0.807843137254902,
+      "alpha": 1
+    },
+    {
+      "name": "Blue Light",
+      "red": 0.7058823529411765,
+      "green": 0.8823529411764706,
+      "blue": 0.9803921568627451,
+      "alpha": 1
+    },
+    {
+      "name": "Blue Lighter",
+      "red": 0.9215686274509803,
+      "green": 0.9607843137254902,
+      "blue": 0.9803921568627451,
+      "alpha": 1
+    },
+    {
+      "name": "Teal Text",
+      "red": 0.25098039215686274,
+      "green": 0.3254901960784314,
+      "blue": 0.3215686274509804,
+      "alpha": 1
+    },
+    {
+      "name": "Teal Darker",
+      "red": 0,
+      "green": 0.19215686274509805,
+      "blue": 0.20784313725490197,
+      "alpha": 1
+    },
+    {
+      "name": "Teal Dark",
+      "red": 0,
+      "green": 0.5176470588235295,
+      "blue": 0.5568627450980392,
+      "alpha": 1
+    },
+    {
+      "name": "Teal",
+      "red": 0.2784313725490196,
+      "green": 0.7568627450980392,
+      "blue": 0.7490196078431373,
+      "alpha": 1
+    },
+    {
+      "name": "Teal Light",
+      "red": 0.7176470588235294,
+      "green": 0.9254901960784314,
+      "blue": 0.9254901960784314,
+      "alpha": 1
+    },
+    {
+      "name": "Teal Lighter",
+      "red": 0.8784313725490196,
+      "green": 0.9607843137254902,
+      "blue": 0.9607843137254902,
+      "alpha": 1
+    },
+    {
+      "name": "Green Text",
+      "red": 0.2549019607843137,
+      "green": 0.30980392156862746,
+      "blue": 0.24313725490196078,
+      "alpha": 1
+    },
+    {
+      "name": "Green Darker",
+      "red": 0.09019607843137255,
+      "green": 0.21176470588235294,
+      "blue": 0.18823529411764706,
+      "alpha": 1
+    },
+    {
+      "name": "Green Dark",
+      "red": 0.06274509803921569,
+      "green": 0.5019607843137255,
+      "blue": 0.2627450980392157,
+      "alpha": 1
+    },
+    {
+      "name": "Green",
+      "red": 0.3137254901960784,
+      "green": 0.7215686274509804,
+      "blue": 0.23529411764705882,
+      "alpha": 1
+    },
+    {
+      "name": "Green Light",
+      "red": 0.7333333333333333,
+      "green": 0.8980392156862745,
+      "blue": 0.7019607843137254,
+      "alpha": 1
+    },
+    {
+      "name": "Green Lighter",
+      "red": 0.8901960784313725,
+      "green": 0.9450980392156862,
+      "blue": 0.8745098039215686,
+      "alpha": 1
+    },
+    {
+      "name": "Yellow Text",
+      "red": 0.34901960784313724,
+      "green": 0.3176470588235294,
+      "blue": 0.18823529411764706,
+      "alpha": 1
+    },
+    {
+      "name": "Yellow Darker",
+      "red": 0.3411764705882353,
+      "green": 0.23137254901960785,
+      "blue": 0,
+      "alpha": 1
+    },
+    {
+      "name": "Yellow Dark",
+      "red": 0.5411764705882353,
+      "green": 0.3803921568627451,
+      "blue": 0.08627450980392157,
+      "alpha": 1
+    },
+    {
+      "name": "Yellow",
+      "red": 0.9333333333333333,
+      "green": 0.7607843137254902,
+      "blue": 0,
+      "alpha": 1
+    },
+    {
+      "name": "Yellow Light",
+      "red": 1,
+      "green": 0.9176470588235294,
+      "blue": 0.5411764705882353,
+      "alpha": 1
+    },
+    {
+      "name": "Yellow Lighter",
+      "red": 0.9882352941176471,
+      "green": 0.9450980392156862,
+      "blue": 0.803921568627451,
+      "alpha": 1
+    },
+    {
+      "name": "Orange Text",
+      "red": 0.34901960784313724,
+      "green": 0.26666666666666666,
+      "blue": 0.18823529411764706,
+      "alpha": 1
+    },
+    {
+      "name": "Orange Darker",
+      "red": 0.2901960784313726,
+      "green": 0.08235294117647059,
+      "blue": 0.01568627450980392,
+      "alpha": 1
+    },
+    {
+      "name": "Orange Dark",
+      "red": 0.7529411764705882,
+      "green": 0.3411764705882353,
+      "blue": 0.09019607843137255,
+      "alpha": 1
+    },
+    {
+      "name": "Orange",
+      "red": 0.9568627450980393,
+      "green": 0.5764705882352941,
+      "blue": 0.25882352941176473,
+      "alpha": 1
+    },
+    {
+      "name": "Orange Light",
+      "red": 1,
+      "green": 0.7725490196078432,
+      "blue": 0.5450980392156862,
+      "alpha": 1
+    },
+    {
+      "name": "Orange Lighter",
+      "red": 0.9882352941176471,
+      "green": 0.9215686274509803,
+      "blue": 0.8588235294117647,
+      "alpha": 1
+    },
+    {
+      "name": "Red Text",
+      "red": 0.34509803921568627,
+      "green": 0.23529411764705882,
+      "blue": 0.20784313725490197,
+      "alpha": 1
+    },
+    {
+      "name": "Red Darker",
+      "red": 0.2,
+      "green": 0.00392156862745098,
+      "blue": 0.00392156862745098,
+      "alpha": 1
+    },
+    {
+      "name": "Red Dark",
+      "red": 0.7490196078431373,
+      "green": 0.027450980392156862,
+      "blue": 0.06666666666666667,
+      "alpha": 1
+    },
+    {
+      "name": "Red",
+      "red": 0.8705882352941177,
+      "green": 0.21176470588235294,
+      "blue": 0.09411764705882353,
+      "alpha": 1
+    },
+    {
+      "name": "Red Light",
+      "red": 0.996078431372549,
+      "green": 0.6784313725490196,
+      "blue": 0.6039215686274509,
+      "alpha": 1
+    },
+    {
+      "name": "Red Lighter",
+      "red": 0.984313725490196,
+      "green": 0.9176470588235294,
+      "blue": 0.8980392156862745,
+      "alpha": 1
+    },
+    {
+      "name": "Ink",
+      "red": 0.12941176470588237,
+      "green": 0.16862745098039217,
+      "blue": 0.21176470588235294,
+      "alpha": 1
+    },
+    {
+      "name": "Ink Light",
+      "red": 0.27058823529411763,
+      "green": 0.30980392156862746,
+      "blue": 0.3568627450980392,
+      "alpha": 1
+    },
+    {
+      "name": "Ink Lighter",
+      "red": 0.38823529411764707,
+      "green": 0.45098039215686275,
+      "blue": 0.5058823529411764,
+      "alpha": 1
+    },
+    {
+      "name": "Ink Lightest",
+      "red": 0.5686274509803921,
+      "green": 0.6196078431372549,
+      "blue": 0.6705882352941176,
+      "alpha": 1
+    },
+    {
+      "name": "Sky Dark",
+      "red": 0.7686274509803922,
+      "green": 0.803921568627451,
+      "blue": 0.8352941176470589,
+      "alpha": 1
+    },
+    {
+      "name": "Sky",
+      "red": 0.8745098039215686,
+      "green": 0.8901960784313725,
+      "blue": 0.9098039215686274,
+      "alpha": 1
+    },
+    {
+      "name": "Sky Light",
+      "red": 0.9568627450980393,
+      "green": 0.9647058823529412,
+      "blue": 0.9725490196078431,
+      "alpha": 1
+    },
+    {
+      "name": "Sky Lighter",
+      "red": 0.9764705882352941,
+      "green": 0.9803921568627451,
+      "blue": 0.984313725490196,
+      "alpha": 1
+    },
+    {"name": "Black", "red": 0, "green": 0, "blue": 0, "alpha": 1},
+    {"name": "White", "red": 1, "green": 1, "blue": 1, "alpha": 1}
+  ],
+  "gradients": [],
+  "images": []
+}