@loomhq/lens 10.68.1 → 10.68.3

package/dist/colors.d.ts

@@ -6,8 +6,8 @@ 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 ["primary", "primaryHover", "primaryActive", "focusRing", "record", "recordHover", "recordActive", "info", "success", "warning", "danger", "dangerHover", "dangerActive", "backdrop", "backdropDark", "disabledContent", "highlight"];
-declare const SemanticColors: readonly ["body", "bodyDimmed", "background", "backgroundHover", "backgroundActive", "backgroundSecondary", "backgroundSecondary2", "overlay", "border", "disabledBackground", "formFieldBorder", "formFieldBackground", "buttonBorder", "upgrade", "upgradeHover", "upgradeActive", "tabBackground", "discoveryBackground", "discoveryLightBackground", "discoveryTitle", "discoveryHighlight"];
+declare const SharedColors: readonly ["primaryHover", "primaryActive", "focusRing", "record", "recordHover", "recordActive", "info", "success", "warning", "danger", "dangerHover", "dangerActive", "backdrop", "backdropDark", "disabledContent", "highlight"];
+declare const SemanticColors: readonly ["primary", "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

@@ -30,7 +30,6 @@ const GreyColors = [
     'white',
 ];
 const SharedColors = [
-    'primary',
     'primaryHover',
     'primaryActive',
     'focusRing',
@@ -49,6 +48,7 @@ const SharedColors = [
     'highlight',
 ];
 const SemanticColors = [
+    'primary',
     'body',
     'bodyDimmed',
     'background',
@@ -116,10 +116,9 @@ export const hslaGreys = {
     white: { h: 240, s: 7, l: 100, a: 1 },
 };
 const themeSharedColors = {
-    primary: hslaBaseColors.blurple,
     primaryHover: darken(hslaBaseColors.blurple, hoverIncrease),
-    primaryActive: darken(hslaBaseColors.blurple, activeIncrease),
     focusRing: alpha(hslaBaseColors.blurple, focusRingAlpha),
+    primaryActive: darken(hslaBaseColors.blurple, activeIncrease),
     record: hslaBaseColors.orange,
     recordHover: darken(hslaBaseColors.orange, hoverIncrease),
     recordActive: darken(hslaBaseColors.orange, activeIncrease),
@@ -141,8 +140,8 @@ const themeSharedColors = {
 };
 // This object has a specific spread order for documentation purposes
 export const themeColors = {
-    light: Object.assign(Object.assign({ 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({ 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 } }),
+    light: Object.assign(Object.assign({ primary: hslaBaseColors.blurple, 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 }, 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/button/button.js

@@ -49,7 +49,7 @@ const variantStyles = {
     },
     primary: {
         color: getColorValue('white'),
-        backgroundColor: getColorValue('primary'),
+        backgroundColor: getColorValue('blurple'),
         borderColor: 'transparent',
         hover: getColorValue('primaryHover'),
         active: getColorValue('primaryActive'),

package/dist/components/link/link.js

@@ -12,13 +12,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
-import { getColorValue } from '../../utilities';
+import { getColorValue, getFocusRing } from '../../utilities';
 const variants = {
     neutral: {
         color: getColorValue('inherit'),
+        focusRing: getFocusRing(),
     },
     primary: {
         color: getColorValue('primary'),
+        focusRing: getFocusRing(),
     },
 };
 const statusStyles = {
@@ -41,6 +43,16 @@ const LinkWrapper = styled.a `
   ${props => !props.disabled && `color: ${variants[props.variant].color}`};
   ${props => (props.disabled ? statusStyles.disabled : statusStyles.enabled)};
   ${props => props.as === 'button' && buttonStyles.isButton};
+  &:focus {
+    outline: 0px solid transparent;
+  }
+  &:focus-visible {
+    outline: none;
+    ${getFocusRing()};
+  }
+  &::-moz-focus-inner {
+    border: 0;
+  }
   @supports not (text-underline-offset: 0.35em) {
     box-shadow: 0 1px 0 currentColor;
     padding: 0 0 1px 0;

package/dist/components/toast/toast.js

@@ -62,10 +62,12 @@ const Toast = (_a) => {
     const toastDuration = toastDurations[duration];
     useEffect(() => {
         const timer = setTimeout(() => {
-            onCloseClick();
+            if (isOpen) {
+                onCloseClick();
+            }
         }, toastDuration);
         return () => clearTimeout(timer);
-    }, [isOpen, onCloseClick]);
+    }, [isOpen]);
     return (React.createElement(React.Fragment, null, isOpen && (React.createElement(ToastWrapper, Object.assign({ "data-lens-theme": "dark", onClick: e => e.stopPropagation(), zIndex: zIndex, isOpen: isOpen, toastDuration: toastDuration }, props),
         React.createElement(ChildrenSection, { "aria-live": "polite" }, children),
         onCloseClick && (React.createElement(IconButton, { altText: "Close", icon: React.createElement(SvgClose, null), onClick: onCloseClick }))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.68.1",
+  "version": "10.68.3",
   "scripts": {
     "dev": "next",
     "build:next": "next build",