@tlon/indigo-light - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/index.d.ts

@@ -8,11 +8,78 @@ import { ThemedStyledInterface } from 'styled-components';
         lightGray: string;
+        washedGray: string;
         red: string;
+        lightRed: string;
+        washedRed: string;
         yellow: string;
+        lightYellow: string;
+        washedYellow: string;
         green: string;
+        lightGreen: string;
+        washedGreen: string;
         blue: string;
-        highlight: string;
-        caution: string;
-        error: string;
-        success: string;
+        lightBlue: string;
+        washedBlue: string;
         none: string;
+        scales: {
+            white10: string;
+            white20: string;
+            white30: string;
+            white40: string;
+            white50: string;
+            white60: string;
+            white70: string;
+            white80: string;
+            white90: string;
+            white100: string;
+            black10: string;
+            black20: string;
+            black30: string;
+            black40: string;
+            black50: string;
+            black60: string;
+            black70: string;
+            black80: string;
+            black90: string;
+            black100: string;
+            red10: string;
+            red20: string;
+            red30: string;
+            red40: string;
+            red50: string;
+            red60: string;
+            red70: string;
+            red80: string;
+            red90: string;
+            red100: string;
+            yellow10: string;
+            yellow20: string;
+            yellow30: string;
+            yellow40: string;
+            yellow50: string;
+            yellow60: string;
+            yellow70: string;
+            yellow80: string;
+            yellow90: string;
+            yellow100: string;
+            green10: string;
+            green20: string;
+            green30: string;
+            green40: string;
+            green50: string;
+            green60: string;
+            green70: string;
+            green80: string;
+            green90: string;
+            green100: string;
+            blue10: string;
+            blue20: string;
+            blue30: string;
+            blue40: string;
+            blue50: string;
+            blue60: string;
+            blue70: string;
+            blue80: string;
+            blue90: string;
+            blue100: string;
+        };
     };
@@ -49,11 +116,78 @@ fonts: {
         lightGray: string;
+        washedGray: string;
         red: string;
+        lightRed: string;
+        washedRed: string;
         yellow: string;
+        lightYellow: string;
+        washedYellow: string;
         green: string;
+        lightGreen: string;
+        washedGreen: string;
         blue: string;
-        highlight: string;
-        caution: string;
-        error: string;
-        success: string;
+        lightBlue: string;
+        washedBlue: string;
         none: string;
+        scales: {
+            white10: string;
+            white20: string;
+            white30: string;
+            white40: string;
+            white50: string;
+            white60: string;
+            white70: string;
+            white80: string;
+            white90: string;
+            white100: string;
+            black10: string;
+            black20: string;
+            black30: string;
+            black40: string;
+            black50: string;
+            black60: string;
+            black70: string;
+            black80: string;
+            black90: string;
+            black100: string;
+            red10: string;
+            red20: string;
+            red30: string;
+            red40: string;
+            red50: string;
+            red60: string;
+            red70: string;
+            red80: string;
+            red90: string;
+            red100: string;
+            yellow10: string;
+            yellow20: string;
+            yellow30: string;
+            yellow40: string;
+            yellow50: string;
+            yellow60: string;
+            yellow70: string;
+            yellow80: string;
+            yellow90: string;
+            yellow100: string;
+            green10: string;
+            green20: string;
+            green30: string;
+            green40: string;
+            green50: string;
+            green60: string;
+            green70: string;
+            green80: string;
+            green90: string;
+            green100: string;
+            blue10: string;
+            blue20: string;
+            blue30: string;
+            blue40: string;
+            blue50: string;
+            blue60: string;
+            blue70: string;
+            blue80: string;
+            blue90: string;
+            blue100: string;
+        };
     };
@@ -60,0 +194,0 @@ fonts: {

dist/indigo-light.cjs.development.js

@@ -12,4 +12,2 @@ 'use strict';
   black: 'rgba(0,0,0,1)',
-  gray: 'rgba(169,169,169,1)',
-  lightGray: 'rgba(242,242,242,1)',
   red: 'rgba(255,65,54,1)',
@@ -20,2 +18,64 @@ yellow: 'rgba(255,199,0,1)',
 };
+var scales = {
+  white10: 'rgba(255,255,255,0.1)',
+  white20: 'rgba(255,255,255,0.2)',
+  white30: 'rgba(255,255,255,0.3)',
+  white40: 'rgba(255,255,255,0.4)',
+  white50: 'rgba(255,255,255,0.5)',
+  white60: 'rgba(255,255,255,0.6)',
+  white70: 'rgba(255,255,255,0.7)',
+  white80: 'rgba(255,255,255,0.8)',
+  white90: 'rgba(255,255,255,0.9)',
+  white100: 'rgba(255,255,255,1)',
+  black10: 'rgba(0,0,0,0.1)',
+  black20: 'rgba(0,0,0,0.2)',
+  black30: 'rgba(0,0,0,0.3)',
+  black40: 'rgba(0,0,0,0.4)',
+  black50: 'rgba(0,0,0,0.5)',
+  black60: 'rgba(0,0,0,0.6)',
+  black70: 'rgba(0,0,0,0.7)',
+  black80: 'rgba(0,0,0,0.8)',
+  black90: 'rgba(0,0,0,0.9)',
+  black100: 'rgba(0,0,0,1)',
+  red10: 'rgba(255,65,54,0.1)',
+  red20: 'rgba(255,65,54,0.2)',
+  red30: 'rgba(255,65,54,0.3)',
+  red40: 'rgba(255,65,54,0.4)',
+  red50: 'rgba(255,65,54,0.5)',
+  red60: 'rgba(255,65,54,0.6)',
+  red70: 'rgba(255,65,54,0.7)',
+  red80: 'rgba(255,65,54,0.8)',
+  red90: 'rgba(255,65,54,0.9)',
+  red100: 'rgba(255,65,54,1)',
+  yellow10: 'rgba(255,199,0,0.1)',
+  yellow20: 'rgba(255,199,0,0.2)',
+  yellow30: 'rgba(255,199,0,0.3)',
+  yellow40: 'rgba(255,199,0,0.4)',
+  yellow50: 'rgba(255,199,0,0.5)',
+  yellow60: 'rgba(255,199,0,0.6)',
+  yellow70: 'rgba(255,199,0,0.7)',
+  yellow80: 'rgba(255,199,0,0.8)',
+  yellow90: 'rgba(255,199,0,0.9)',
+  yellow100: 'rgba(255,199,0,1)',
+  green10: 'rgba(0,159,101,0.1)',
+  green20: 'rgba(0,159,101,0.2)',
+  green30: 'rgba(0,159,101,0.3)',
+  green40: 'rgba(0,159,101,0.4)',
+  green50: 'rgba(0,159,101,0.5)',
+  green60: 'rgba(0,159,101,0.6)',
+  green70: 'rgba(0,159,101,0.7)',
+  green80: 'rgba(0,159,101,0.8)',
+  green90: 'rgba(0,159,101,0.9)',
+  green100: 'rgba(0,159,101,1)',
+  blue10: 'rgba(0,142,255,0.1)',
+  blue20: 'rgba(0,142,255,0.2)',
+  blue30: 'rgba(0,142,255,0.3)',
+  blue40: 'rgba(0,142,255,0.4)',
+  blue50: 'rgba(0,142,255,0.5)',
+  blue60: 'rgba(0,142,255,0.6)',
+  blue70: 'rgba(0,142,255,0.7)',
+  blue80: 'rgba(0,142,255,0.8)',
+  blue90: 'rgba(0,142,255,0.9)',
+  blue100: 'rgba(0,142,255,1)'
+};
 var theme = {
@@ -25,13 +85,19 @@ colors: {
     black: base.black,
-    gray: base.gray,
-    lightGray: base.lightGray,
+    gray: scales.black60,
+    lightGray: scales.black30,
+    washedGray: scales.black10,
     red: base.red,
+    lightRed: scales.red30,
+    washedRed: scales.red10,
     yellow: base.yellow,
+    lightYellow: scales.yellow30,
+    washedYellow: scales.yellow10,
     green: base.green,
+    lightGreen: scales.green30,
+    washedGreen: scales.green10,
     blue: base.blue,
-    highlight: base.blue,
-    caution: base.yellow,
-    error: base.red,
-    success: base.green,
-    none: 'rgba(0,0,0,0)'
+    lightBlue: scales.blue30,
+    washedBlue: scales.blue10,
+    none: 'rgba(0,0,0,0)',
+    scales: scales
   },
@@ -38,0 +104,0 @@ fonts: {

dist/indigo-light.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;exports.default={colors:{white:"rgba(255,255,255,1)",black:"rgba(0,0,0,1)",gray:"rgba(169,169,169,1)",lightGray:"rgba(242,242,242,1)",red:"rgba(255,65,54,1)",yellow:"rgba(255,199,0,1)",green:"rgba(0,159,101,1)",blue:"rgba(0,142,255,1)",highlight:"rgba(0,142,255,1)",caution:"rgba(255,199,0,1)",error:"rgba(255,65,54,1)",success:"rgba(0,159,101,1)",none:"rgba(0,0,0,0)"},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:[12,16,24,32,48,64],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,16,24,32,48,64,96],radii:[0,2,4,8,16],sizes:[0,4,8,16,24,32,48,64,96],zIndices:[0,1,2,3,4,5,6,7,8,9,10],breakpoints:["768px","1024px","1440px","2200px"]},exports.styled=r;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r={white10:"rgba(255,255,255,0.1)",white20:"rgba(255,255,255,0.2)",white30:"rgba(255,255,255,0.3)",white40:"rgba(255,255,255,0.4)",white50:"rgba(255,255,255,0.5)",white60:"rgba(255,255,255,0.6)",white70:"rgba(255,255,255,0.7)",white80:"rgba(255,255,255,0.8)",white90:"rgba(255,255,255,0.9)",white100:"rgba(255,255,255,1)",black10:"rgba(0,0,0,0.1)",black20:"rgba(0,0,0,0.2)",black30:"rgba(0,0,0,0.3)",black40:"rgba(0,0,0,0.4)",black50:"rgba(0,0,0,0.5)",black60:"rgba(0,0,0,0.6)",black70:"rgba(0,0,0,0.7)",black80:"rgba(0,0,0,0.8)",black90:"rgba(0,0,0,0.9)",black100:"rgba(0,0,0,1)",red10:"rgba(255,65,54,0.1)",red20:"rgba(255,65,54,0.2)",red30:"rgba(255,65,54,0.3)",red40:"rgba(255,65,54,0.4)",red50:"rgba(255,65,54,0.5)",red60:"rgba(255,65,54,0.6)",red70:"rgba(255,65,54,0.7)",red80:"rgba(255,65,54,0.8)",red90:"rgba(255,65,54,0.9)",red100:"rgba(255,65,54,1)",yellow10:"rgba(255,199,0,0.1)",yellow20:"rgba(255,199,0,0.2)",yellow30:"rgba(255,199,0,0.3)",yellow40:"rgba(255,199,0,0.4)",yellow50:"rgba(255,199,0,0.5)",yellow60:"rgba(255,199,0,0.6)",yellow70:"rgba(255,199,0,0.7)",yellow80:"rgba(255,199,0,0.8)",yellow90:"rgba(255,199,0,0.9)",yellow100:"rgba(255,199,0,1)",green10:"rgba(0,159,101,0.1)",green20:"rgba(0,159,101,0.2)",green30:"rgba(0,159,101,0.3)",green40:"rgba(0,159,101,0.4)",green50:"rgba(0,159,101,0.5)",green60:"rgba(0,159,101,0.6)",green70:"rgba(0,159,101,0.7)",green80:"rgba(0,159,101,0.8)",green90:"rgba(0,159,101,0.9)",green100:"rgba(0,159,101,1)",blue10:"rgba(0,142,255,0.1)",blue20:"rgba(0,142,255,0.2)",blue30:"rgba(0,142,255,0.3)",blue40:"rgba(0,142,255,0.4)",blue50:"rgba(0,142,255,0.5)",blue60:"rgba(0,142,255,0.6)",blue70:"rgba(0,142,255,0.7)",blue80:"rgba(0,142,255,0.8)",blue90:"rgba(0,142,255,0.9)",blue100:"rgba(0,142,255,1)"},a=(e=require("styled-components"))&&"object"==typeof e&&"default"in e?e.default:e;exports.default={colors:{white:"rgba(255,255,255,1)",black:"rgba(0,0,0,1)",gray:r.black60,lightGray:r.black30,washedGray:r.black10,red:"rgba(255,65,54,1)",lightRed:r.red30,washedRed:r.red10,yellow:"rgba(255,199,0,1)",lightYellow:r.yellow30,washedYellow:r.yellow10,green:"rgba(0,159,101,1)",lightGreen:r.green30,washedGreen:r.green10,blue:"rgba(0,142,255,1)",lightBlue:r.blue30,washedBlue:r.blue10,none:"rgba(0,0,0,0)",scales:r},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:[12,16,24,32,48,64],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,16,24,32,48,64,96],radii:[0,2,4,8,16],sizes:[0,4,8,16,24,32,48,64,96],zIndices:[0,1,2,3,4,5,6,7,8,9,10],breakpoints:["768px","1024px","1440px","2200px"]},exports.styled=a;
 //# sourceMappingURL=indigo-light.cjs.production.min.js.map

dist/indigo-light.esm.js

@@ -6,4 +6,2 @@ import baseStyled from 'styled-components';
   black: 'rgba(0,0,0,1)',
-  gray: 'rgba(169,169,169,1)',
-  lightGray: 'rgba(242,242,242,1)',
   red: 'rgba(255,65,54,1)',
@@ -14,2 +12,64 @@ yellow: 'rgba(255,199,0,1)',
 };
+var scales = {
+  white10: 'rgba(255,255,255,0.1)',
+  white20: 'rgba(255,255,255,0.2)',
+  white30: 'rgba(255,255,255,0.3)',
+  white40: 'rgba(255,255,255,0.4)',
+  white50: 'rgba(255,255,255,0.5)',
+  white60: 'rgba(255,255,255,0.6)',
+  white70: 'rgba(255,255,255,0.7)',
+  white80: 'rgba(255,255,255,0.8)',
+  white90: 'rgba(255,255,255,0.9)',
+  white100: 'rgba(255,255,255,1)',
+  black10: 'rgba(0,0,0,0.1)',
+  black20: 'rgba(0,0,0,0.2)',
+  black30: 'rgba(0,0,0,0.3)',
+  black40: 'rgba(0,0,0,0.4)',
+  black50: 'rgba(0,0,0,0.5)',
+  black60: 'rgba(0,0,0,0.6)',
+  black70: 'rgba(0,0,0,0.7)',
+  black80: 'rgba(0,0,0,0.8)',
+  black90: 'rgba(0,0,0,0.9)',
+  black100: 'rgba(0,0,0,1)',
+  red10: 'rgba(255,65,54,0.1)',
+  red20: 'rgba(255,65,54,0.2)',
+  red30: 'rgba(255,65,54,0.3)',
+  red40: 'rgba(255,65,54,0.4)',
+  red50: 'rgba(255,65,54,0.5)',
+  red60: 'rgba(255,65,54,0.6)',
+  red70: 'rgba(255,65,54,0.7)',
+  red80: 'rgba(255,65,54,0.8)',
+  red90: 'rgba(255,65,54,0.9)',
+  red100: 'rgba(255,65,54,1)',
+  yellow10: 'rgba(255,199,0,0.1)',
+  yellow20: 'rgba(255,199,0,0.2)',
+  yellow30: 'rgba(255,199,0,0.3)',
+  yellow40: 'rgba(255,199,0,0.4)',
+  yellow50: 'rgba(255,199,0,0.5)',
+  yellow60: 'rgba(255,199,0,0.6)',
+  yellow70: 'rgba(255,199,0,0.7)',
+  yellow80: 'rgba(255,199,0,0.8)',
+  yellow90: 'rgba(255,199,0,0.9)',
+  yellow100: 'rgba(255,199,0,1)',
+  green10: 'rgba(0,159,101,0.1)',
+  green20: 'rgba(0,159,101,0.2)',
+  green30: 'rgba(0,159,101,0.3)',
+  green40: 'rgba(0,159,101,0.4)',
+  green50: 'rgba(0,159,101,0.5)',
+  green60: 'rgba(0,159,101,0.6)',
+  green70: 'rgba(0,159,101,0.7)',
+  green80: 'rgba(0,159,101,0.8)',
+  green90: 'rgba(0,159,101,0.9)',
+  green100: 'rgba(0,159,101,1)',
+  blue10: 'rgba(0,142,255,0.1)',
+  blue20: 'rgba(0,142,255,0.2)',
+  blue30: 'rgba(0,142,255,0.3)',
+  blue40: 'rgba(0,142,255,0.4)',
+  blue50: 'rgba(0,142,255,0.5)',
+  blue60: 'rgba(0,142,255,0.6)',
+  blue70: 'rgba(0,142,255,0.7)',
+  blue80: 'rgba(0,142,255,0.8)',
+  blue90: 'rgba(0,142,255,0.9)',
+  blue100: 'rgba(0,142,255,1)'
+};
 var theme = {
@@ -19,13 +79,19 @@ colors: {
     black: base.black,
-    gray: base.gray,
-    lightGray: base.lightGray,
+    gray: scales.black60,
+    lightGray: scales.black30,
+    washedGray: scales.black10,
     red: base.red,
+    lightRed: scales.red30,
+    washedRed: scales.red10,
     yellow: base.yellow,
+    lightYellow: scales.yellow30,
+    washedYellow: scales.yellow10,
     green: base.green,
+    lightGreen: scales.green30,
+    washedGreen: scales.green10,
     blue: base.blue,
-    highlight: base.blue,
-    caution: base.yellow,
-    error: base.red,
-    success: base.green,
-    none: 'rgba(0,0,0,0)'
+    lightBlue: scales.blue30,
+    washedBlue: scales.blue10,
+    none: 'rgba(0,0,0,0)',
+    scales: scales
   },
@@ -32,0 +98,0 @@ fonts: {

package.json

 {
   "name": "@tlon/indigo-light",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Tlon's design language",
@@ -50,4 +50,5 @@ "author": "tlon",
   "dependencies": {
+    "chroma-js": "^2.1.0",
     "esbuild": "^0.5.3"
   }
 }

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46154

increased by106.27%

Lines of code

493

increased by124.09%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedchroma-js@^2.1.0

• + Addedchroma-js@2.6.0(transitive)