@tlon/indigo-tokens - npm Package Compare versions

Comparing version 1.2.6 to 1.2.7

dist/colors.d.ts

 declare const colors: {
     util: string;
+    none: string;
     black: string;
@@ -35,2 +36,3 @@ gray8: string;
 };
+export declare type Colors = typeof colors;
 export default colors;

dist/dark.d.ts

@@ -1,63 +0,136 @@
-import { ThemedStyledInterface } from 'styled-components';
 declare const theme: {
+    boxRadii: {
+        minor: number;
+        mid: number;
+        major: number;
+    };
     reset: string;
-    fonts: {
-        sans: string;
-        mono: string;
+    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;
+        };
     };
-    fontSizes: number[];
-    fontWeights: {
-        thin: number;
-        regular: number;
-        bold: number;
+    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;
+        };
     };
-    lineHeights: {
-        short: number;
-        regular: number;
-        tall: number;
+    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;
+        };
     };
-    borders: string[];
-    space: number[];
-    radii: number[];
-    sizes: number[];
-    zIndices: number[];
-    breakpoints: string[];
-    colors: {
-        util: string;
-        black: string;
-        gray8: string;
-        gray7: string;
-        gray6: string;
-        gray5: string;
-        gray4: string;
-        gray3: string;
-        gray2: string;
-        gray1: string;
-        gray0: 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;
-        blue1: string;
-        blue0: 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;
+        };
     };
-};
-export declare type Theme = typeof theme;
-export declare const styled: ThemedStyledInterface<{
-    reset: string;
     fonts: {
@@ -86,2 +159,3 @@ sans: string;
         util: string;
+        none: string;
         black: string;
@@ -119,3 +193,3 @@ gray8: string;
     };
-}>;
+};
 export default theme;

dist/index.d.ts

 import dark from './dark';
 import light from './light';
+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: {
+        sans: string;
+        mono: string;
+    };
+    fontSizes: number[];
+    fontWeights: {
+        thin: number;
+        regular: number;
+        bold: number;
+    };
+    lineHeights: {
+        short: number;
+        regular: number;
+        tall: number;
+    };
+    borders: string[];
+    space: number[];
+    radii: number[];
+    sizes: number[];
+    zIndices: number[];
+    breakpoints: string[];
+    colors: {
+        util: string;
+        none: string;
+        black: string;
+        gray8: string;
+        gray7: string;
+        gray6: string;
+        gray5: string;
+        gray4: string;
+        gray3: string;
+        gray2: string;
+        gray1: string;
+        gray0: 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;
+        blue1: string;
+        blue0: string;
+    };
+}>;
 export { dark, light };

dist/indigo-tokens.cjs.development.js

@@ -5,4 +5,6 @@ 'use strict';
 
-require('styled-components');
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+var baseStyled = _interopDefault(require('styled-components'));
+
 function _extends() {
@@ -28,5 +30,6 @@ _extends = Object.assign || function (target) {
   util: '#FFFF00',
+  none: 'rgba(0,0,0,0)',
   // Black, white, grays
   black: '#000000',
-  gray8: '#111111',
+  gray8: '#222222',
   gray7: '#333333',
@@ -42,27 +45,68 @@ gray6: '#555555',
   // Red
-  red4: '#550400',
+  red4: '#380100',
   red3: '#AA160D',
   red2: '#FF4136',
-  red1: '#FF9D97',
-  red0: '#FFD0CD',
+  red1: '#f59b9b',
+  red0: '#ffebef',
   // Yellow
-  yellow4: '#FF8700',
+  yellow4: '#E65100',
   yellow3: '#FFB700',
   yellow2: '#FFD700',
   yellow1: '#FBF1A9',
-  yellow0: '#FFFCEB',
+  yellow0: '#fffde5',
   // Green
   green4: '#033827',
   green3: '#0B714D',
-  green2: '#19A974',
+  green2: '#0ca36b',
   green1: '#9EEBCF',
-  green0: '#E8FDF5',
+  green0: '#e5f5ee',
   // Blue
   blue4: '#001B44',
   blue3: '#00449E',
-  blue2: '#357EDD',
-  blue1: '#96CCFF',
-  blue0: '#CDECFF'
+  blue2: '#2196F3',
+  blue1: '#90CAF9',
+  blue0: '#E3F2FD'
 };
 
+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
+  red4: colors.red0,
+  red3: colors.red1,
+  red2: colors.red2,
+  red1: colors.red3,
+  red0: colors.red4,
+  // Yellow
+  yellow4: colors.yellow0,
+  yellow3: colors.yellow1,
+  yellow2: colors.yellow2,
+  yellow1: colors.yellow3,
+  yellow0: colors.yellow4,
+  // Green
+  green4: colors.green0,
+  green3: colors.green1,
+  green2: colors.green2,
+  green1: colors.green3,
+  green0: colors.green4,
+  // Blue
+  blue4: colors.blue0,
+  blue3: colors.blue1,
+  blue2: colors.blue2,
+  blue1: colors.blue3,
+  blue0: colors.blue4
+};
+
 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";
@@ -102,47 +146,169 @@
 
+var borderColor = function borderColor(colors) {
+  return {
+    "default": {
+      hover: colors.gray2,
+      active: colors.gray2,
+      focus: colors.gray2,
+      "default": colors.gray2
+    },
+    red: {
+      hover: colors.red2,
+      active: colors.red2,
+      focus: colors.red2,
+      "default": colors.red2
+    },
+    blue: {
+      hover: colors.blue2,
+      active: colors.blue2,
+      focus: colors.blue2,
+      "default": colors.blue2
+    },
+    green: {
+      hover: colors.green2,
+      active: colors.green2,
+      focus: colors.green2,
+      "default": colors.green2
+    },
+    disabled: {
+      hover: colors.gray3,
+      active: colors.gray3,
+      focus: colors.gray3,
+      "default": colors.gray3
+    }
+  };
+};
+
+var backgroundColor = function backgroundColor(colors) {
+  return {
+    "default": {
+      hover: colors.gray0,
+      active: colors.gray0,
+      focus: colors.white,
+      "default": colors.white
+    },
+    red: {
+      hover: colors.red0,
+      active: colors.red0,
+      focus: colors.white,
+      "default": colors.white
+    },
+    blue: {
+      hover: colors.blue0,
+      active: colors.blue0,
+      focus: colors.white,
+      "default": colors.white
+    },
+    green: {
+      hover: colors.green0,
+      active: colors.green0,
+      focus: colors.white,
+      "default": colors.white
+    },
+    disabled: {
+      hover: colors.gray1,
+      active: colors.gray1,
+      focus: colors.gray1,
+      "default": colors.gray1
+    }
+  };
+};
+
+var textColor = function textColor(colors) {
+  return {
+    "default": {
+      hover: colors.black,
+      active: colors.black,
+      focus: colors.black,
+      "default": colors.black
+    },
+    red: {
+      hover: colors.red2,
+      active: colors.red2,
+      focus: colors.red2,
+      "default": colors.red2
+    },
+    blue: {
+      hover: colors.blue2,
+      active: colors.blue2,
+      focus: colors.blue2,
+      "default": colors.blue2
+    },
+    green: {
+      hover: colors.green2,
+      active: colors.green2,
+      focus: colors.green2,
+      "default": colors.green2
+    },
+    disabled: {
+      hover: colors.gray5,
+      active: colors.gray5,
+      focus: colors.gray5,
+      "default": colors.gray5
+    }
+  };
+};
+
+var outlineColor = function outlineColor(colors) {
+  return {
+    "default": {
+      hover: colors.none,
+      active: colors.gray0,
+      focus: colors.gray0,
+      "default": colors.none
+    },
+    red: {
+      hover: colors.none,
+      active: colors.red0,
+      focus: colors.red0,
+      "default": colors.none
+    },
+    blue: {
+      hover: colors.none,
+      active: colors.blue0,
+      focus: colors.blue0,
+      "default": colors.none
+    },
+    green: {
+      hover: colors.none,
+      active: colors.green0,
+      focus: colors.green0,
+      "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 =
 /*#__PURE__*/
 _extends({
-  // color, background-color, border-color
-  colors: {
-    util: '#FFFF00',
-    // 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
-    red4: colors.red0,
-    red3: colors.red1,
-    red2: colors.red2,
-    red1: colors.red3,
-    red0: colors.red4,
-    // Yellow
-    yellow4: colors.yellow0,
-    yellow3: colors.yellow1,
-    yellow2: colors.yellow2,
-    yellow1: colors.yellow3,
-    yellow0: colors.yellow4,
-    // Green
-    green4: colors.green0,
-    green3: colors.green1,
-    green2: colors.green2,
-    green1: colors.green3,
-    green0: colors.green4,
-    // Blue
-    blue4: colors.blue0,
-    blue3: colors.blue1,
-    blue2: colors.blue2,
-    blue1: colors.blue3,
-    blue0: colors.blue4
-  }
+  colors:
+  /*#__PURE__*/
+  _extends({}, colors$1)
 }, core, {
-  reset: reset
+  boxRadii: boxRadii,
+  reset: reset,
+  borderColor:
+  /*#__PURE__*/
+  borderColor(colors$1),
+  backgroundColor:
+  /*#__PURE__*/
+  backgroundColor(colors$1),
+  textColor:
+  /*#__PURE__*/
+  textColor(colors$1),
+  outlineColor:
+  /*#__PURE__*/
+  outlineColor(colors$1)
 });
@@ -157,7 +323,23 @@
 }, core, {
-  reset: reset
+  reset: reset,
+  boxRadii: boxRadii,
+  borderColor:
+  /*#__PURE__*/
+  borderColor(colors),
+  backgroundColor:
+  /*#__PURE__*/
+  backgroundColor(colors),
+  textColor:
+  /*#__PURE__*/
+  textColor(colors),
+  outlineColor:
+  /*#__PURE__*/
+  outlineColor(colors)
 });
 
+var styled = baseStyled;
+
 exports.dark = theme;
 exports.light = theme$1;
+exports.styled = styled;
 //# sourceMappingURL=indigo-tokens.cjs.development.js.map

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

@@ -1,2 +0,2 @@
-"use strict";function e(){return(e=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}Object.defineProperty(exports,"__esModule",{value:!0}),require("styled-components");var r={util:"#FFFF00",black:"#000000",gray8:"#111111",gray7:"#333333",gray6:"#555555",gray5:"#777777",gray4:"#999999",gray3:"#AAAAAA",gray2:"#CCCCCC",gray1:"#EEEEEE",gray0:"#F4F4F4",white:"#FFFFFF",red4:"#550400",red3:"#AA160D",red2:"#FF4136",red1:"#FF9D97",red0:"#FFD0CD",yellow4:"#FF8700",yellow3:"#FFB700",yellow2:"#FFD700",yellow1:"#FBF1A9",yellow0:"#FFFCEB",green4:"#033827",green3:"#0B714D",green2:"#19A974",green1:"#9EEBCF",green0:"#E8FDF5",blue4:"#001B44",blue3:"#00449E",blue2:"#357EDD",blue1:"#96CCFF",blue0:"#CDECFF"},n="\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",o={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"]},l=e({colors:{util:"#FFFF00",black:r.white,gray8:r.gray0,gray7:r.gray1,gray6:r.gray2,gray5:r.gray3,gray4:r.gray4,gray3:r.gray5,gray2:r.gray6,gray1:r.gray7,gray0:r.gray8,white:r.black,red4:r.red0,red3:r.red1,red2:r.red2,red1:r.red3,red0:r.red4,yellow4:r.yellow0,yellow3:r.yellow1,yellow2:r.yellow2,yellow1:r.yellow3,yellow0:r.yellow4,green4:r.green0,green3:r.green1,green2:r.green2,green1:r.green3,green0:r.green4,blue4:r.blue0,blue3:r.blue1,blue2:r.blue2,blue1:r.blue3,blue0:r.blue4}},o,{reset:n}),t=e({colors:e({},r)},o,{reset:n});exports.dark=l,exports.light=t;
+"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 n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e}).apply(this,arguments)}var n={util:"#FFFF00",none:"rgba(0,0,0,0)",black:"#000000",gray8:"#222222",gray7:"#333333",gray6:"#555555",gray5:"#777777",gray4:"#999999",gray3:"#AAAAAA",gray2:"#CCCCCC",gray1:"#EEEEEE",gray0:"#F4F4F4",white:"#FFFFFF",red4:"#380100",red3:"#AA160D",red2:"#FF4136",red1:"#f59b9b",red0:"#ffebef",yellow4:"#E65100",yellow3:"#FFB700",yellow2:"#FFD700",yellow1:"#FBF1A9",yellow0:"#fffde5",green4:"#033827",green3:"#0B714D",green2:"#0ca36b",green1:"#9EEBCF",green0:"#e5f5ee",blue4:"#001B44",blue3:"#00449E",blue2:"#2196F3",blue1:"#90CAF9",blue0:"#E3F2FD"},a={util:"#FFFF00",none:"rgba(0,0,0,0)",black:n.white,gray8:n.gray0,gray7:n.gray1,gray6:n.gray2,gray5:n.gray3,gray4:n.gray4,gray3:n.gray5,gray2:n.gray6,gray1:n.gray7,gray0:n.gray8,white:n.black,red4:n.red0,red3:n.red1,red2:n.red2,red1:n.red3,red0:n.red4,yellow4:n.yellow0,yellow3:n.yellow1,yellow2:n.yellow2,yellow1:n.yellow3,yellow0:n.yellow4,green4:n.green0,green3:n.green1,green2:n.green2,green1:n.green3,green0:n.green4,blue4:n.blue0,blue3:n.blue1,blue2:n.blue2,blue1:n.blue3,blue0:n.blue4},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},red:{hover:e.red2,active:e.red2,focus:e.red2,default:e.red2},blue:{hover:e.blue2,active:e.blue2,focus:e.blue2,default:e.blue2},green:{hover:e.green2,active:e.green2,focus:e.green2,default:e.green2},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},red:{hover:e.red0,active:e.red0,focus:e.white,default:e.white},blue:{hover:e.blue0,active:e.blue0,focus:e.white,default:e.white},green:{hover:e.green0,active:e.green0,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},red:{hover:e.red2,active:e.red2,focus:e.red2,default:e.red2},blue:{hover:e.blue2,active:e.blue2,focus:e.blue2,default:e.blue2},green:{hover:e.green2,active:e.green2,focus:e.green2,default:e.green2},disabled:{hover:e.gray5,active:e.gray5,focus:e.gray5,default:e.gray5}}},g=function(e){return{default:{hover:e.none,active:e.gray0,focus:e.gray0,default:e.none},red:{hover:e.none,active:e.red0,focus:e.red0,default:e.none},blue:{hover:e.none,active:e.blue0,focus:e.blue0,default:e.none},green:{hover:e.none,active:e.green0,focus:e.green0,default:e.none},disabled:{hover:e.none,active:e.none,focus:e.none,default:e.none}}},s={minor:l.radii[1],mid:l.radii[2],major:l.radii[3]},c=o({colors:o({},a)},l,{boxRadii:s,reset:t,borderColor:i(a),backgroundColor:u(a),textColor:d(a),outlineColor:g(a)}),b=o({colors:o({},n)},l,{reset:t,boxRadii:s,borderColor:i(n),backgroundColor:u(n),textColor:d(n),outlineColor:g(n)}),f=r;exports.dark=c,exports.light=b,exports.styled=f;
 //# sourceMappingURL=indigo-tokens.cjs.production.min.js.map

dist/indigo-tokens.esm.js

@@ -1,2 +0,2 @@
-import 'styled-components';
+import baseStyled from 'styled-components';
 
@@ -23,5 +23,6 @@ function _extends() {
   util: '#FFFF00',
+  none: 'rgba(0,0,0,0)',
   // Black, white, grays
   black: '#000000',
-  gray8: '#111111',
+  gray8: '#222222',
   gray7: '#333333',
@@ -37,27 +38,68 @@ gray6: '#555555',
   // Red
-  red4: '#550400',
+  red4: '#380100',
   red3: '#AA160D',
   red2: '#FF4136',
-  red1: '#FF9D97',
-  red0: '#FFD0CD',
+  red1: '#f59b9b',
+  red0: '#ffebef',
   // Yellow
-  yellow4: '#FF8700',
+  yellow4: '#E65100',
   yellow3: '#FFB700',
   yellow2: '#FFD700',
   yellow1: '#FBF1A9',
-  yellow0: '#FFFCEB',
+  yellow0: '#fffde5',
   // Green
   green4: '#033827',
   green3: '#0B714D',
-  green2: '#19A974',
+  green2: '#0ca36b',
   green1: '#9EEBCF',
-  green0: '#E8FDF5',
+  green0: '#e5f5ee',
   // Blue
   blue4: '#001B44',
   blue3: '#00449E',
-  blue2: '#357EDD',
-  blue1: '#96CCFF',
-  blue0: '#CDECFF'
+  blue2: '#2196F3',
+  blue1: '#90CAF9',
+  blue0: '#E3F2FD'
 };
 
+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
+  red4: colors.red0,
+  red3: colors.red1,
+  red2: colors.red2,
+  red1: colors.red3,
+  red0: colors.red4,
+  // Yellow
+  yellow4: colors.yellow0,
+  yellow3: colors.yellow1,
+  yellow2: colors.yellow2,
+  yellow1: colors.yellow3,
+  yellow0: colors.yellow4,
+  // Green
+  green4: colors.green0,
+  green3: colors.green1,
+  green2: colors.green2,
+  green1: colors.green3,
+  green0: colors.green4,
+  // Blue
+  blue4: colors.blue0,
+  blue3: colors.blue1,
+  blue2: colors.blue2,
+  blue1: colors.blue3,
+  blue0: colors.blue4
+};
+
 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";
@@ -97,47 +139,169 @@
 
+var borderColor = function borderColor(colors) {
+  return {
+    "default": {
+      hover: colors.gray2,
+      active: colors.gray2,
+      focus: colors.gray2,
+      "default": colors.gray2
+    },
+    red: {
+      hover: colors.red2,
+      active: colors.red2,
+      focus: colors.red2,
+      "default": colors.red2
+    },
+    blue: {
+      hover: colors.blue2,
+      active: colors.blue2,
+      focus: colors.blue2,
+      "default": colors.blue2
+    },
+    green: {
+      hover: colors.green2,
+      active: colors.green2,
+      focus: colors.green2,
+      "default": colors.green2
+    },
+    disabled: {
+      hover: colors.gray3,
+      active: colors.gray3,
+      focus: colors.gray3,
+      "default": colors.gray3
+    }
+  };
+};
+
+var backgroundColor = function backgroundColor(colors) {
+  return {
+    "default": {
+      hover: colors.gray0,
+      active: colors.gray0,
+      focus: colors.white,
+      "default": colors.white
+    },
+    red: {
+      hover: colors.red0,
+      active: colors.red0,
+      focus: colors.white,
+      "default": colors.white
+    },
+    blue: {
+      hover: colors.blue0,
+      active: colors.blue0,
+      focus: colors.white,
+      "default": colors.white
+    },
+    green: {
+      hover: colors.green0,
+      active: colors.green0,
+      focus: colors.white,
+      "default": colors.white
+    },
+    disabled: {
+      hover: colors.gray1,
+      active: colors.gray1,
+      focus: colors.gray1,
+      "default": colors.gray1
+    }
+  };
+};
+
+var textColor = function textColor(colors) {
+  return {
+    "default": {
+      hover: colors.black,
+      active: colors.black,
+      focus: colors.black,
+      "default": colors.black
+    },
+    red: {
+      hover: colors.red2,
+      active: colors.red2,
+      focus: colors.red2,
+      "default": colors.red2
+    },
+    blue: {
+      hover: colors.blue2,
+      active: colors.blue2,
+      focus: colors.blue2,
+      "default": colors.blue2
+    },
+    green: {
+      hover: colors.green2,
+      active: colors.green2,
+      focus: colors.green2,
+      "default": colors.green2
+    },
+    disabled: {
+      hover: colors.gray5,
+      active: colors.gray5,
+      focus: colors.gray5,
+      "default": colors.gray5
+    }
+  };
+};
+
+var outlineColor = function outlineColor(colors) {
+  return {
+    "default": {
+      hover: colors.none,
+      active: colors.gray0,
+      focus: colors.gray0,
+      "default": colors.none
+    },
+    red: {
+      hover: colors.none,
+      active: colors.red0,
+      focus: colors.red0,
+      "default": colors.none
+    },
+    blue: {
+      hover: colors.none,
+      active: colors.blue0,
+      focus: colors.blue0,
+      "default": colors.none
+    },
+    green: {
+      hover: colors.none,
+      active: colors.green0,
+      focus: colors.green0,
+      "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 =
 /*#__PURE__*/
 _extends({
-  // color, background-color, border-color
-  colors: {
-    util: '#FFFF00',
-    // 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
-    red4: colors.red0,
-    red3: colors.red1,
-    red2: colors.red2,
-    red1: colors.red3,
-    red0: colors.red4,
-    // Yellow
-    yellow4: colors.yellow0,
-    yellow3: colors.yellow1,
-    yellow2: colors.yellow2,
-    yellow1: colors.yellow3,
-    yellow0: colors.yellow4,
-    // Green
-    green4: colors.green0,
-    green3: colors.green1,
-    green2: colors.green2,
-    green1: colors.green3,
-    green0: colors.green4,
-    // Blue
-    blue4: colors.blue0,
-    blue3: colors.blue1,
-    blue2: colors.blue2,
-    blue1: colors.blue3,
-    blue0: colors.blue4
-  }
+  colors:
+  /*#__PURE__*/
+  _extends({}, colors$1)
 }, core, {
-  reset: reset
+  boxRadii: boxRadii,
+  reset: reset,
+  borderColor:
+  /*#__PURE__*/
+  borderColor(colors$1),
+  backgroundColor:
+  /*#__PURE__*/
+  backgroundColor(colors$1),
+  textColor:
+  /*#__PURE__*/
+  textColor(colors$1),
+  outlineColor:
+  /*#__PURE__*/
+  outlineColor(colors$1)
 });
@@ -152,6 +316,21 @@
 }, core, {
-  reset: reset
+  reset: reset,
+  boxRadii: boxRadii,
+  borderColor:
+  /*#__PURE__*/
+  borderColor(colors),
+  backgroundColor:
+  /*#__PURE__*/
+  backgroundColor(colors),
+  textColor:
+  /*#__PURE__*/
+  textColor(colors),
+  outlineColor:
+  /*#__PURE__*/
+  outlineColor(colors)
 });
 
-export { theme as dark, theme$1 as light };
+var styled = baseStyled;
+
+export { theme as dark, theme$1 as light, styled };
 //# sourceMappingURL=indigo-tokens.esm.js.map

dist/light.d.ts

@@ -1,63 +0,136 @@
-import { ThemedStyledInterface } from 'styled-components';
 declare const theme: {
     reset: string;
-    fonts: {
-        sans: string;
-        mono: string;
+    boxRadii: {
+        minor: number;
+        mid: number;
+        major: number;
     };
-    fontSizes: number[];
-    fontWeights: {
-        thin: number;
-        regular: number;
-        bold: 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;
+        };
     };
-    lineHeights: {
-        short: number;
-        regular: number;
-        tall: number;
+    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;
+        };
     };
-    borders: string[];
-    space: number[];
-    radii: number[];
-    sizes: number[];
-    zIndices: number[];
-    breakpoints: string[];
-    colors: {
-        util: string;
-        black: string;
-        gray8: string;
-        gray7: string;
-        gray6: string;
-        gray5: string;
-        gray4: string;
-        gray3: string;
-        gray2: string;
-        gray1: string;
-        gray0: 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;
-        blue1: string;
-        blue0: 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;
+        };
     };
-};
-export declare type Theme = typeof theme;
-export declare const styled: ThemedStyledInterface<{
-    reset: 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: {
@@ -86,2 +159,3 @@ sans: string;
         util: string;
+        none: string;
         black: string;
@@ -119,3 +193,3 @@ gray8: string;
     };
-}>;
+};
 export default theme;

package.json

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

README.md

@@ -5,2 +5,6 @@ # indigo-tokens
 
+### Related
+[Indigo Tokens (this library)](https://www.github.com/urbit/indigo-tokens)
+[Indigo React](https://www.github.com/urbit/indigo-react)
+
 **getting started**
@@ -7,0 +11,0 @@

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

Improved metrics

Total package byte prevSize

98096

increased by96.01%

Number of package files

23

increased by43.75%

Lines of code

1627

increased by162.84%

Number of lines in readme file

18

increased by28.57%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes