@loomhq/lens 10.78.0 → 10.79.1

package/README.md

@@ -1,4 +1,4 @@
-![](https://github.com/loomhq/lens/blob/master/assets/lens-banner.png?raw=true)
+![](https://github.com/loomhq/lens/blob/main/assets/lens-banner.png?raw=true)
 
 # Lens — the design system for [Loom](https://www.loom.com) products
 

package/dist/colors.d.ts

@@ -7,7 +7,7 @@ declare type HslaColor = {
 declare const BaseColors: readonly ["red", "blurpleLight", "blurpleMedium", "blurple", "blurpleDark", "offWhite", "blueLight", "blue", "blueDark", "orangeLight", "orange", "orangeDark", "tealLight", "teal", "tealDark", "yellowLight", "yellow", "yellowDark"];
 declare const GreyColors: readonly ["grey8", "grey7", "grey6", "grey5", "grey4", "grey3", "grey2", "grey1", "white"];
 declare const SharedColors: readonly ["focusRing", "record", "recordHover", "recordActive", "info", "success", "warning", "danger", "dangerHover", "dangerActive", "backdrop", "backdropDark", "disabledContent", "highlight"];
-declare const SemanticColors: readonly ["primary", "primaryHover", "primaryActive", "body", "bodyDimmed", "background", "backgroundHover", "backgroundActive", "backgroundSecondary", "backgroundSecondary2", "overlay", "border", "disabledBackground", "formFieldBorder", "formFieldBackground", "buttonBorder", "upgrade", "upgradeHover", "upgradeActive", "tabBackground", "discoveryBackground", "discoveryLightBackground", "discoveryTitle", "discoveryHighlight", "internalAlert"];
+declare const SemanticColors: readonly ["primary", "primaryHover", "primaryActive", "body", "bodyDimmed", "background", "backgroundHover", "backgroundActive", "backgroundSecondary", "backgroundSecondary2", "overlay", "border", "disabledBackground", "formFieldBorder", "formFieldBackground", "buttonBorder", "upgrade", "upgradeHover", "upgradeActive", "tabBackground", "discoveryBackground", "discoveryLightBackground", "discoveryTitle", "discoveryHighlight"];
 declare type ThemesColorVariant = Record<typeof SharedColors[number] | typeof SemanticColors[number], HslaColor>;
 declare type ThemesColors = {
     light: ThemesColorVariant;

package/dist/colors.js

@@ -70,7 +70,6 @@ const SemanticColors = [
     'discoveryLightBackground',
     'discoveryTitle',
     'discoveryHighlight',
-    'internalAlert',
 ];
 const percent = (number, percentage) => Math.round((number * percentage) / 100);
 export const darken = (color, percentage) => (Object.assign(Object.assign({}, color), { l: color.l - percent(color.l, percentage) }));
@@ -139,8 +138,8 @@ const themeSharedColors = {
 };
 // This object has a specific spread order for documentation purposes
 export const themeColors = {
-    light: Object.assign(Object.assign({ primary: hslaBaseColors.blurple, primaryHover: darken(hslaBaseColors.blurple, hoverIncrease), primaryActive: darken(hslaBaseColors.blurple, activeIncrease), body: hslaGreys.grey8, bodyDimmed: hslaGreys.grey6, background: hslaGreys.white, backgroundHover: alpha(hslaGreys.grey7, 0.1), backgroundActive: alpha(hslaGreys.grey7, 0.3), backgroundSecondary: alpha(hslaGreys.grey7, 0.04), backgroundSecondary2: { h: 45, s: 34, l: 78, a: 0.2 }, overlay: hslaGreys.white, border: alpha(hslaGreys.grey6, borderAlpha) }, themeSharedColors), { disabledBackground: hslaGreys.grey2, formFieldBorder: hslaGreys.grey3, formFieldBackground: hslaGreys.white, buttonBorder: alpha(hslaGreys.grey6, buttonBorderAlpha), upgrade: { h: 206, s: 100, l: 93, a: 1 }, upgradeHover: darken({ h: 206, s: 100, l: 93, a: 1 }, 9), upgradeActive: darken({ h: 206, s: 100, l: 93, a: 1 }, 17), tabBackground: alpha(hslaGreys.grey6, tabBackgroundAlpha), discoveryBackground: { h: 206, s: 100, l: 93, a: 1 }, discoveryLightBackground: { h: 206, s: 100, l: 97, a: 1 }, discoveryTitle: hslaGreys.grey8, discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 }, internalAlert: { h: 134, s: 29, l: 36, a: 1 } }),
-    dark: Object.assign(Object.assign({ primary: { h: 242, s: 87, l: 73, a: 1 }, primaryHover: darken(hslaBaseColors.blurple, hoverIncrease), primaryActive: darken(hslaBaseColors.blurple, activeIncrease), body: hslaGreys.grey1, bodyDimmed: hslaGreys.grey5, background: hslaGreys.grey8, backgroundHover: alpha(hslaGreys.white, 0.1), backgroundActive: alpha(hslaGreys.white, 0.2), backgroundSecondary: alpha(hslaGreys.white, 0.04), backgroundSecondary2: { h: 45, s: 13, l: 44, a: 0.2 }, overlay: lighten(hslaGreys.grey8, 50), border: alpha(hslaGreys.grey4, borderAlpha) }, themeSharedColors), { disabledBackground: darken(hslaGreys.grey6, 50), formFieldBorder: hslaGreys.grey6, formFieldBackground: hslaGreys.grey8, buttonBorder: alpha(hslaGreys.white, buttonBorderAlpha), upgrade: { h: 206, s: 92, l: 81, a: 1 }, upgradeHover: darken({ h: 206, s: 92, l: 81, a: 1 }, 9), upgradeActive: darken({ h: 206, s: 92, l: 81, a: 1 }, 17), tabBackground: alpha(hslaGreys.white, tabBackgroundAlpha), discoveryBackground: { h: 206, s: 92, l: 81, a: 1 }, discoveryLightBackground: hslaGreys.grey8, discoveryTitle: hslaBaseColors.blue, discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 }, internalAlert: { h: 132, s: 32, l: 67, a: 1 } }),
+    light: Object.assign(Object.assign({ primary: hslaBaseColors.blurple, primaryHover: darken(hslaBaseColors.blurple, hoverIncrease), primaryActive: darken(hslaBaseColors.blurple, activeIncrease), body: hslaGreys.grey8, bodyDimmed: hslaGreys.grey6, background: hslaGreys.white, backgroundHover: alpha(hslaGreys.grey7, 0.1), backgroundActive: alpha(hslaGreys.grey7, 0.3), backgroundSecondary: alpha(hslaGreys.grey7, 0.04), backgroundSecondary2: { h: 45, s: 34, l: 78, a: 0.2 }, overlay: hslaGreys.white, border: alpha(hslaGreys.grey6, borderAlpha) }, themeSharedColors), { disabledBackground: hslaGreys.grey2, formFieldBorder: hslaGreys.grey3, formFieldBackground: hslaGreys.white, buttonBorder: alpha(hslaGreys.grey6, buttonBorderAlpha), upgrade: { h: 206, s: 100, l: 93, a: 1 }, upgradeHover: darken({ h: 206, s: 100, l: 93, a: 1 }, 9), upgradeActive: darken({ h: 206, s: 100, l: 93, a: 1 }, 17), tabBackground: alpha(hslaGreys.grey6, tabBackgroundAlpha), discoveryBackground: { h: 206, s: 100, l: 93, a: 1 }, discoveryLightBackground: { h: 206, s: 100, l: 97, a: 1 }, discoveryTitle: hslaGreys.grey8, discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 } }),
+    dark: Object.assign(Object.assign({ primary: { h: 242, s: 87, l: 73, a: 1 }, primaryHover: darken(hslaBaseColors.blurple, hoverIncrease), primaryActive: darken(hslaBaseColors.blurple, activeIncrease), body: hslaGreys.grey1, bodyDimmed: hslaGreys.grey5, background: hslaGreys.grey8, backgroundHover: alpha(hslaGreys.white, 0.1), backgroundActive: alpha(hslaGreys.white, 0.2), backgroundSecondary: alpha(hslaGreys.white, 0.04), backgroundSecondary2: { h: 45, s: 13, l: 44, a: 0.2 }, overlay: lighten(hslaGreys.grey8, 50), border: alpha(hslaGreys.grey4, borderAlpha) }, themeSharedColors), { disabledBackground: darken(hslaGreys.grey6, 50), formFieldBorder: hslaGreys.grey6, formFieldBackground: hslaGreys.grey8, buttonBorder: alpha(hslaGreys.white, buttonBorderAlpha), upgrade: { h: 206, s: 92, l: 81, a: 1 }, upgradeHover: darken({ h: 206, s: 92, l: 81, a: 1 }, 9), upgradeActive: darken({ h: 206, s: 92, l: 81, a: 1 }, 17), tabBackground: alpha(hslaGreys.white, tabBackgroundAlpha), discoveryBackground: { h: 206, s: 92, l: 81, a: 1 }, discoveryLightBackground: hslaGreys.grey8, discoveryTitle: hslaBaseColors.blue, discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 } }),
 };
 export const hslaColors = Object.assign(Object.assign({}, hslaBaseColors), hslaGreys);
 export const colorsNames = [

package/dist/components/container/container.js

@@ -71,5 +71,6 @@ export const availableHtmlTags = [
     'footer',
     'main',
     'span',
+    'form',
 ];
 export default Container;

package/dist/components/notification-bar/notification-bar.js

@@ -39,8 +39,8 @@ const severityStyles = {
     },
     internal: {
         icon: React.createElement("span", { role: "img" }, "\uD83D\uDD14"),
-        color: 'var(--lns-color-grey8)',
-        bgColor: 'var(--lns-color-white)',
+        color: 'var(--lns-color-teal)',
+        bgColor: 'var(--lns-color-grey8)',
         fontFamily: 'Roboto Mono, Lucida Mono, monospace',
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.78.0",
+  "version": "10.79.1",
   "scripts": {
     "dev": "next",
     "build:next": "next build",
@@ -18,7 +18,7 @@
   },
   "release": {
     "branches": [
-      "master",
+      "main",
       "next",
       "next-major"
     ]