@tlon/indigo-tokens - npm Package Compare versions

Comparing version 1.2.10 to 1.2.11

dist/colors.d.ts

 declare const colors: {
-    util: string;
-    none: string;
     black: string;
@@ -5,0 +3,0 @@ gray8: string;

dist/core.d.ts

@@ -13,2 +13,3 @@ declare const core: {
     lineHeights: {
+        min: number;
         short: number;
@@ -15,0 +16,0 @@ regular: number;

dist/index.d.ts

@@ -1,140 +0,9 @@
-import dark from './dark';
-import light from './light';
+import dark from './themes/dark';
+import light from './themes/light';
+import inverted from './themes/inverted';
+import paperLight from './themes/paperLight';
+import paperDark from './themes/paperDark';
 import { ThemedStyledInterface } from 'styled-components';
 export declare type Theme = typeof light;
 export declare const styled: ThemedStyledInterface<{
-    reset: string;
-    boxRadii: {
-        minor: number;
-        mid: number;
-        major: number;
-    };
-    borderColor: {
-        default: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-        red: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-        blue: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-        green: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-        disabled: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-    };
-    backgroundColor: {
-        default: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-        red: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-        blue: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-        green: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-        disabled: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-    };
-    textColor: {
-        default: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-        red: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-        blue: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-        green: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-        disabled: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-    };
-    outlineColor: {
-        default: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-        red: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-        blue: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-        green: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-        disabled: {
-            hover: string;
-            active: string;
-            focus: string;
-            default: string;
-        };
-    };
     fonts: {
@@ -151,2 +20,3 @@ sans: string;
     lineHeights: {
+        min: number;
         short: number;
@@ -163,2 +33,3 @@ regular: number;
     colors: {
+        primary: string;
         util: string;
@@ -177,19 +48,11 @@ none: string;
         white: string;
-        red4: string;
-        red3: string;
         red2: string;
         red1: string;
         red0: string;
-        yellow4: string;
-        yellow3: string;
         yellow2: string;
         yellow1: string;
         yellow0: string;
-        green4: string;
-        green3: string;
         green2: string;
         green1: string;
         green0: string;
-        blue4: string;
-        blue3: string;
         blue2: string;
@@ -200,2 +63,2 @@ blue1: string;
 }>;
-export { dark, light };
+export { dark, light, inverted, paperLight, paperDark };

dist/indigo-tokens.cjs.development.js

@@ -28,4 +28,2 @@ 'use strict';
 var colors = {
-  util: '#FFFF00',
-  none: 'rgba(0,0,0,0)',
   // Black, white, grays
@@ -57,41 +55,6 @@ black: '#000000',
   blue2: '#001A46',
-  blue1: '#219DFF',
+  blue1: '#008EFF',
   blue0: '#E1F1FF'
 };
 
-var colors$1 = {
-  util: '#FFFF00',
-  none: 'rgba(0,0,0,0)',
-  // Black, white, grays
-  black: colors.white,
-  gray8: colors.gray0,
-  gray7: colors.gray1,
-  gray6: colors.gray2,
-  gray5: colors.gray3,
-  gray4: colors.gray4,
-  gray3: colors.gray5,
-  gray2: colors.gray6,
-  gray1: colors.gray7,
-  gray0: colors.gray8,
-  white: colors.black,
-  // Red
-  red2: colors.red0,
-  red1: colors.red1,
-  red0: colors.red2,
-  // Yellow
-  yellow2: colors.yellow0,
-  yellow1: colors.yellow1,
-  yellow0: colors.yellow2,
-  // Green
-  green2: colors.green0,
-  green1: colors.green1,
-  green0: colors.green2,
-  // Blue
-  blue2: colors.blue0,
-  blue1: colors.blue1,
-  blue0: colors.blue2
-};
-
-var reset = "\n  html, body, div, span, applet, object, iframe,\n  h1, h2, h3, h4, h5, h6, p, blockquote, pre,\n  a, abbr, acronym, address, big, cite, code,\n  del, dfn, em, img, ins, kbd, q, s, samp,\n  small, strike, strong, sub, sup, tt, var,\n  b, u, i, center,\n  dl, dt, dd, ol, ul, li,\n  fieldset, form, label, legend,\n  table, caption, tbody, tfoot, thead, tr, th, td,\n  article, aside, canvas, details, embed,\n  figure, figcaption, footer, header, hgroup,\n  menu, nav, output, ruby, section, summary,\n  time, mark, audio, video {\n    margin: 0;\n    padding: 0;\n    border: 0;\n    font-size: 100%;\n    font: inherit;\n    vertical-align: baseline;\n    box-sizing: border-box;\n    font-weight: normal;\n  }\n  body {\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  ol, ul {\n    list-style: none;\n  }\n  blockquote, q {\n    quotes: none;\n  }\n  blockquote:before, blockquote:after,\n  q:before, q:after {\n    content: '';\n    content: none;\n  }\n  table {\n    border-collapse: collapse;\n    border-spacing: 0;\n  }\n";
-
 var core = {
@@ -103,3 +66,3 @@ fonts: {
   // font-size
-  fontSizes: [10, 11, 12, 14, 16, 20, 24, 32, 48],
+  fontSizes: [10, 11, 12, 14, 16, 20, 24, 32, 48, 64, 72],
   // 	font-weight
@@ -109,9 +72,10 @@ fontWeights: {
     regular: 400,
-    bold: 500
+    bold: 600
   },
   // line-height
   lineHeights: {
-    "short": 1.333334,
+    min: 1.2,
+    "short": 1.333333,
     regular: 1.5,
-    tall: 1.666667
+    tall: 1.666666
   },
@@ -123,3 +87,3 @@ // border, border-top, border-right, border-bottom, border-left
   // border-radius
-  radii: [0, 4, 8, 12, 16, 20, 24, 32],
+  radii: [0, 2, 4, 6, 8, 10, 12, 16, 24, 32],
   // width, height, min-width, max-width, min-height, max-height
@@ -129,128 +93,96 @@ sizes: [0, 4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 160, 288, 448, 736],
   zIndices: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
-  breakpoints: ['768px', '1024px', '1440px']
+  breakpoints: ['768px', '1024px', '1440px', '2200px']
 };
 
-var borderColor = function borderColor(colors) {
-  return {
-    "default": {
-      hover: colors.gray2,
-      active: colors.gray2,
-      focus: colors.gray2,
-      "default": colors.gray2
-    },
-    caution: {
-      hover: colors.red1,
-      active: colors.red1,
-      focus: colors.red1,
-      "default": colors.red1
-    },
-    primary: {
-      hover: colors.blue1,
-      active: colors.blue1,
-      focus: colors.blue1,
-      "default": colors.blue1
-    },
-    disabled: {
-      hover: colors.gray3,
-      active: colors.gray3,
-      focus: colors.gray3,
-      "default": colors.gray3
-    }
-  };
-};
+var theme =
+/*#__PURE__*/
+_extends({
+  colors: {
+    // Black, white, grays
+    black: colors.white,
+    gray8: colors.gray0,
+    gray7: colors.gray1,
+    gray6: colors.gray2,
+    gray5: colors.gray3,
+    gray4: colors.gray4,
+    gray3: colors.gray5,
+    gray2: colors.gray6,
+    gray1: colors.gray7,
+    gray0: colors.gray8,
+    white: colors.black,
+    // Red
+    red2: colors.red0,
+    red1: colors.red1,
+    red0: colors.red2,
+    // Yellow
+    yellow2: colors.yellow0,
+    yellow1: colors.yellow1,
+    yellow0: colors.yellow2,
+    // Green
+    green2: colors.green0,
+    green1: colors.green1,
+    green0: colors.green2,
+    // Blue
+    blue2: colors.blue0,
+    blue1: colors.blue1,
+    blue0: colors.blue2,
+    // Utils
+    primary: colors.blue1,
+    util: '#FFFF00',
+    none: 'rgba(0,0,0,0)'
+  }
+}, core);
 
-var backgroundColor = function backgroundColor(colors) {
-  return {
-    "default": {
-      hover: colors.gray0,
-      active: colors.gray0,
-      focus: colors.white,
-      "default": colors.white
-    },
-    caution: {
-      hover: colors.red0,
-      active: colors.red0,
-      focus: colors.white,
-      "default": colors.white
-    },
-    primary: {
-      hover: colors.blue0,
-      active: colors.blue0,
-      focus: colors.white,
-      "default": colors.white
-    },
-    disabled: {
-      hover: colors.gray1,
-      active: colors.gray1,
-      focus: colors.gray1,
-      "default": colors.gray1
-    }
-  };
-};
+var theme$1 =
+/*#__PURE__*/
+_extends({
+  colors:
+  /*#__PURE__*/
+  _extends({}, colors, {
+    primary: colors.blue1,
+    util: '#FFFF00',
+    none: 'rgba(0,0,0,0)'
+  })
+}, core);
 
-var textColor = function textColor(colors) {
-  return {
-    "default": {
-      hover: colors.black,
-      active: colors.black,
-      focus: colors.black,
-      "default": colors.black
-    },
-    caution: {
-      hover: colors.red1,
-      active: colors.red1,
-      focus: colors.red1,
-      "default": colors.red1
-    },
-    primary: {
-      hover: colors.blue1,
-      active: colors.blue1,
-      focus: colors.blue1,
-      "default": colors.blue1
-    },
-    disabled: {
-      hover: colors.gray5,
-      active: colors.gray5,
-      focus: colors.gray5,
-      "default": colors.gray5
-    }
-  };
-};
+var theme$2 =
+/*#__PURE__*/
+_extends({
+  colors: {
+    // Black, white, grays
+    black: colors.white,
+    gray8: colors.gray0,
+    gray7: colors.gray1,
+    gray6: colors.gray2,
+    gray5: colors.gray3,
+    gray4: colors.gray4,
+    gray3: colors.gray5,
+    gray2: colors.gray6,
+    gray1: colors.gray7,
+    gray0: colors.gray8,
+    white: colors.black,
+    // 'Red'
+    red2: '#C4FFFC',
+    red1: '#21D5D0',
+    red0: '#001410',
+    // 'Yellow'
+    yellow2: '#C2E6FF',
+    yellow1: '#0063FF',
+    yellow0: '#000720',
+    // 'Green'
+    green2: '#FFCBDC',
+    green1: '#FF83B3',
+    green0: '#1F0018',
+    // 'Blue'
+    blue2: '#FFDC9F',
+    blue1: '#FF9123',
+    blue0: '#1E0E00',
+    // Util
+    primary: colors.blue1,
+    util: '#FFFF00',
+    none: 'rgba(0,0,0,0)'
+  }
+}, core);
 
-var outlineColor = function outlineColor(colors) {
-  return {
-    "default": {
-      hover: colors.none,
-      active: colors.gray0,
-      focus: colors.gray0,
-      "default": colors.none
-    },
-    caution: {
-      hover: colors.none,
-      active: colors.red0,
-      focus: colors.red0,
-      "default": colors.none
-    },
-    primary: {
-      hover: colors.none,
-      active: colors.blue0,
-      focus: colors.blue0,
-      "default": colors.none
-    },
-    disabled: {
-      hover: colors.none,
-      active: colors.none,
-      focus: colors.none,
-      "default": colors.none
-    }
-  };
-};
-
-var boxRadii = {
-  minor: core.radii[1],
-  mid: core.radii[2],
-  major: core.radii[3]
-};
-
-var theme =
+var theme$3 =
 /*#__PURE__*/
@@ -260,21 +192,23 @@ _extends({
   /*#__PURE__*/
-  _extends({}, colors$1)
-}, core, {
-  boxRadii: boxRadii,
-  reset: reset,
-  borderColor:
-  /*#__PURE__*/
-  borderColor(colors$1),
-  backgroundColor:
-  /*#__PURE__*/
-  backgroundColor(colors$1),
-  textColor:
-  /*#__PURE__*/
-  textColor(colors$1),
-  outlineColor:
-  /*#__PURE__*/
-  outlineColor(colors$1)
-});
+  _extends({}, colors, {
+    // grays
+    black: '#191919',
+    gray8: '#383838',
+    gray7: '#474747',
+    gray6: '#666666',
+    gray5: '#8D8D8D',
+    gray4: '#969696',
+    gray3: '#999999',
+    gray2: '#B8B8B8',
+    gray1: '#D6D6D6',
+    gray0: '#DCDCDC',
+    white: '#E5E5E5',
+    // util
+    primary: colors.blue1,
+    util: '#FFFF00',
+    none: 'rgba(0,0,0,0)'
+  })
+}, core);
 
-var theme$1 =
+var theme$4 =
 /*#__PURE__*/
@@ -284,19 +218,21 @@ _extends({
   /*#__PURE__*/
-  _extends({}, colors)
-}, core, {
-  reset: reset,
-  boxRadii: boxRadii,
-  borderColor:
-  /*#__PURE__*/
-  borderColor(colors),
-  backgroundColor:
-  /*#__PURE__*/
-  backgroundColor(colors),
-  textColor:
-  /*#__PURE__*/
-  textColor(colors),
-  outlineColor:
-  /*#__PURE__*/
-  outlineColor(colors)
-});
+  _extends({}, colors, {
+    // grays
+    white: '#191919',
+    gray0: '#383838',
+    gray1: '#474747',
+    gray2: '#666666',
+    gray3: '#8D8D8D',
+    gray4: '#969696',
+    gray5: '#999999',
+    gray6: '#B8B8B8',
+    gray7: '#D6D6D6',
+    gray8: '#DCDCDC',
+    black: '#E5E5E5',
+    // util
+    primary: colors.blue1,
+    util: '#FFFF00',
+    none: 'rgba(0,0,0,0)'
+  })
+}, core);
 
@@ -306,4 +242,7 @@ var styled = baseStyled;
 exports.dark = theme;
+exports.inverted = theme$2;
 exports.light = theme$1;
+exports.paperDark = theme$4;
+exports.paperLight = theme$3;
 exports.styled = styled;
 //# sourceMappingURL=indigo-tokens.cjs.development.js.map

dist/indigo-tokens.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=(e=require("styled-components"))&&"object"==typeof e&&"default"in e?e.default:e;function o(){return(o=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var o=arguments[r];for(var a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a])}return e}).apply(this,arguments)}var a={util:"#FFFF00",none:"rgba(0,0,0,0)",black:"#000000",gray8:"#222222",gray7:"#333333",gray6:"#555555",gray5:"#808080",gray4:"#999999",gray3:"#AAAAAA",gray2:"#CCCCCC",gray1:"#EEEEEE",gray0:"#F4F4F4",white:"#FFFFFF",red2:"#3C0003",red1:"#FF4136",red0:"#FFEBEF",yellow2:"#3D1900",yellow1:"#FFC700",yellow0:"#FFF8DF",green2:"#002E1F",green1:"#009F65",green0:"#E0FFE7",blue2:"#001A46",blue1:"#219DFF",blue0:"#E1F1FF"},n={util:"#FFFF00",none:"rgba(0,0,0,0)",black:a.white,gray8:a.gray0,gray7:a.gray1,gray6:a.gray2,gray5:a.gray3,gray4:a.gray4,gray3:a.gray5,gray2:a.gray6,gray1:a.gray7,gray0:a.gray8,white:a.black,red2:a.red0,red1:a.red1,red0:a.red2,yellow2:a.yellow0,yellow1:a.yellow1,yellow0:a.yellow2,green2:a.green0,green1:a.green1,green0:a.green2,blue2:a.blue0,blue1:a.blue1,blue0:a.blue2},t="\n  html, body, div, span, applet, object, iframe,\n  h1, h2, h3, h4, h5, h6, p, blockquote, pre,\n  a, abbr, acronym, address, big, cite, code,\n  del, dfn, em, img, ins, kbd, q, s, samp,\n  small, strike, strong, sub, sup, tt, var,\n  b, u, i, center,\n  dl, dt, dd, ol, ul, li,\n  fieldset, form, label, legend,\n  table, caption, tbody, tfoot, thead, tr, th, td,\n  article, aside, canvas, details, embed,\n  figure, figcaption, footer, header, hgroup,\n  menu, nav, output, ruby, section, summary,\n  time, mark, audio, video {\n    margin: 0;\n    padding: 0;\n    border: 0;\n    font-size: 100%;\n    font: inherit;\n    vertical-align: baseline;\n    box-sizing: border-box;\n    font-weight: normal;\n  }\n  body {\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  ol, ul {\n    list-style: none;\n  }\n  blockquote, q {\n    quotes: none;\n  }\n  blockquote:before, blockquote:after,\n  q:before, q:after {\n    content: '';\n    content: none;\n  }\n  table {\n    border-collapse: collapse;\n    border-spacing: 0;\n  }\n",l={fonts:{sans:"\"Inter\", \"Inter UI\", -apple-system, BlinkMacSystemFont, 'San Francisco', 'Helvetica Neue', Arial, sans-serif",mono:'"Source Code Pro", "Roboto mono", "Courier New", monospace'},fontSizes:[10,11,12,14,16,20,24,32,48],fontWeights:{thin:300,regular:400,bold:500},lineHeights:{short:1.333334,regular:1.5,tall:1.666667},borders:["none","1px solid"],space:[0,4,8,12,16,20,24,32,48,64,96,160,288,448,736],radii:[0,4,8,12,16,20,24,32],sizes:[0,4,8,12,16,20,24,32,48,64,96,160,288,448,736],zIndices:[0,1,2,3,4,5,6,7,8,9,10],breakpoints:["768px","1024px","1440px"]},i=function(e){return{default:{hover:e.gray2,active:e.gray2,focus:e.gray2,default:e.gray2},caution:{hover:e.red1,active:e.red1,focus:e.red1,default:e.red1},primary:{hover:e.blue1,active:e.blue1,focus:e.blue1,default:e.blue1},disabled:{hover:e.gray3,active:e.gray3,focus:e.gray3,default:e.gray3}}},u=function(e){return{default:{hover:e.gray0,active:e.gray0,focus:e.white,default:e.white},caution:{hover:e.red0,active:e.red0,focus:e.white,default:e.white},primary:{hover:e.blue0,active:e.blue0,focus:e.white,default:e.white},disabled:{hover:e.gray1,active:e.gray1,focus:e.gray1,default:e.gray1}}},d=function(e){return{default:{hover:e.black,active:e.black,focus:e.black,default:e.black},caution:{hover:e.red1,active:e.red1,focus:e.red1,default:e.red1},primary:{hover:e.blue1,active:e.blue1,focus:e.blue1,default:e.blue1},disabled:{hover:e.gray5,active:e.gray5,focus:e.gray5,default:e.gray5}}},s=function(e){return{default:{hover:e.none,active:e.gray0,focus:e.gray0,default:e.none},caution:{hover:e.none,active:e.red0,focus:e.red0,default:e.none},primary:{hover:e.none,active:e.blue0,focus:e.blue0,default:e.none},disabled:{hover:e.none,active:e.none,focus:e.none,default:e.none}}},c={minor:l.radii[1],mid:l.radii[2],major:l.radii[3]},g=o({colors:o({},n)},l,{boxRadii:c,reset:t,borderColor:i(n),backgroundColor:u(n),textColor:d(n),outlineColor:s(n)}),b=o({colors:o({},a)},l,{reset:t,boxRadii:c,borderColor:i(a),backgroundColor:u(a),textColor:d(a),outlineColor:s(a)}),y=r;exports.dark=g,exports.light=b,exports.styled=y;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r,e=(r=require("styled-components"))&&"object"==typeof r&&"default"in r?r.default:r;function a(){return(a=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var a=arguments[e];for(var y in a)Object.prototype.hasOwnProperty.call(a,y)&&(r[y]=a[y])}return r}).apply(this,arguments)}var y={black:"#000000",gray8:"#222222",gray7:"#333333",gray6:"#555555",gray5:"#808080",gray4:"#999999",gray3:"#AAAAAA",gray2:"#CCCCCC",gray1:"#EEEEEE",gray0:"#F4F4F4",white:"#FFFFFF",red2:"#3C0003",red1:"#FF4136",red0:"#FFEBEF",yellow2:"#3D1900",yellow1:"#FFC700",yellow0:"#FFF8DF",green2:"#002E1F",green1:"#009F65",green0:"#E0FFE7",blue2:"#001A46",blue1:"#008EFF",blue0:"#E1F1FF"},g={fonts:{sans:"\"Inter\", \"Inter UI\", -apple-system, BlinkMacSystemFont, 'San Francisco', 'Helvetica Neue', Arial, sans-serif",mono:'"Source Code Pro", "Roboto mono", "Courier New", monospace'},fontSizes:[10,11,12,14,16,20,24,32,48,64,72],fontWeights:{thin:300,regular:400,bold:600},lineHeights:{min:1.2,short:1.333333,regular:1.5,tall:1.666666},borders:["none","1px solid"],space:[0,4,8,12,16,20,24,32,48,64,96,160,288,448,736],radii:[0,2,4,6,8,10,12,16,24,32],sizes:[0,4,8,12,16,20,24,32,48,64,96,160,288,448,736],zIndices:[0,1,2,3,4,5,6,7,8,9,10],breakpoints:["768px","1024px","1440px","2200px"]},l=a({colors:{black:y.white,gray8:y.gray0,gray7:y.gray1,gray6:y.gray2,gray5:y.gray3,gray4:y.gray4,gray3:y.gray5,gray2:y.gray6,gray1:y.gray7,gray0:y.gray8,white:y.black,red2:y.red0,red1:y.red1,red0:y.red2,yellow2:y.yellow0,yellow1:y.yellow1,yellow0:y.yellow2,green2:y.green0,green1:y.green1,green0:y.green2,blue2:y.blue0,blue1:y.blue1,blue0:y.blue2,primary:y.blue1,util:"#FFFF00",none:"rgba(0,0,0,0)"}},g),o=a({colors:a({},y,{primary:y.blue1,util:"#FFFF00",none:"rgba(0,0,0,0)"})},g),F=a({colors:{black:y.white,gray8:y.gray0,gray7:y.gray1,gray6:y.gray2,gray5:y.gray3,gray4:y.gray4,gray3:y.gray5,gray2:y.gray6,gray1:y.gray7,gray0:y.gray8,white:y.black,red2:"#C4FFFC",red1:"#21D5D0",red0:"#001410",yellow2:"#C2E6FF",yellow1:"#0063FF",yellow0:"#000720",green2:"#FFCBDC",green1:"#FF83B3",green0:"#1F0018",blue2:"#FFDC9F",blue1:"#FF9123",blue0:"#1E0E00",primary:y.blue1,util:"#FFFF00",none:"rgba(0,0,0,0)"}},g),t=a({colors:a({},y,{black:"#191919",gray8:"#383838",gray7:"#474747",gray6:"#666666",gray5:"#8D8D8D",gray4:"#969696",gray3:"#999999",gray2:"#B8B8B8",gray1:"#D6D6D6",gray0:"#DCDCDC",white:"#E5E5E5",primary:y.blue1,util:"#FFFF00",none:"rgba(0,0,0,0)"})},g),n=a({colors:a({},y,{white:"#191919",gray0:"#383838",gray1:"#474747",gray2:"#666666",gray3:"#8D8D8D",gray4:"#969696",gray5:"#999999",gray6:"#B8B8B8",gray7:"#D6D6D6",gray8:"#DCDCDC",black:"#E5E5E5",primary:y.blue1,util:"#FFFF00",none:"rgba(0,0,0,0)"})},g),i=e;exports.dark=l,exports.inverted=F,exports.light=o,exports.paperDark=n,exports.paperLight=t,exports.styled=i;
 //# sourceMappingURL=indigo-tokens.cjs.production.min.js.map

dist/indigo-tokens.esm.js

@@ -22,4 +22,2 @@ import baseStyled from 'styled-components';
 var colors = {
-  util: '#FFFF00',
-  none: 'rgba(0,0,0,0)',
   // Black, white, grays
@@ -51,41 +49,6 @@ black: '#000000',
   blue2: '#001A46',
-  blue1: '#219DFF',
+  blue1: '#008EFF',
   blue0: '#E1F1FF'
 };
 
-var colors$1 = {
-  util: '#FFFF00',
-  none: 'rgba(0,0,0,0)',
-  // Black, white, grays
-  black: colors.white,
-  gray8: colors.gray0,
-  gray7: colors.gray1,
-  gray6: colors.gray2,
-  gray5: colors.gray3,
-  gray4: colors.gray4,
-  gray3: colors.gray5,
-  gray2: colors.gray6,
-  gray1: colors.gray7,
-  gray0: colors.gray8,
-  white: colors.black,
-  // Red
-  red2: colors.red0,
-  red1: colors.red1,
-  red0: colors.red2,
-  // Yellow
-  yellow2: colors.yellow0,
-  yellow1: colors.yellow1,
-  yellow0: colors.yellow2,
-  // Green
-  green2: colors.green0,
-  green1: colors.green1,
-  green0: colors.green2,
-  // Blue
-  blue2: colors.blue0,
-  blue1: colors.blue1,
-  blue0: colors.blue2
-};
-
-var reset = "\n  html, body, div, span, applet, object, iframe,\n  h1, h2, h3, h4, h5, h6, p, blockquote, pre,\n  a, abbr, acronym, address, big, cite, code,\n  del, dfn, em, img, ins, kbd, q, s, samp,\n  small, strike, strong, sub, sup, tt, var,\n  b, u, i, center,\n  dl, dt, dd, ol, ul, li,\n  fieldset, form, label, legend,\n  table, caption, tbody, tfoot, thead, tr, th, td,\n  article, aside, canvas, details, embed,\n  figure, figcaption, footer, header, hgroup,\n  menu, nav, output, ruby, section, summary,\n  time, mark, audio, video {\n    margin: 0;\n    padding: 0;\n    border: 0;\n    font-size: 100%;\n    font: inherit;\n    vertical-align: baseline;\n    box-sizing: border-box;\n    font-weight: normal;\n  }\n  body {\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  ol, ul {\n    list-style: none;\n  }\n  blockquote, q {\n    quotes: none;\n  }\n  blockquote:before, blockquote:after,\n  q:before, q:after {\n    content: '';\n    content: none;\n  }\n  table {\n    border-collapse: collapse;\n    border-spacing: 0;\n  }\n";
-
 var core = {
@@ -97,3 +60,3 @@ fonts: {
   // font-size
-  fontSizes: [10, 11, 12, 14, 16, 20, 24, 32, 48],
+  fontSizes: [10, 11, 12, 14, 16, 20, 24, 32, 48, 64, 72],
   // 	font-weight
@@ -103,9 +66,10 @@ fontWeights: {
     regular: 400,
-    bold: 500
+    bold: 600
   },
   // line-height
   lineHeights: {
-    "short": 1.333334,
+    min: 1.2,
+    "short": 1.333333,
     regular: 1.5,
-    tall: 1.666667
+    tall: 1.666666
   },
@@ -117,3 +81,3 @@ // border, border-top, border-right, border-bottom, border-left
   // border-radius
-  radii: [0, 4, 8, 12, 16, 20, 24, 32],
+  radii: [0, 2, 4, 6, 8, 10, 12, 16, 24, 32],
   // width, height, min-width, max-width, min-height, max-height
@@ -123,128 +87,96 @@ sizes: [0, 4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 160, 288, 448, 736],
   zIndices: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
-  breakpoints: ['768px', '1024px', '1440px']
+  breakpoints: ['768px', '1024px', '1440px', '2200px']
 };
 
-var borderColor = function borderColor(colors) {
-  return {
-    "default": {
-      hover: colors.gray2,
-      active: colors.gray2,
-      focus: colors.gray2,
-      "default": colors.gray2
-    },
-    caution: {
-      hover: colors.red1,
-      active: colors.red1,
-      focus: colors.red1,
-      "default": colors.red1
-    },
-    primary: {
-      hover: colors.blue1,
-      active: colors.blue1,
-      focus: colors.blue1,
-      "default": colors.blue1
-    },
-    disabled: {
-      hover: colors.gray3,
-      active: colors.gray3,
-      focus: colors.gray3,
-      "default": colors.gray3
-    }
-  };
-};
+var theme =
+/*#__PURE__*/
+_extends({
+  colors: {
+    // Black, white, grays
+    black: colors.white,
+    gray8: colors.gray0,
+    gray7: colors.gray1,
+    gray6: colors.gray2,
+    gray5: colors.gray3,
+    gray4: colors.gray4,
+    gray3: colors.gray5,
+    gray2: colors.gray6,
+    gray1: colors.gray7,
+    gray0: colors.gray8,
+    white: colors.black,
+    // Red
+    red2: colors.red0,
+    red1: colors.red1,
+    red0: colors.red2,
+    // Yellow
+    yellow2: colors.yellow0,
+    yellow1: colors.yellow1,
+    yellow0: colors.yellow2,
+    // Green
+    green2: colors.green0,
+    green1: colors.green1,
+    green0: colors.green2,
+    // Blue
+    blue2: colors.blue0,
+    blue1: colors.blue1,
+    blue0: colors.blue2,
+    // Utils
+    primary: colors.blue1,
+    util: '#FFFF00',
+    none: 'rgba(0,0,0,0)'
+  }
+}, core);
 
-var backgroundColor = function backgroundColor(colors) {
-  return {
-    "default": {
-      hover: colors.gray0,
-      active: colors.gray0,
-      focus: colors.white,
-      "default": colors.white
-    },
-    caution: {
-      hover: colors.red0,
-      active: colors.red0,
-      focus: colors.white,
-      "default": colors.white
-    },
-    primary: {
-      hover: colors.blue0,
-      active: colors.blue0,
-      focus: colors.white,
-      "default": colors.white
-    },
-    disabled: {
-      hover: colors.gray1,
-      active: colors.gray1,
-      focus: colors.gray1,
-      "default": colors.gray1
-    }
-  };
-};
+var theme$1 =
+/*#__PURE__*/
+_extends({
+  colors:
+  /*#__PURE__*/
+  _extends({}, colors, {
+    primary: colors.blue1,
+    util: '#FFFF00',
+    none: 'rgba(0,0,0,0)'
+  })
+}, core);
 
-var textColor = function textColor(colors) {
-  return {
-    "default": {
-      hover: colors.black,
-      active: colors.black,
-      focus: colors.black,
-      "default": colors.black
-    },
-    caution: {
-      hover: colors.red1,
-      active: colors.red1,
-      focus: colors.red1,
-      "default": colors.red1
-    },
-    primary: {
-      hover: colors.blue1,
-      active: colors.blue1,
-      focus: colors.blue1,
-      "default": colors.blue1
-    },
-    disabled: {
-      hover: colors.gray5,
-      active: colors.gray5,
-      focus: colors.gray5,
-      "default": colors.gray5
-    }
-  };
-};
+var theme$2 =
+/*#__PURE__*/
+_extends({
+  colors: {
+    // Black, white, grays
+    black: colors.white,
+    gray8: colors.gray0,
+    gray7: colors.gray1,
+    gray6: colors.gray2,
+    gray5: colors.gray3,
+    gray4: colors.gray4,
+    gray3: colors.gray5,
+    gray2: colors.gray6,
+    gray1: colors.gray7,
+    gray0: colors.gray8,
+    white: colors.black,
+    // 'Red'
+    red2: '#C4FFFC',
+    red1: '#21D5D0',
+    red0: '#001410',
+    // 'Yellow'
+    yellow2: '#C2E6FF',
+    yellow1: '#0063FF',
+    yellow0: '#000720',
+    // 'Green'
+    green2: '#FFCBDC',
+    green1: '#FF83B3',
+    green0: '#1F0018',
+    // 'Blue'
+    blue2: '#FFDC9F',
+    blue1: '#FF9123',
+    blue0: '#1E0E00',
+    // Util
+    primary: colors.blue1,
+    util: '#FFFF00',
+    none: 'rgba(0,0,0,0)'
+  }
+}, core);
 
-var outlineColor = function outlineColor(colors) {
-  return {
-    "default": {
-      hover: colors.none,
-      active: colors.gray0,
-      focus: colors.gray0,
-      "default": colors.none
-    },
-    caution: {
-      hover: colors.none,
-      active: colors.red0,
-      focus: colors.red0,
-      "default": colors.none
-    },
-    primary: {
-      hover: colors.none,
-      active: colors.blue0,
-      focus: colors.blue0,
-      "default": colors.none
-    },
-    disabled: {
-      hover: colors.none,
-      active: colors.none,
-      focus: colors.none,
-      "default": colors.none
-    }
-  };
-};
-
-var boxRadii = {
-  minor: core.radii[1],
-  mid: core.radii[2],
-  major: core.radii[3]
-};
-
-var theme =
+var theme$3 =
 /*#__PURE__*/
@@ -254,21 +186,23 @@ _extends({
   /*#__PURE__*/
-  _extends({}, colors$1)
-}, core, {
-  boxRadii: boxRadii,
-  reset: reset,
-  borderColor:
-  /*#__PURE__*/
-  borderColor(colors$1),
-  backgroundColor:
-  /*#__PURE__*/
-  backgroundColor(colors$1),
-  textColor:
-  /*#__PURE__*/
-  textColor(colors$1),
-  outlineColor:
-  /*#__PURE__*/
-  outlineColor(colors$1)
-});
+  _extends({}, colors, {
+    // grays
+    black: '#191919',
+    gray8: '#383838',
+    gray7: '#474747',
+    gray6: '#666666',
+    gray5: '#8D8D8D',
+    gray4: '#969696',
+    gray3: '#999999',
+    gray2: '#B8B8B8',
+    gray1: '#D6D6D6',
+    gray0: '#DCDCDC',
+    white: '#E5E5E5',
+    // util
+    primary: colors.blue1,
+    util: '#FFFF00',
+    none: 'rgba(0,0,0,0)'
+  })
+}, core);
 
-var theme$1 =
+var theme$4 =
 /*#__PURE__*/
@@ -278,23 +212,25 @@ _extends({
   /*#__PURE__*/
-  _extends({}, colors)
-}, core, {
-  reset: reset,
-  boxRadii: boxRadii,
-  borderColor:
-  /*#__PURE__*/
-  borderColor(colors),
-  backgroundColor:
-  /*#__PURE__*/
-  backgroundColor(colors),
-  textColor:
-  /*#__PURE__*/
-  textColor(colors),
-  outlineColor:
-  /*#__PURE__*/
-  outlineColor(colors)
-});
+  _extends({}, colors, {
+    // grays
+    white: '#191919',
+    gray0: '#383838',
+    gray1: '#474747',
+    gray2: '#666666',
+    gray3: '#8D8D8D',
+    gray4: '#969696',
+    gray5: '#999999',
+    gray6: '#B8B8B8',
+    gray7: '#D6D6D6',
+    gray8: '#DCDCDC',
+    black: '#E5E5E5',
+    // util
+    primary: colors.blue1,
+    util: '#FFFF00',
+    none: 'rgba(0,0,0,0)'
+  })
+}, core);
 
 var styled = baseStyled;
 
-export { theme as dark, theme$1 as light, styled };
+export { theme as dark, theme$2 as inverted, theme$1 as light, theme$4 as paperDark, theme$3 as paperLight, styled };
 //# sourceMappingURL=indigo-tokens.esm.js.map

package.json

 {
   "name": "@tlon/indigo-tokens",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "description": "Tlon's design language",
@@ -5,0 +5,0 @@ "author": "tlon",

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

2

decreased by-60%

Worsened metrics

Total package byte prevSize

57692

decreased by-34.98%

Number of package files

18

decreased by-21.74%

Lines of code

834

decreased by-43.42%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes