@manifoldco/mercury - npm Package Compare versions

Comparing version 0.0.1-alpha.1 to 0.0.1

index.d.ts

@@ -37,25 +37,25 @@ // This file was generated with Diez - https://diez.org
 export declare class StylesColors {
-  grayscaleWhite: Color;
-  colorGreen: Color;
+  white: Color;
+  green: Color;
   mutedGreen: Color;
-  colorRed: Color;
+  red: Color;
   mutedRed: Color;
-  colorBlue: Color;
+  blue: Color;
   mutedBlue: Color;
-  colorYellow: Color;
+  yellow: Color;
   mutedYellow: Color;
-  colorOrange: Color;
+  orange: Color;
   mutedOrange: Color;
-  colorPurple: Color;
+  purple: Color;
   mutedPurple: Color;
-  colorTeal: Color;
+  teal: Color;
   mutedTeal: Color;
-  grayscaleGrayLightest: Color;
-  grayscaleGrayLighter: Color;
-  grayscaleGrayLight: Color;
-  grayscaleGray: Color;
-  grayscaleGrayDark: Color;
-  grayscaleGrayDarker: Color;
-  grayscaleBlack: Color;
-  colorYellow1: Color;
+  grayLightest: Color;
+  grayLighter: Color;
+  grayLight: Color;
+  gray: Color;
+  grayDark: Color;
+  grayDarker: Color;
+  black: Color;
+  colorYellow: Color;
 }
@@ -62,0 +62,0 @@

index.js

@@ -155,49 +155,49 @@ // This file was generated with Diez - https://diez.org
   constructor({
-    grayscaleWhite = {h: 0, s: 0, l: 1, a: 1},
-    colorGreen = {h: 0.47080291970802923, s: 0.5829787234042554, l: 0.46078431372549017, a: 1},
+    white = {h: 0, s: 0, l: 1, a: 1},
+    green = {h: 0.47080291970802923, s: 0.5829787234042554, l: 0.46078431372549017, a: 1},
     mutedGreen = {h: 0.4357142857142857, s: 0.6249999999999997, l: 0.7803921568627451, a: 1},
-    colorRed = {h: 0.9622467771639043, s: 0.7387755102040816, l: 0.4803921568627451, a: 1},
+    red = {h: 0.9622467771639043, s: 0.7387755102040816, l: 0.4803921568627451, a: 1},
     mutedRed = {h: 0.9604519774011301, s: 1, l: 0.884313725490196, a: 1},
-    colorBlue = {h: 0.6223404255319149, s: 0.7580645161290323, l: 0.48627450980392156, a: 1},
+    blue = {h: 0.6223404255319149, s: 0.7580645161290323, l: 0.48627450980392156, a: 1},
     mutedBlue = {h: 0.6060606060606061, s: 0.9428571428571431, l: 0.9313725490196079, a: 1},
-    colorYellow = {h: 0.1348747591522158, s: 1, l: 0.6607843137254902, a: 1},
+    yellow = {h: 0.1348747591522158, s: 1, l: 0.6607843137254902, a: 1},
     mutedYellow = {h: 0.1357142857142857, s: 1, l: 0.8627450980392157, a: 1},
-    colorOrange = {h: 0.08253968253968254, s: 0.9130434782608696, l: 0.5490196078431373, a: 1},
+    orange = {h: 0.08253968253968254, s: 0.9130434782608696, l: 0.5490196078431373, a: 1},
     mutedOrange = {h: 0.06851851851851849, s: 1, l: 0.8235294117647058, a: 1},
-    colorPurple = {h: 0.7234299516908212, s: 0.6052631578947367, l: 0.5529411764705883, a: 1},
+    purple = {h: 0.7234299516908212, s: 0.6052631578947367, l: 0.5529411764705883, a: 1},
     mutedPurple = {h: 0.7250000000000001, s: 0.7142857142857146, l: 0.8901960784313725, a: 1},
-    colorTeal = {h: 0.5234375, s: 0.8571428571428571, l: 0.4392156862745098, a: 1},
+    teal = {h: 0.5234375, s: 0.8571428571428571, l: 0.4392156862745098, a: 1},
     mutedTeal = {h: 0.5246913580246914, s: 0.7500000000000004, l: 0.8588235294117648, a: 1},
-    grayscaleGrayLightest = {h: 0.6666666666666666, s: 0.06666666666666654, l: 0.9705882352941176, a: 1},
-    grayscaleGrayLighter = {h: 0.6666666666666666, s: 0.027027027027026945, l: 0.9274509803921569, a: 1},
-    grayscaleGrayLight = {h: 0.6666666666666666, s: 0.014925373134328308, l: 0.8686274509803922, a: 1},
-    grayscaleGray = {h: 0.6666666666666666, s: 0.02752293577981655, l: 0.5725490196078431, a: 1},
-    grayscaleGrayDark = {h: 0.5833333333333334, s: 0.04395604395604395, l: 0.3568627450980392, a: 1},
-    grayscaleGrayDarker = {h: 0.5833333333333334, s: 0.12280701754385966, l: 0.22352941176470587, a: 1},
-    grayscaleBlack = {h: 0, s: 0, l: 0, a: 1},
-    colorYellow1 = {h: 0.1348747591522158, s: 1, l: 0.6607843137254902, a: 1}
+    grayLightest = {h: 0.6666666666666666, s: 0.06666666666666654, l: 0.9705882352941176, a: 1},
+    grayLighter = {h: 0.6666666666666666, s: 0.027027027027026945, l: 0.9274509803921569, a: 1},
+    grayLight = {h: 0.6666666666666666, s: 0.014925373134328308, l: 0.8686274509803922, a: 1},
+    gray = {h: 0.6666666666666666, s: 0.02752293577981655, l: 0.5725490196078431, a: 1},
+    grayDark = {h: 0.5833333333333334, s: 0.04395604395604395, l: 0.3568627450980392, a: 1},
+    grayDarker = {h: 0.5833333333333334, s: 0.12280701754385966, l: 0.22352941176470587, a: 1},
+    black = {h: 0, s: 0, l: 0, a: 1},
+    colorYellow = {h: 0.1348747591522158, s: 1, l: 0.6607843137254902, a: 1}
   } = {}) {
-    this.grayscaleWhite = new Color(grayscaleWhite);
-    this.colorGreen = new Color(colorGreen);
+    this.white = new Color(white);
+    this.green = new Color(green);
     this.mutedGreen = new Color(mutedGreen);
-    this.colorRed = new Color(colorRed);
+    this.red = new Color(red);
     this.mutedRed = new Color(mutedRed);
-    this.colorBlue = new Color(colorBlue);
+    this.blue = new Color(blue);
     this.mutedBlue = new Color(mutedBlue);
-    this.colorYellow = new Color(colorYellow);
+    this.yellow = new Color(yellow);
     this.mutedYellow = new Color(mutedYellow);
-    this.colorOrange = new Color(colorOrange);
+    this.orange = new Color(orange);
     this.mutedOrange = new Color(mutedOrange);
-    this.colorPurple = new Color(colorPurple);
+    this.purple = new Color(purple);
     this.mutedPurple = new Color(mutedPurple);
-    this.colorTeal = new Color(colorTeal);
+    this.teal = new Color(teal);
     this.mutedTeal = new Color(mutedTeal);
-    this.grayscaleGrayLightest = new Color(grayscaleGrayLightest);
-    this.grayscaleGrayLighter = new Color(grayscaleGrayLighter);
-    this.grayscaleGrayLight = new Color(grayscaleGrayLight);
-    this.grayscaleGray = new Color(grayscaleGray);
-    this.grayscaleGrayDark = new Color(grayscaleGrayDark);
-    this.grayscaleGrayDarker = new Color(grayscaleGrayDarker);
-    this.grayscaleBlack = new Color(grayscaleBlack);
-    this.colorYellow1 = new Color(colorYellow1);
+    this.grayLightest = new Color(grayLightest);
+    this.grayLighter = new Color(grayLighter);
+    this.grayLight = new Color(grayLight);
+    this.gray = new Color(gray);
+    this.grayDark = new Color(grayDark);
+    this.grayDarker = new Color(grayDarker);
+    this.black = new Color(black);
+    this.colorYellow = new Color(colorYellow);
   }
@@ -204,0 +204,0 @@ }

package.json

 {
   "name": "@manifoldco/mercury",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1",
   "license": "MIT",
@@ -5,0 +5,0 @@ "dependencies": {

README.md

 # @manifoldco/mercury
 
-## Usage
+Design tokens auto-generated from our Figma files. Powered by [Diez][diez].
 
+## 📚 Usage
+
 ```bash
@@ -14,13 +16,280 @@ npm install @manifoldco/mercury
 ```js
-import "@manifoldco/mercury/static/styles.css";
+import '@manifoldco/mercury/static/styles.css';
 ```
 
-Refer to the [Diez documentation][diez-css] for usage.
+Inside you’ll find something like the following (please note this is just an example; the actual CSS
+file may have changed a little):
 
+```css
+:root {
+  --c-white: 0, 0%, 100%;
+  --c-green: 169.48905109489053, 58.29787234042554%, 46.07843137254902%;
+  --c-muted-green: 156.85714285714286, 62.499999999999964%, 78.03921568627452%;
+  --c-red: 346.4088397790055, 73.87755102040816%, 48.03921568627451%;
+  --c-muted-red: 345.7627118644068, 100%, 88.4313725490196%;
+  --c-blue: 224.0425531914894, 75.80645161290323%, 48.627450980392155%;
+  --c-muted-blue: 218.1818181818182, 94.2857142857143%, 93.13725490196079%;
+  --c-yellow: 48.55491329479769, 100%, 66.07843137254902%;
+  --c-muted-yellow: 48.857142857142854, 100%, 86.27450980392157%;
+  --c-orange: 29.714285714285715, 91.30434782608697%, 54.90196078431373%;
+  --c-muted-orange: 24.666666666666657, 100%, 82.35294117647058%;
+  --c-purple: 260.4347826086956, 60.52631578947367%, 55.294117647058826%;
+  --c-muted-purple: 261.00000000000006, 71.42857142857146%, 89.01960784313725%;
+  --c-teal: 188.4375, 85.71428571428571%, 43.92156862745098%;
+  --c-muted-teal: 188.88888888888889, 75.00000000000004%, 85.88235294117648%;
+  --c-gray-lightest: 240, 6.666666666666654%, 97.05882352941177%;
+  --c-gray-lighter: 240, 2.7027027027026946%, 92.74509803921569%;
+  --c-gray-light: 240, 1.4925373134328308%, 86.86274509803921%;
+  --c-gray: 240, 2.752293577981655%, 57.25490196078431%;
+  --c-gray-dark: 210, 4.395604395604395%, 35.68627450980392%;
+  --c-gray-darker: 210, 12.280701754385966%, 22.352941176470587%;
+  --c-black: 0, 0%, 0%;
+  --c-color-yellow: 48.55491329479769, 100%, 66.07843137254902%;
+  --g-green: linear-gradient(
+    237deg,
+    hsla(152.14285714285714, 45.528455284552855%, 51.76470588235295%, 1) 7%,
+    hsla(199.62264150943395, 63.34661354581673%, 50.78431372549019%, 1) 111%
+  );
+  --g-brand: linear-gradient(
+    240deg,
+    hsla(340.3404255319149, 99.15611814345992%, 53.529411764705884%, 1) -12%,
+    hsla(271.875, 38.095238095238095%, 49.411764705882355%, 1) 24%,
+    hsla(199.62264150943395, 63.85542168674698%, 48.82352941176471%, 1) 70%,
+    hsla(21.52173913043478, 97.87234042553192%, 63.13725490196078%, 1) 86%,
+    hsla(44.39999999999999, 98.03921568627452%, 60%, 1) 123%
+  );
+  --g-green-muted: linear-gradient(
+    237deg,
+    hsla(150.8571428571429, 63.636363636363704%, 89.21568627450979%, 1) 7%,
+    hsla(200, 100%, 91.76470588235294%, 1) 111%
+  );
+  --g-brand1: linear-gradient(
+    45deg,
+    hsla(350, 64.07766990291263%, 59.6078431372549%, 1) 0%,
+    hsla(293.76623376623377, 35.15981735159818%, 42.94117647058824%, 1) 100%
+  );
+  --g-brand-muted: linear-gradient(
+    45deg,
+    hsla(348.83720930232556, 54.43037974683547%, 84.50980392156863%, 1) 0%,
+    hsla(294.5454545454545, 29.72972972972973%, 85.49019607843138%, 1) 100%
+  );
+  --g-blue: linear-gradient(
+    225deg,
+    hsla(199.62264150943395, 63.34661354581673%, 50.78431372549019%, 1) 0%,
+    hsla(239.2941176470588, 34.97942386831276%, 47.64705882352941%, 1) 100%
+  );
+  --g-blue-muted: linear-gradient(
+    225deg,
+    hsla(199.99999999999997, 100%, 84.70588235294117%, 1) 0%,
+    hsla(238.96551724137933, 100%, 88.62745098039215%, 1) 100%
+  );
+  --g-yellow: linear-gradient(
+    43deg,
+    hsla(38.3756345177665, 100%, 61.372549019607845%, 1) -3%,
+    hsla(48.47682119205298, 100%, 70.3921568627451%, 1) 100%
+  );
+  --g-yellow-muted: linear-gradient(
+    44deg,
+    hsla(38.49056603773584, 100%, 79.2156862745098%, 1) -3%,
+    hsla(49.0909090909091, 100%, 91.37254901960785%, 1) 108%
+  );
+  --g-orange: linear-gradient(
+    48deg,
+    hsla(336.75889328063244, 100%, 50.3921568627451%, 1) -34%,
+    hsla(51.17647058823529, 98.07692307692308%, 59.21568627450981%, 1) 112%
+  );
+  --g-orange-muted: linear-gradient(
+    45deg,
+    hsla(17.25, 80.00000000000004%, 80.3921568627451%, 1) -11%,
+    hsla(38.999999999999986, 100%, 92.15686274509804%, 1) 112%
+  );
+  --g-purple: linear-gradient(
+    225deg,
+    hsla(261.70212765957444, 100%, 72.35294117647058%, 1) 0%,
+    hsla(248.30188679245285, 70.04405286343612%, 55.490196078431374%, 1) 100%
+  );
+  --g-purple-muted: linear-gradient(
+    225deg,
+    hsla(261.8181818181818, 100%, 93.52941176470588%, 1) 0%,
+    hsla(247.99999999999997, 100%, 88.23529411764706%, 1) 100%
+  );
+  --g-red: linear-gradient(
+    45deg,
+    hsla(353.7037037037037, 86.17021276595743%, 36.86274509803922%, 1) 0%,
+    hsla(342.4752475247525, 100%, 60.3921568627451%, 1) 100%
+  );
+  --g-red-muted: linear-gradient(
+    225deg,
+    hsla(0, 100%, 85.09803921568627%, 1) 0%,
+    hsla(336.8852459016394, 96.82539682539684%, 75.29411764705883%, 1) 100%
+  );
+  --f-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji';
+  --f-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+}
+
+.diez-typography--caption {
+  font-family: var(--f-body);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 12px;
+  color: hsla(0, 0%, 0%, 1);
+  letter-spacing: 0px;
+  text-align: start;
+  text-decoration: none;
+}
+
+.diez-typography--label {
+  font-family: var(--f-body);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 14px;
+  color: hsla(0, 0%, 0%, 1);
+  letter-spacing: 0px;
+  text-align: start;
+  text-decoration: none;
+}
+
+.diez-typography--body {
+  font-family: var(--f-body);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  color: hsla(0, 0%, 0%, 1);
+  letter-spacing: 0px;
+  text-align: start;
+  text-decoration: none;
+}
+
+.diez-typography--subheading-small {
+  font-family: var(--f-body);
+  font-weight: 500;
+  font-style: normal;
+  font-size: 11px;
+  color: hsla(0, 0%, 0%, 1);
+  letter-spacing: 0px;
+  text-align: start;
+  text-decoration: none;
+}
+
+.diez-typography--subheading {
+  font-family: var(--f-body);
+  font-weight: 600;
+  font-style: normal;
+  font-size: 13px;
+  color: hsla(0, 0%, 0%, 1);
+  letter-spacing: 0px;
+  text-align: start;
+  text-decoration: none;
+}
+
+.diez-typography--heading {
+  font-family: var(--f-body);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 20px;
+  color: hsla(0, 0%, 0%, 1);
+  letter-spacing: 0px;
+  text-align: start;
+  text-decoration: none;
+}
+
+.diez-typography--heading-large {
+  font-family: var(--f-body);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 25px;
+  color: hsla(0, 0%, 0%, 1);
+  letter-spacing: 0px;
+  text-align: start;
+  text-decoration: none;
+}
+
+.diez-typography--heading-extra-large {
+  font-family: var(--f-body);
+  font-weight: 500;
+  font-style: normal;
+  font-size: 32px;
+  color: hsla(0, 0%, 0%, 1);
+  letter-spacing: 0px;
+  text-align: start;
+  text-decoration: none;
+}
+
+.diez-typography--small-screen-caption {
+  font-family: var(--f-body);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 13px;
+  color: hsla(0, 0%, 0%, 1);
+  letter-spacing: 0px;
+  text-align: start;
+  text-decoration: none;
+}
+
+.diez-typography--small-screen-label {
+  font-family: var(--f-body);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 14px;
+  color: hsla(0, 0%, 0%, 1);
+  letter-spacing: 0px;
+  text-align: start;
+  text-decoration: none;
+}
+
+.diez-typography--small-screen-body {
+  font-family: var(--f-body);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  color: hsla(0, 0%, 0%, 1);
+  letter-spacing: 0px;
+  text-align: start;
+  text-decoration: none;
+}
+
+.diez-typography--small-screen-heading {
+  font-family: var(--f-body);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 18px;
+  color: hsla(0, 0%, 0%, 1);
+  letter-spacing: 0px;
+  text-align: start;
+  text-decoration: none;
+}
+
+.diez-typography--small-screen-heading-large {
+  font-family: var(--f-body);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 22px;
+  color: hsla(0, 0%, 0%, 1);
+  letter-spacing: 0px;
+  text-align: start;
+  text-decoration: none;
+}
+
+.diez-typography--small-screen-heading-extra-large {
+  font-family: var(--f-body);
+  font-weight: 500;
+  font-style: normal;
+  font-size: 26px;
+  color: hsla(0, 0%, 0%, 1);
+  letter-spacing: 0px;
+  text-align: start;
+  text-decoration: none;
+}
+```
+
+Refer to the [Diez documentation][diez-css] for more info.
+
 ### JavaScript
 
-The JavaScript client allows for color manipulation and better handling of some values, but at an impact on your bundlesize.
+The JavaScript client allows for color manipulation and better handling of some values, but at an
+impact on your bundlesize.
 
 ```js
-import { DesignLanguage } from "@manifoldco/mercury";
+import { DesignLanguage } from '@manifoldco/mercury';
 ```
@@ -32,1 +301,39 @@
 [diez-js]: https://diez.org/getting-started/javascript.html
+
+## ♻️ Updating from Figma
+
+```bash
+npm run extract
+```
+
+You’ll need to authenticate with Figma.
+
+⚠️ **Note**: when updating, be mindful of missing assets. Often times, Figma will simply time-out,
+and fail to download.
+
+## 🚀 Deploying
+
+Currently, deploying happens manually. You’ll need to be signed into npm.
+
+Bump the patch number (the last digit) in `package.json` manually:
+
+```diff
+-  "version": "0.0.9",
++  "version": "0.0.10",
+```
+
+**Commit this change.**
+
+_Note: decause this is all managed by design, the version number doesn’t matter as much as
+traditional packages._
+
+Then, run:
+
+```
+npm run deploy
+```
+
+⚠️ **Note**: deploying won’t update the tokens! You’ll need to run `npm run extract` to pull the
+latest values.
+
+[diez]: https://diez.org

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4087724

increased by0.19%

Number of lines in readme file

338

increased by990.32%

No dependency changes