@loomhq/lens 10.68.2 → 10.69.0

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/menu/menu.d.ts

@@ -21,5 +21,6 @@ declare type MenuItemProps = {
     hasDivider?: boolean;
     children?: React.ReactNode;
     columns?: string;
+    hidden?: boolean;
 };
 export default Menu;

package/dist/components/menu/menu.js

@@ -30,7 +30,7 @@ const MenuWrapper = styled.ul `
   ${getRadius('large')};
 `;
 const MenuItemWrapper = styled.li `
-  display: grid;
+  display: ${({ hidden }) => (hidden ? 'none' : 'grid')};
   grid-auto-flow: column;
   grid-template-columns: ${props => props.columns};
   ${getSize('grid-gap', 'small')};

package/dist/components/select/select.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 declare const SelectWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement>>, object>;
 declare const Select: ({ container, onChange, menuZIndex, menuMaxWidth, menuMaxHeight, selectedOptionValue, onOuterClick, options, placeholder, isDisabled, onOpenChange, trigger, ...props }: SelectProps & React.ComponentProps<typeof SelectWrapper>) => JSX.Element;
 declare type OptionsObject = {
@@ -7,6 +7,7 @@ declare type OptionsObject = {
     icon?: React.ReactNode;
     isDisabled?: boolean;
     hasDivider?: boolean;
+    hidden?: HTMLAttributes<HTMLOptionElement>['hidden'];
 };
 declare type SelectProps = {
     onChange?: React.ReactEventHandler;

package/dist/components/select/select.js

@@ -193,7 +193,7 @@ const Select = (_a) => {
                     isOpen &&
                     renderLayer(React.createElement("div", Object.assign({}, layerProps, { style: Object.assign(Object.assign({}, layerProps.style), { zIndex: menuZIndex, width: triggerBounds === null || triggerBounds === void 0 ? void 0 : triggerBounds.width }) }),
                         React.createElement(Menu, { downshiftMenuProps: getMenuProps, maxWidth: menuMaxWidth, maxHeight: menuMaxHeight }, options.map((item, index) => {
-                            return (React.createElement(MenuItem, Object.assign({ key: index, getItemProps: getItemProps, icon: item.icon }, getItemProps({
+                            return (React.createElement(MenuItem, Object.assign({ key: index, getItemProps: getItemProps, icon: item.icon, hidden: item.hidden }, getItemProps({
                                 key: `${item.value}-${index}`,
                                 index,
                                 item,

package/package.json

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