@lightspeed/cirrus-tokens - npm Package Compare versions

Comparing version 3.6.0-beta.0 to 3.6.0-beta.1

built-themes/default.js

@@ -51,5 +51,8 @@ // Do not modify directly!
     warning: "#e69524",
+    white: "#fff",
     textBody: "#494c4c",
     textHeading: "#0c0d0d",
-    textDimmed: "#848a8a"
+    textDimmed: "#848a8a",
+    disabled: "#e1e4e5",
+    dimmed: "#f3f3f3"
   },
@@ -468,2 +471,25 @@ fontFamily: {
     dark: { color: "#0c0d0d" }
+  },
+  tableStyles: {
+    progress: {
+      background:
+        "linear-gradient(\n  45deg,\n  #2875c6 0%,\n  #82e9ff 25%,\n  #2875c6 75%,\n  #82e9ff 100%\n)",
+      backgroundSize: "400% 400%",
+      loadingBackground: "#e1e4e5"
+    },
+    tr: {
+      hover: { background: "rgba(233,250,254,0.45)" },
+      borderColor: "#e1e4e5"
+    },
+    dropdown: { hover: {} },
+    sortable: { button: { background: "rgba(40,117,198,0.1)" } }
+  },
+  sidebarStyles: {
+    background: "#232a3b",
+    borderColor: "#505765",
+    iconDetails: "#232a3b",
+    header: { color: "#494c4c" },
+    shopButton: {},
+    menulink: { normal: { color: "#2875c6" }, danger: { color: "#b93435" } },
+    lockButton: { borderColor: "#505765" }
   }
@@ -470,0 +496,0 @@ }

built-themes/lightspeed.js

@@ -70,3 +70,5 @@ // Do not modify directly!
     textHeading: "#020203",
-    textDimmed: "#737B83"
+    textDimmed: "#737B83",
+    dimmed: "#F2F5F8",
+    disabled: "#D7DCE1"
   },
@@ -433,3 +435,3 @@ fontFamily: {
     light: { background: "#fff" },
-    dark: { background: "#fff" }
+    dark: { background: "#F2F5F8" }
   },
@@ -443,2 +445,32 @@ textStyles: { color: "#2F3137", link: { color: "#2E61DE" } },
     dark: { color: "#020203" }
+  },
+  tableStyles: {
+    progress: {
+      background:
+        "linear-gradient(\n  45deg,\n  #2E61DE 0%,\n  #8fa5ff 25%,\n  #2E61DE 75%,\n  #8fa5ff 100%\n)",
+      backgroundSize: "400% 400%",
+      loadingBackground: "#D7DCE1"
+    },
+    tr: {
+      hover: { background: "rgba(245,247,255,0.45)" },
+      borderColor: "#D7DCE1"
+    },
+    dropdown: { hover: { background: "#F2F5F8" } },
+    sortable: { button: { background: "rgba(46,97,222,0.1)" } }
+  },
+  sidebarStyles: {
+    background: "#18191D",
+    borderColor: "#464A51",
+    iconDetails: "#18191D",
+    sidebarLink: {
+      focus: { background: "#2F3137" },
+      active: { background: "#2E61DE" }
+    },
+    menulink: { normal: { color: "#2E61DE" }, danger: { color: "#CC1820" } },
+    shopButton: {
+      background: "#2F3137",
+      active: { background: "#464A51" },
+      hover: { background: "#464A51" }
+    },
+    lockButton: { borderColor: "#737B83" }
   }
@@ -445,0 +477,0 @@ }

built-themes/oldskool.js

@@ -51,5 +51,8 @@ // Do not modify directly!
     warning: "#e69524",
+    white: "#fff",
     textBody: "#494c4c",
     textHeading: "#0c0d0d",
-    textDimmed: "#848a8a"
+    textDimmed: "#848a8a",
+    disabled: "#e1e4e5",
+    dimmed: "#f3f3f3"
   },
@@ -468,2 +471,25 @@ fontFamily: {
     dark: { color: "#0c0d0d" }
+  },
+  tableStyles: {
+    progress: {
+      background:
+        "linear-gradient(\n  45deg,\n  #2875c6 0%,\n  #82e9ff 25%,\n  #2875c6 75%,\n  #82e9ff 100%\n)",
+      backgroundSize: "400% 400%",
+      loadingBackground: "#e1e4e5"
+    },
+    tr: {
+      hover: { background: "rgba(233,250,254,0.45)" },
+      borderColor: "#e1e4e5"
+    },
+    dropdown: { hover: {} },
+    sortable: { button: { background: "rgba(40,117,198,0.1)" } }
+  },
+  sidebarStyles: {
+    background: "#232a3b",
+    borderColor: "#505765",
+    iconDetails: "#232a3b",
+    header: { color: "#494c4c" },
+    shopButton: {},
+    menulink: { normal: { color: "#2875c6" }, danger: { color: "#b93435" } },
+    lockButton: { borderColor: "#505765" }
   }
@@ -470,0 +496,0 @@ }

CHANGELOG.md

@@ -10,3 +10,3 @@ # Changelog
 
-## [Unreleased]
+## 3.6.0-beta.1 - 2019-04-23
 
@@ -19,2 +19,3 @@ ### Added
 - Added new component theme file for Wordmark
+- Added new theme folder for the new colors
 
@@ -21,0 +22,0 @@ ## 3.5.1 - 2019-01-29

dist/theme/default.js

@@ -70,5 +70,8 @@ "use strict";
       warning: "#e69524",
+      white: "#fff",
       textBody: "#494c4c",
       textHeading: "#0c0d0d",
-      textDimmed: "#848a8a"
+      textDimmed: "#848a8a",
+      disabled: "#e1e4e5",
+      dimmed: "#f3f3f3"
     },
@@ -640,2 +643,43 @@ fontFamily: {
       }
+    },
+    tableStyles: {
+      progress: {
+        background: "linear-gradient(\n  45deg,\n  #2875c6 0%,\n  #82e9ff 25%,\n  #2875c6 75%,\n  #82e9ff 100%\n)",
+        backgroundSize: "400% 400%",
+        loadingBackground: "#e1e4e5"
+      },
+      tr: {
+        hover: {
+          background: "rgba(233,250,254,0.45)"
+        },
+        borderColor: "#e1e4e5"
+      },
+      dropdown: {
+        hover: {}
+      },
+      sortable: {
+        button: {
+          background: "rgba(40,117,198,0.1)"
+        }
+      }
+    },
+    sidebarStyles: {
+      background: "#232a3b",
+      borderColor: "#505765",
+      iconDetails: "#232a3b",
+      header: {
+        color: "#494c4c"
+      },
+      shopButton: {},
+      menulink: {
+        normal: {
+          color: "#2875c6"
+        },
+        danger: {
+          color: "#b93435"
+        }
+      },
+      lockButton: {
+        borderColor: "#505765"
+      }
     }
@@ -642,0 +686,0 @@ };

dist/theme/lightspeed.js

@@ -89,3 +89,5 @@ "use strict";
       textHeading: "#020203",
-      textDimmed: "#737B83"
+      textDimmed: "#737B83",
+      dimmed: "#F2F5F8",
+      disabled: "#D7DCE1"
     },
@@ -598,3 +600,3 @@ fontFamily: {
       dark: {
-        background: "#fff"
+        background: "#F2F5F8"
       }
@@ -625,2 +627,58 @@ },
       }
+    },
+    tableStyles: {
+      progress: {
+        background: "linear-gradient(\n  45deg,\n  #2E61DE 0%,\n  #8fa5ff 25%,\n  #2E61DE 75%,\n  #8fa5ff 100%\n)",
+        backgroundSize: "400% 400%",
+        loadingBackground: "#D7DCE1"
+      },
+      tr: {
+        hover: {
+          background: "rgba(245,247,255,0.45)"
+        },
+        borderColor: "#D7DCE1"
+      },
+      dropdown: {
+        hover: {
+          background: "#F2F5F8"
+        }
+      },
+      sortable: {
+        button: {
+          background: "rgba(46,97,222,0.1)"
+        }
+      }
+    },
+    sidebarStyles: {
+      background: "#18191D",
+      borderColor: "#464A51",
+      iconDetails: "#18191D",
+      sidebarLink: {
+        focus: {
+          background: "#2F3137"
+        },
+        active: {
+          background: "#2E61DE"
+        }
+      },
+      menulink: {
+        normal: {
+          color: "#2E61DE"
+        },
+        danger: {
+          color: "#CC1820"
+        }
+      },
+      shopButton: {
+        background: "#2F3137",
+        active: {
+          background: "#464A51"
+        },
+        hover: {
+          background: "#464A51"
+        }
+      },
+      lockButton: {
+        borderColor: "#737B83"
+      }
     }
@@ -627,0 +685,0 @@ };

dist/theme/oldskool.js

@@ -70,5 +70,8 @@ "use strict";
       warning: "#e69524",
+      white: "#fff",
       textBody: "#494c4c",
       textHeading: "#0c0d0d",
-      textDimmed: "#848a8a"
+      textDimmed: "#848a8a",
+      disabled: "#e1e4e5",
+      dimmed: "#f3f3f3"
     },
@@ -640,2 +643,43 @@ fontFamily: {
       }
+    },
+    tableStyles: {
+      progress: {
+        background: "linear-gradient(\n  45deg,\n  #2875c6 0%,\n  #82e9ff 25%,\n  #2875c6 75%,\n  #82e9ff 100%\n)",
+        backgroundSize: "400% 400%",
+        loadingBackground: "#e1e4e5"
+      },
+      tr: {
+        hover: {
+          background: "rgba(233,250,254,0.45)"
+        },
+        borderColor: "#e1e4e5"
+      },
+      dropdown: {
+        hover: {}
+      },
+      sortable: {
+        button: {
+          background: "rgba(40,117,198,0.1)"
+        }
+      }
+    },
+    sidebarStyles: {
+      background: "#232a3b",
+      borderColor: "#505765",
+      iconDetails: "#232a3b",
+      header: {
+        color: "#494c4c"
+      },
+      shopButton: {},
+      menulink: {
+        normal: {
+          color: "#2875c6"
+        },
+        danger: {
+          color: "#b93435"
+        }
+      },
+      lockButton: {
+        borderColor: "#505765"
+      }
     }
@@ -642,0 +686,0 @@ };

package.json

 {
   "name": "@lightspeed/cirrus-tokens",
-  "version": "3.6.0-beta.0",
+  "version": "3.6.0-beta.1",
   "description": "Cirrus's Foundation",
@@ -24,4 +24,6 @@ "main": "index.js",
   "publishConfig": {
-    "access": "public"
-  }
+    "access": "public",
+    "tag": "next"
+  },
+  "gitHead": "e2b948affa4f54ab4ce3c1cd59060c682f317d98"
 }

themes/lightspeed/components/popover.js

@@ -11,3 +11,3 @@ const { colors } = require('../colors');
   dark: {
-    background: colors.white,
+    background: colors['gray-50'],
   },
@@ -14,0 +14,0 @@ };

themes/lightspeed/index.js

@@ -23,2 +23,4 @@ const { typography, spacing, shadows, radii, transition } = require('../../src');
 const { wordmarkStyles } = require('./components/wordmark');
+const { tableStyles } = require('./components/table');
+const { sidebarStyles } = require('./components/sidebar');
 
@@ -30,5 +32,8 @@ // Adding aliases for easy consumption on the consumer side
 colors.warning = colors['orange-500'];
+colors.white = colors.white;
 colors.textBody = colors['gray-700'];
 colors.textHeading = colors['gray-1000'];
 colors.textDimmed = colors['gray-500'];
+colors.dimmed = colors['gray-50'];
+colors.disabled = colors['gray-100'];
 
@@ -72,4 +77,6 @@ const theme = {
   wordmarkStyles,
+  tableStyles,
+  sidebarStyles,
 };
 
 module.exports = JSON.stringify(theme);

themes/oldskool/index.js

@@ -22,2 +22,4 @@ const { colors, typography, spacing, shadows, radii, transition } = require('../../src');
 const { wordmarkStyles } = require('./components/wordmark');
+const { tableStyles } = require('./components/table');
+const { sidebarStyles } = require('./components/sidebar');
 
@@ -31,5 +33,8 @@ const colorsMap = colors.colorsMap;
 colorsMap.warning = colorsMap.orange;
+colorsMap.white = colorsMap.snow;
 colorsMap.textBody = colorsMap.gray;
 colorsMap.textHeading = colorsMap.night;
 colorsMap.textDimmed = colorsMap['gray-300'];
+colorsMap.disabled = colorsMap['snow-300'];
+colorsMap.dimmed = colorsMap['snow-200'];
 
@@ -73,4 +78,6 @@ const theme = {
   wordmarkStyles,
+  tableStyles,
+  sidebarStyles,
 };
 
 module.exports = JSON.stringify(theme);

Fixed alerts

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

Improved metrics

Total package byte prevSize

191411

increased by6.8%

Number of package files

78

increased by6.85%

Lines of code

5532

increased by9.7%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes