@aics/vole-app 3.2.3 → 3.3.1

package/es/aics-image-viewer/components/StyleProvider/index.js

@@ -1,8 +1,8 @@
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 import { theme as AntTheme, ConfigProvider } from "antd";
 import React from "react";
-import styled, { css } from "styled-components";
+import styled, { createGlobalStyle, css } from "styled-components";
 var palette = {
   black: "#000000",
   white: "#ffffff",
@@ -18,10 +18,14 @@ var palette = {
   darkPurple: "#7e46d4",
   veryDarkPurple: "#5f369f",
   veryLtPurple: "#e7e4f2",
-  brightRed: "#ff4d4d",
+  brightRed: "#dc4446",
+  brightYellow: "#e39b0d",
   brightGreen: "#61d900",
   veryBrightGreen: "#61ff00",
-  brightBlue: "#0099ff"
+  brightBlue: "#0099ff",
+  veryBrightBlue: "#0dc4d9",
+  darkBlue: "#29484c",
+  darkYellow: "#4c3c29"
 };
 var theme = {
   colors: {
@@ -31,7 +35,7 @@ var theme = {
       primaryDk: palette.darkPurple,
       success: palette.brightGreen,
       error: palette.brightRed,
-      warning: palette.brightRed,
+      warning: palette.brightYellow,
       info: palette.brightBlue
     },
     text: {
@@ -75,10 +79,10 @@ var theme = {
         outline: palette.ltGrey,
         hoverOutline: palette.ltPurple,
         hoverText: palette.ltPurple,
-        activeOutline: palette.medPurple,
-        activatedText: palette.white,
-        activatedBg: palette.medDarkGrey,
-        activatedOutline: palette.purpleGrey,
+        activeText: palette.white,
+        activeBg: palette.medDarkGrey,
+        activeOutline: palette.purpleGrey,
+        disabledOutline: palette.medGrey,
         disabledText: palette.medGrey
       }
     },
@@ -121,8 +125,18 @@ var theme = {
       selectedBg: palette.medGrey,
       textPlaceholder: palette.ltPurple
     },
+    alert: {
+      warning: {
+        text: palette.brightYellow,
+        bg: palette.darkYellow
+      },
+      info: {
+        text: palette.veryBrightBlue,
+        bg: palette.darkBlue
+      }
+    },
     tooltip: {
-      bg: palette.black
+      bg: palette.medDarkGrey
     },
     modal: {
       maskBg: "#000000cc",
@@ -136,10 +150,11 @@ var theme = {
   }
 };
 /** Makes theme styling available to child components via CSS variables. */
-var CssProvider = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n\n  ", "\n\n  h1, h2, h3, h4, p {\n    font-family: var(--font-family);\n  }\n\n  h1 {\n    color: var(--color-text-header);\n    font-size: 28px;\n    font-weight: 400;\n  }\n\n  h2 {\n    color: var(--color-text-section);\n    font-size: 19px;\n    font-weight: 400;\n  }\n\n  h3 {\n    color: var(--color-text-header);\n    font-size: 16px;\n    font-weight: 600;\n  }\n\n  h4 {\n    color: var(--color-text-header);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  p {\n    color: var(--color-text-body);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  a {\n    color: var(--color-text-link);\n  }\n\n  & *::selection {\n    background-color: var(--color-text-selection-bg);\n    color: var(--color-text-selection-text);\n  }\n\n  /** TODO: Go through these styles and see if we can use Ant ConfigProvider for them instead. */\n  .ant-btn-link,\n  .ant-btn-text,\n  .ant-btn-primary,\n  .ant-btn-icon-only {\n    box-shadow: none;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border-color: var(--color-button-primary-hover-bg);\n      color: var(--color-button-primary-text);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border: 1px solid var(--color-button-primary-active-outline);\n      color: var(--color-button-primary-text);\n    }\n  }\n\n  /* Let us use buttons with type=\"text\" as purely semantic containers - don't bring any styling! */\n  .ant-btn-text {\n    width: unset;\n    height: unset;\n    padding: unset;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: unset;\n      border-color: transparent;\n    }\n  }\n\n  .ant-btn-icon-only:disabled {\n    color: var(--color-button-icon-disabled-text);\n  }\n\n  .ant-btn-link:not(:disabled) {\n    // Change from default blue link text\n    color: var(--color-button-link-text);\n  }\n\n  /**\n   * Tertiary style buttons. Grey outline by default, turns to light\n   * purple outline on hover.\n   */\n  .ant-btn-default:not(.ant-btn-icon-only) {\n    background-color: var(--color-button-tertiary-bg);\n    color: var(--color-button-tertiary-text);\n    border-color: var(--color-button-tertiary-outline);\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: transparent;\n      border-color: var(--color-button-tertiary-hover-bg);\n      color: var(--color-button-tertiary-hover-text);\n    }\n\n    &:active:not(:disabled) {\n      background-color: transparent;\n      border-color: var(--color-button-tertiary-active-outline);\n      color: var(--color-button-tertiary-active-text);\n    }\n  }\n\n  // Overrides for checkbox styling\n  & .ant-checkbox-input {\n    &:hover,\n    &:focus-visible {\n      border: 1px solid white;\n    }\n  }\n\n  & .ant-checkbox.ant-checkbox-checked {\n    background-color: var(--color-checkbox-bg);\n  }\n\n  .ant-checkbox-inner {\n    background-color: transparent !important;\n  }\n\n  // Add outlines to modals and dropdowns\n  & .ant-select-dropdown,\n  & .ant-dropdown-menu,\n  & .ant-modal-content {\n    border: 1px solid var(--color-modal-border);\n  }\n\n  // Force active/hovered text to be white instead of grey for better contrast\n  & .ant-dropdown-menu-item-active {\n    color: var(--color-menu-hover-text);\n  }\n\n  // Remove padding in dropdown menus and make items reactangular + flush with the edge\n  & .ant-dropdown-menu,\n  & .ant-select-dropdown {\n    padding: 0;\n    overflow: hidden;\n\n    & .ant-dropdown-menu-item,\n    & .ant-select-item {\n      border-radius: 0;\n    }\n  }\n"])), function (_ref) {
+var CssProvider = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n\n  ", "\n\n  h1, h2, h3, h4, p {\n    font-family: var(--font-family);\n  }\n\n  h1 {\n    color: var(--color-text-header);\n    font-size: 28px;\n    font-weight: 400;\n  }\n\n  h2 {\n    color: var(--color-text-section);\n    font-size: 19px;\n    font-weight: 400;\n  }\n\n  h3 {\n    color: var(--color-text-header);\n    font-size: 16px;\n    font-weight: 600;\n  }\n\n  h4 {\n    color: var(--color-text-header);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  p {\n    color: var(--color-text-body);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  a {\n    color: var(--color-text-link);\n  }\n\n  *::selection {\n    background-color: var(--color-text-selection-bg);\n    color: var(--color-text-selection-text);\n  }\n\n  /** TODO: Go through these styles and see if we can use Ant ConfigProvider for them instead. */\n  .ant-btn-link,\n  .ant-btn-text,\n  .ant-btn-primary,\n  .ant-btn-icon-only {\n    box-shadow: none;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border-color: var(--color-button-primary-hover-bg);\n      color: var(--color-button-primary-text);\n      outline: none;\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border: 1px solid var(--color-button-primary-active-outline);\n      color: var(--color-button-primary-text);\n    }\n  }\n\n  /* Let us use buttons with type=\"text\" as purely semantic containers - don't bring any styling! */\n  .ant-btn-text {\n    width: unset;\n    height: unset;\n    padding: unset;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: unset;\n      border-color: transparent;\n    }\n  }\n\n  .ant-btn-icon-only:disabled {\n    color: var(--color-button-icon-disabled-text);\n  }\n\n  .ant-btn-link:not(:disabled) {\n    // Change from default blue link text\n    color: var(--color-button-link-text);\n  }\n\n  /**\n   * Tertiary style buttons. Grey outline by default, turns to light\n   * purple outline on hover.\n   */\n  .ant-btn-default:not(.ant-btn-icon-only) {\n    background-color: var(--color-button-tertiary-bg);\n    color: var(--color-button-tertiary-text);\n    border-color: var(--color-button-tertiary-outline);\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: transparent;\n      border-color: var(--color-button-tertiary-hover-outline);\n      color: var(--color-button-tertiary-hover-text);\n    }\n  }\n\n  // Overrides for checkbox styling\n  .ant-checkbox-input {\n    &:hover,\n    &:focus-visible {\n      border: 1px solid white;\n    }\n  }\n\n  .ant-checkbox.ant-checkbox-checked {\n    background-color: var(--color-checkbox-bg);\n  }\n\n  .ant-checkbox-inner {\n    background-color: transparent !important;\n  }\n\n  // Add outlines to modals and dropdowns\n  .ant-select-dropdown,\n  .ant-dropdown-menu,\n  .ant-modal-content {\n    border: 1px solid var(--color-modal-border);\n  }\n\n  // Force active/hovered text to be white instead of grey for better contrast\n  .ant-dropdown-menu-item-active {\n    color: var(--color-menu-hover-text);\n  }\n\n  // Remove padding in dropdown menus and make items reactangular + flush with the edge\n  .ant-dropdown-menu,\n  .ant-select-dropdown {\n    padding: 0;\n    overflow: hidden;\n\n    .ant-dropdown-menu-item,\n    .ant-select-item:not(.ant-select-item-option-disabled) {\n      border-radius: 0;\n      color: var(--color-button-icon-active-text);\n    }\n  }\n\n  .ant-select {\n    &.ant-select-disabled .ant-select-selector {\n      border-color: var(--color-button-icon-disabled-outline);\n    }\n\n    .ant-select-arrow {\n      transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n    }\n\n    /* Control response to hover + active menu */\n    &:hover:not(.ant-select-disabled),\n    &:focus-visible:not(.ant-select-disabled),\n    &.ant-select.ant-select-open {\n      .ant-select-selector,\n      .ant-select-arrow,\n      .ant-select-selection-item {\n        color: var(--color-button-tertiary-hover-text);\n        outline-color: var(--color-button-tertiary-hover-outline);\n      }\n    }\n  }\n\n  // Toolbar has special colors for radio buttons and will use these variables to apply them\n  --color-button-radio-hover-outline: var(--color-button-tertiary-hover-outline);\n  --color-button-radio-hover-text: var(--color-button-tertiary-hover-text);\n\n  .ant-radio-button-wrapper {\n    &::before {\n      content: none;\n    }\n\n    &.ant-radio-button-wrapper-checked {\n      color: var(--color-button-icon-active-text);\n\n      &:not(:first-child) {\n        box-shadow: -1px 0px 0px 0px var(--color-button-tertiary-active-outline);\n      }\n    }\n\n    &:hover,\n    &:has(:focus-visible) {\n      color: var(--color-button-radio-hover-text);\n      border-color: var(--color-button-radio-hover-outline);\n      outline: none;\n      z-index: 2;\n\n      &:not(:first-child) {\n        box-shadow: -1px 0px 0px 0px var(--color-button-radio-hover-outline);\n      }\n    }\n  }\n\n"])), function (_ref) {
   var $theme = _ref.$theme;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      /* Component and color variables. */\n      // TODO: Fix inconsistent use of border vs. outline\n      // TODO: Remove variables that aren't used in other CSS files. These should be set directly\n      // from the $theme object to reduce unnecessary variables.\n      --color-text-link: ", ";\n      --color-text-header: ", ";\n      --color-text-section: ", ";\n      --color-text-body: ", ";\n      --color-text-error: ", ";\n\n      --color-text-selection-bg: ", ";\n      --color-text-selection-text: ", ";\n\n      --color-header-title: ", ";\n      --color-header-hover-title: ", ";\n      --color-header-bg: ", ";\n      --color-header-border: ", ";\n\n      --color-button-primary-bg: ", ";\n      --color-button-primary-text: ", ";\n      --color-button-primary-hover-bg: ", ";\n      --color-button-primary-active-bg: ", ";\n      --color-button-primary-active-outline: ", ";\n      --color-button-primary-disabled-bg: ", ";\n\n      --color-button-link-text: ", ";\n\n      --color-button-secondary-bg: ", ";\n      --color-button-secondary-text: ", ";\n      --color-button-secondary-outline: ", ";\n\n      --color-button-tertiary-bg: transparent;\n      --color-button-tertiary-text: ", ";\n      --color-button-tertiary-outline: ", ";\n      --color-button-tertiary-hover-outline: ", ";\n      --color-button-tertiary-hover-text: ", ";\n      --color-button-tertiary-active-outline: ", ";\n      --color-button-tertiary-active-text: ", ";\n\n      --color-button-icon-disabled-text: ", ";\n      --color-button-icon-disabled-text: ", ";\n      --color-button-icon-activated-text: ", ";\n      --color-button-icon-activated-bg: ", ";\n      --color-button-icon-activated-outline: ", ";\n\n      --color-toolbar-button-bg: ", ";\n\n      --color-controlpanel-bg: ", ";\n      --color-controlpanel-border: ", ";\n      --color-controlpanel-section-text: ", ";\n      --color-controlpanel-text: ", ";\n      --color-controlpanel-section-bg: ", ";\n      --color-controlpanel-drawer-bg: ", ";\n      --color-controlpanel-ramp-slider: ", ";\n      --color-controlpanel-isovalue-slider: ", ";\n\n      --color-landingpage-bg: ", ";\n      --color-landingpage-bg-alt: ", ";\n      --color-landingpage-text: ", ";\n      --color-landingpage-banner-highlight-bg: ", ";\n\n      --color-statusflag-border: ", ";\n      --color-statusflag-text: ", ";\n\n      --color-layout-dividers: ", ";\n\n      --color-modal-border: ", ";\n\n      --color-menu-hover-text: ", ";\n      --color-menu-selected-text: ", ";\n\n      --color-checkbox-bg: ", ";\n\n      --font-family: ", ";\n    "])), $theme.colors.text.link, $theme.colors.text.header, $theme.colors.text.section, $theme.colors.text.body, $theme.colors.text.error, $theme.colors.text.selectionBg, $theme.colors.text.selectionText, $theme.colors.header.title, $theme.colors.header.hoverTitle, $theme.colors.header.bg, $theme.colors.header.border, $theme.colors.button.primary.bg, $theme.colors.button.primary.text, $theme.colors.button.primary.hoverBg, $theme.colors.button.primary.hoverBg, $theme.colors.button.primary.activeOutline, $theme.colors.button.primary.disabledBg, $theme.colors.button.link.text, $theme.colors.button.secondary.bg, $theme.colors.button.secondary.text, $theme.colors.button.secondary.outline, $theme.colors.button.tertiary.text, $theme.colors.button.tertiary.outline, $theme.colors.button.tertiary.hoverOutline, $theme.colors.button.tertiary.hoverText, $theme.colors.button.tertiary.activeOutline, $theme.colors.button.tertiary.hoverText, $theme.colors.button.tertiary.disabledText, $theme.colors.button.tertiary.disabledText, $theme.colors.button.tertiary.activatedText, $theme.colors.button.tertiary.activatedBg, $theme.colors.button.tertiary.activatedOutline, $theme.colors.toolbar.buttonBg, $theme.colors.controlPanel.bg, $theme.colors.controlPanel.border, $theme.colors.controlPanel.sectionText, $theme.colors.controlPanel.text, $theme.colors.controlPanel.sectionBg, $theme.colors.controlPanel.drawerBg, $theme.colors.controlPanel.rampSlider, $theme.colors.controlPanel.isovalueSlider, $theme.colors.landingPage.bg, $theme.colors.landingPage.bgAlt, $theme.colors.landingPage.text, $theme.colors.landingPage.bannerBg, $theme.colors.statusFlag.border, $theme.colors.statusFlag.text, $theme.colors.layout.dividers, $theme.colors.modal.border, $theme.colors.menu.hoverText, $theme.colors.menu.selectedText, $theme.colors.checkbox.bg, $theme.fonts.family);
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      /* Component and color variables. */\n      // TODO: Fix inconsistent use of border vs. outline\n      // TODO: Remove variables that aren't used in other CSS files. These should be set directly\n      // from the $theme object to reduce unnecessary variables.\n      --color-text-link: ", ";\n      --color-text-header: ", ";\n      --color-text-section: ", ";\n      --color-text-body: ", ";\n      --color-text-error: ", ";\n\n      --color-text-selection-bg: ", ";\n      --color-text-selection-text: ", ";\n\n      --color-header-title: ", ";\n      --color-header-hover-title: ", ";\n      --color-header-bg: ", ";\n      --color-header-border: ", ";\n\n      --color-button-primary-bg: ", ";\n      --color-button-primary-text: ", ";\n      --color-button-primary-hover-bg: ", ";\n      --color-button-primary-active-bg: ", ";\n      --color-button-primary-active-outline: ", ";\n      --color-button-primary-disabled-bg: ", ";\n\n      --color-button-link-text: ", ";\n\n      --color-button-secondary-bg: ", ";\n      --color-button-secondary-text: ", ";\n      --color-button-secondary-outline: ", ";\n\n      --color-button-tertiary-bg: transparent;\n      --color-button-tertiary-text: ", ";\n      --color-button-tertiary-outline: ", ";\n      --color-button-tertiary-hover-outline: ", ";\n      --color-button-tertiary-hover-text: ", ";\n      --color-button-tertiary-active-outline: ", ";\n      --color-button-tertiary-active-text: ", ";\n\n      --color-button-icon-disabled-outline: ", ";\n      --color-button-icon-disabled-text: ", ";\n      --color-button-icon-active-text: ", ";\n      --color-button-icon-active-bg: ", ";\n      --color-button-icon-active-outline: ", ";\n\n      --color-toolbar-button-bg: ", ";\n\n      --color-controlpanel-bg: ", ";\n      --color-controlpanel-border: ", ";\n      --color-controlpanel-section-text: ", ";\n      --color-controlpanel-text: ", ";\n      --color-controlpanel-section-bg: ", ";\n      --color-controlpanel-drawer-bg: ", ";\n      --color-controlpanel-ramp-slider: ", ";\n      --color-controlpanel-isovalue-slider: ", ";\n\n      --color-landingpage-bg: ", ";\n      --color-landingpage-bg-alt: ", ";\n      --color-landingpage-text: ", ";\n      --color-landingpage-banner-highlight-bg: ", ";\n\n      --color-statusflag-border: ", ";\n      --color-statusflag-text: ", ";\n\n      --color-alert-warning-text: ", ";\n      --color-alert-warning-bg: ", ";\n      --color-alert-info-text: ", ";\n      --color-alert-info-bg: ", ";\n\n      --color-layout-dividers: ", ";\n\n      --color-modal-border: ", ";\n\n      --color-menu-hover-text: ", ";\n      --color-menu-selected-text: ", ";\n\n      --color-checkbox-bg: ", ";\n\n      --font-family: ", ";\n    "])), $theme.colors.text.link, $theme.colors.text.header, $theme.colors.text.section, $theme.colors.text.body, $theme.colors.text.error, $theme.colors.text.selectionBg, $theme.colors.text.selectionText, $theme.colors.header.title, $theme.colors.header.hoverTitle, $theme.colors.header.bg, $theme.colors.header.border, $theme.colors.button.primary.bg, $theme.colors.button.primary.text, $theme.colors.button.primary.hoverBg, $theme.colors.button.primary.hoverBg, $theme.colors.button.primary.activeOutline, $theme.colors.button.primary.disabledBg, $theme.colors.button.link.text, $theme.colors.button.secondary.bg, $theme.colors.button.secondary.text, $theme.colors.button.secondary.outline, $theme.colors.button.tertiary.text, $theme.colors.button.tertiary.outline, $theme.colors.button.tertiary.hoverOutline, $theme.colors.button.tertiary.hoverText, $theme.colors.button.tertiary.activeOutline, $theme.colors.button.tertiary.hoverText, $theme.colors.button.tertiary.disabledOutline, $theme.colors.button.tertiary.disabledText, $theme.colors.button.tertiary.activeText, $theme.colors.button.tertiary.activeBg, $theme.colors.button.tertiary.activeOutline, $theme.colors.toolbar.buttonBg, $theme.colors.controlPanel.bg, $theme.colors.controlPanel.border, $theme.colors.controlPanel.sectionText, $theme.colors.controlPanel.text, $theme.colors.controlPanel.sectionBg, $theme.colors.controlPanel.drawerBg, $theme.colors.controlPanel.rampSlider, $theme.colors.controlPanel.isovalueSlider, $theme.colors.landingPage.bg, $theme.colors.landingPage.bgAlt, $theme.colors.landingPage.text, $theme.colors.landingPage.bannerBg, $theme.colors.statusFlag.border, $theme.colors.statusFlag.text, $theme.colors.alert.warning.text, $theme.colors.alert.warning.bg, $theme.colors.alert.info.text, $theme.colors.alert.info.bg, $theme.colors.layout.dividers, $theme.colors.modal.border, $theme.colors.menu.hoverText, $theme.colors.menu.selectedText, $theme.colors.checkbox.bg, $theme.fonts.family);
 });
+var GlobalTooltipStyle = createGlobalStyle(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .ant-tooltip-inner {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    /* !important needed: antd hardcodes text-align: start on tooltip inner */\n    text-align: center !important;\n    line-height: 1.4;\n    font-weight: 400;\n    /* !important needed: antd's CSS-in-JS injects tooltip styles into portals at higher specificity than global stylesheets */\n    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.30), 0 3px 6px -4px rgba(0, 0, 0, 0.40), 0 9px 28px 8px rgba(0, 0, 0, 0.20) !important;\n  }\n\n"])));
 
 /**
  * Provides CSS variables and global styling for the image viewer.
@@ -157,6 +172,14 @@ export default function StyleProvider(props) {
         colorBgContainer: "transparent",
         colorSplit: theme.colors.layout.split,
         colorPrimaryTextHover: theme.colors.text.selectionText,
+        colorWarning: theme.colors.alert.warning.text,
+        colorWarningBg: theme.colors.alert.warning.bg,
+        colorWarningBorder: theme.colors.alert.warning.text,
+        colorWarningText: theme.colors.alert.warning.text,
+        colorInfo: theme.colors.alert.info.text,
+        colorInfoBg: theme.colors.alert.info.bg,
+        colorInfoBorder: theme.colors.alert.info.text,
+        colorInfoText: theme.colors.alert.info.text,
         fontWeightStrong: 400,
         colorBgElevated: palette.darkGrey,
         controlItemBgHover: theme.colors.menu.hoverBg,
@@ -170,11 +193,14 @@ export default function StyleProvider(props) {
           primaryColor: theme.colors.button.primary.text,
           defaultHoverBg: theme.colors.button.secondary.bg,
           defaultActiveBg: theme.colors.button.secondary.bg,
-          defaultActiveBorderColor: theme.colors.button.tertiary.activeOutline
+          defaultActiveBorderColor: theme.colors.button.primary.activeOutline
         },
-        Card: {
-          borderRadiusLG: 0,
-          headerHeight: 48
+        Checkbox: {
+          borderRadiusSM: 2,
+          colorBgContainer: theme.colors.checkbox.bg,
+          colorPrimary: theme.colors.checkbox.bg,
+          colorPrimaryHover: theme.colors.checkbox.hoverBg,
+          colorText: theme.colors.checkbox.text
         },
         Collapse: {
           borderRadiusLG: 0,
@@ -187,26 +213,38 @@ export default function StyleProvider(props) {
         Layout: {
           siderBg: theme.colors.controlPanel.bg
         },
-        Checkbox: {
-          borderRadiusSM: 2,
-          colorBgContainer: theme.colors.checkbox.bg,
-          colorPrimary: theme.colors.checkbox.bg,
-          colorPrimaryHover: theme.colors.checkbox.hoverBg,
-          colorText: theme.colors.checkbox.text
-        },
-        Tooltip: {
-          colorBgSpotlight: theme.colors.tooltip.bg
-        },
         Modal: {
           colorBgMask: theme.colors.modal.maskBg,
           contentBg: theme.colors.modal.bg,
           headerBg: theme.colors.modal.bg,
           footerBg: theme.colors.modal.bg,
           titleFontSize: 19
+        },
+        Radio: {
+          buttonCheckedBg: theme.colors.button.tertiary.activeBg,
+          buttonColor: theme.colors.button.tertiary.text,
+          // can't style borders and text of activated buttons independently within ant's system, so we set border
+          //   colors here and text/bg colors in custom css
+          colorPrimary: theme.colors.button.tertiary.activeOutline
+        },
+        Select: {
+          colorText: theme.colors.button.tertiary.text,
+          colorBorder: theme.colors.button.tertiary.outline,
+          // arrow color
+          colorTextQuaternary: theme.colors.button.tertiary.text,
+          colorTextDisabled: theme.colors.button.tertiary.disabledText,
+          colorTextPlaceholder: theme.colors.button.tertiary.hoverText,
+          colorBgContainerDisabled: "transparent"
+        },
+        // Additional tooltip overrides (font-weight, box-shadow, layout) are in GlobalTooltipStyle below,
+        // which is required because antd renders tooltips in portals outside the scoped CssProvider.
+        Tooltip: {
+          colorBgSpotlight: theme.colors.tooltip.bg,
+          fontSize: 12
         }
       }
     }
-  }, /*#__PURE__*/React.createElement(CssProvider, {
+  }, /*#__PURE__*/React.createElement(GlobalTooltipStyle, null), /*#__PURE__*/React.createElement(CssProvider, {
     $theme: theme
   }, props.children));
 }

package/es/aics-image-viewer/components/TfEditor/index.js

@@ -317,6 +317,7 @@ var TfEditor = function TfEditor(props) {
     colorPickerPosition = _useState8[0],
     setColorPickerPosition = _useState8[1];
   var lastColorRef = useRef(TFEDITOR_DEFAULT_COLOR);
+  var dropdownContainerRef = useRef(null);
   var svgRef = useRef(null); // need access to SVG element to measure mouse position
 
   var histogram = props.channelData.histogram;
@@ -765,7 +766,9 @@ var TfEditor = function TfEditor(props) {
     }
   })))), props.volumeEnabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h4", null, "Volume settings"), /*#__PURE__*/React.createElement("div", {
     className: "tf-editor-control-row"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown, {
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: dropdownContainerRef
+  }, /*#__PURE__*/React.createElement(Dropdown, {
     trigger: ["click"],
     menu: {
       items: [{
@@ -785,6 +788,10 @@ var TfEditor = function TfEditor(props) {
         var key = _ref5.key;
         return applyTFGenerator(key);
       }
+    },
+    getPopupContainer: function getPopupContainer() {
+      var _dropdownContainerRef;
+      return (_dropdownContainerRef = dropdownContainerRef.current) !== null && _dropdownContainerRef !== void 0 ? _dropdownContainerRef : document.body;
     }
   }, /*#__PURE__*/React.createElement(Button, {
     size: "small"

package/es/aics-image-viewer/components/Toolbar/index.js

@@ -27,11 +27,13 @@ var visuallyHiddenStyle = {
   borderWidth: "0"
 };
 var Toolbar = function Toolbar(props) {
+  var _props$multiscaleInde;
   var containerRef = React.useRef(null);
   var barRef = React.useRef(null);
   var leftRef = React.useRef(null);
   var rightRef = React.useRef(null);
   var centerRef = React.useRef(null);
+  var resizeObserver = React.useRef();
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     scrollMode = _React$useState2[0],
@@ -50,6 +52,8 @@ var Toolbar = function Toolbar(props) {
   var autorotate = useViewerState(select("autorotate"));
   var showAxes = useViewerState(select("showAxes"));
   var showBoundingBox = useViewerState(select("showBoundingBox"));
+  var useExactScaleLevel = useViewerState(select("useExactScaleLevel"));
+  var scaleLevelIndex = useViewerState(select("scaleLevelIndex"));
   var changeViewerSetting = useViewerState(select("changeViewerSetting"));
 
   // Scroll buttons are only visible when toolbar can be scrolled in that direction.
@@ -60,7 +64,7 @@ var Toolbar = function Toolbar(props) {
       return;
     }
     setScrollBtnLeft(barEl.scrollLeft > 0);
-    setScrollBtnRight(barEl.scrollLeft < barEl.scrollWidth - barEl.clientWidth);
+    setScrollBtnRight(Math.ceil(barEl.scrollLeft) < barEl.scrollWidth - barEl.clientWidth);
   }, []);
 
   // This is effectively a `useCallback` - it memoizes a function - but since we're feeding the whole function into
@@ -88,15 +92,30 @@ var Toolbar = function Toolbar(props) {
           return leftRect.right > centerRect.left || centerRect.right > rightRect.left;
         }
       });
-      checkScrollBtnVisible();
+      window.setTimeout(checkScrollBtnVisible, 0);
     }, RESIZE_DEBOUNCE_DELAY);
   }, [checkScrollBtnVisible]);
   React.useEffect(function () {
     // Make sure `checkSize` is run once on mount
     checkSize();
+    if (resizeObserver.current !== undefined) {
+      resizeObserver.current.disconnect();
+    }
+    resizeObserver.current = new ResizeObserver(checkSize);
+    if (leftRef.current !== null) {
+      resizeObserver.current.observe(leftRef.current);
+    }
+    if (centerRef.current !== null) {
+      resizeObserver.current.observe(centerRef.current);
+    }
+    if (rightRef.current !== null) {
+      resizeObserver.current.observe(rightRef.current);
+    }
     window.addEventListener("resize", checkSize);
     return function () {
-      return window.removeEventListener("resize", checkSize);
+      var _resizeObserver$curre;
+      (_resizeObserver$curre = resizeObserver.current) === null || _resizeObserver$curre === void 0 || _resizeObserver$curre.disconnect();
+      window.removeEventListener("resize", checkSize);
     };
   }, [checkSize]);
   var scrollX = function scrollX(amount) {
@@ -121,7 +140,8 @@ var Toolbar = function Toolbar(props) {
   var classForToggleBtn = function classForToggleBtn(active) {
     return "ant-btn-icon-only btn-borderless" + (active ? " btn-active" : "");
   };
-  var visibleControls = props.visibleControls;
+  var visibleControls = props.visibleControls,
+    multiscaleDims = props.multiscaleDims;
   var twoDMode = viewMode !== ViewMode.threeD;
   var renderGroup1 = visibleControls.viewModeRadioButtons || visibleControls.resetCameraButton || visibleControls.autoRotateButton;
   var renderGroup4 = visibleControls.showAxesButton || visibleControls.showBoundingBoxButton;
@@ -209,8 +229,9 @@ var Toolbar = function Toolbar(props) {
   }, "Full field"))), /*#__PURE__*/React.createElement("div", {
     className: "viewer-toolbar-group"
   }, /*#__PURE__*/React.createElement(Select, {
-    className: "select-render-setting",
-    popupClassName: "viewer-toolbar-dropdown",
+    style: {
+      minWidth: 120
+    },
     value: renderMode,
     onChange: function onChange(value) {
       return changeViewerSetting("renderMode", value);
@@ -244,7 +265,44 @@ var Toolbar = function Toolbar(props) {
     onClick: toggleBoundingBox
   }, /*#__PURE__*/React.createElement(ViewerIcon, {
     type: "boundingBox"
-  }))))), /*#__PURE__*/React.createElement("div", {
+  })))), multiscaleDims !== undefined && multiscaleDims.length > 1 && visibleControls.scaleLevelControls && /*#__PURE__*/React.createElement("div", {
+    className: "viewer-toolbar-group"
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "var(--color-button-tertiary-text)"
+    }
+  }, "Resolution"), /*#__PURE__*/React.createElement(Radio.Group, {
+    value: useExactScaleLevel,
+    onChange: function onChange(e) {
+      return changeViewerSetting("useExactScaleLevel", e.target.value);
+    }
+  }, /*#__PURE__*/React.createElement(Radio.Button, {
+    value: false
+  }, "Auto"), /*#__PURE__*/React.createElement(Radio.Button, {
+    value: true
+  }, "Manual")), /*#__PURE__*/React.createElement(Select, {
+    className: "select-resolution",
+    getPopupContainer: getPopupContainer,
+    style: {
+      minWidth: 150
+    },
+    value: useExactScaleLevel ? scaleLevelIndex : (_props$multiscaleInde = props.multiscaleIndex) !== null && _props$multiscaleInde !== void 0 ? _props$multiscaleInde : scaleLevelIndex,
+    onChange: function onChange(value) {
+      return changeViewerSetting("scaleLevelIndex", value);
+    },
+    disabled: !useExactScaleLevel
+  }, multiscaleDims.map(function (dims, idx) {
+    var _dims$shape = _slicedToArray(dims.shape, 5),
+      _t = _dims$shape[0],
+      _c = _dims$shape[1],
+      z = _dims$shape[2],
+      y = _dims$shape[3],
+      x = _dims$shape[4];
+    return /*#__PURE__*/React.createElement(Select.Option, {
+      key: idx,
+      value: idx
+    }, x, " x ", y, " x ", z);
+  })))), /*#__PURE__*/React.createElement("div", {
     className: "viewer-toolbar-right viewer-toolbar-group",
     ref: rightRef
   }, /*#__PURE__*/React.createElement(Tooltip, {

package/es/aics-image-viewer/components/Toolbar/styles.css

@@ -108,134 +108,46 @@
     margin-right:6px;
   }
 
+.viewer-toolbar .btn-borderless,
+  .viewer-toolbar .ant-select.ant-select-outlined .ant-select-selector,
+  .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked){
+    background-color:var(--color-toolbar-button-bg);
+  }
+
 .viewer-toolbar .ant-btn-icon-only{
     padding-bottom:4px;
     padding-left:1px;
   }
 
 .viewer-toolbar .btn-borderless{
-    background-color:var(--color-toolbar-button-bg);
     border-color:transparent;
     color:var(--color-text-body);
   }
 
 .viewer-toolbar .btn-active{
-    color:var(--color-button-icon-activated-text);
-    background-color:var(--color-button-icon-activated-bg);
-    border:1px solid var(--color-button-icon-activated-outline);
-  }
-
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled){
-    background-color:black;
-    box-shadow:-1px 0px 0px 0px transparent;
-    transition-property:color, background-color, border-color, box-shadow;
-  }
-
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled).ant-radio-button-wrapper-checked,
-    .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):hover{
-      outline:none;
-      color:white;
-      border-color:#aeacae;
-    }
-
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled).ant-radio-button-wrapper-checked:not(:first-child), .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):hover:not(:first-child){
-        box-shadow:-1px 0px 0px 0px #aeacae;
-      }
-
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled).ant-radio-button-wrapper-checked{
-      background-color:#4b4b4b;
-    }
-
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):hover{
-      background-color:#aa88ed;
-      color:white;
-    }
-
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):focus-within{
-      outline:none;
-    }
-
-.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled)::before{
-      content:none;
-    }
-
-.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting{
-    min-width:120px;
-  }
-
-.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting .ant-select-selection-item,
-    .viewer-toolbar.viewer-toolbar .ant-select.select-render-setting .ant-select-arrow{
-      color:var(--color-button-tertiary-text);
-      transition:all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-    }
-
-.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting .ant-select-selector{
-      border-color:#aeacae;
-      box-shadow:none;
-      background-color:var(--color-toolbar-button-bg);
-    }
-
-.viewer-toolbar .ant-select.select-render-setting:hover:not(:disabled) .ant-select-selector,
-    .viewer-toolbar .ant-select.select-render-setting:hover:not(:disabled) .ant-select-arrow,
-    .viewer-toolbar .ant-select.select-render-setting:hover:not(:disabled) .ant-select-selection-item,
-    .viewer-toolbar .ant-select.select-render-setting:focus-visible:not(:disabled) .ant-select-selector,
-    .viewer-toolbar .ant-select.select-render-setting:focus-visible:not(:disabled) .ant-select-arrow,
-    .viewer-toolbar .ant-select.select-render-setting:focus-visible:not(:disabled) .ant-select-selection-item,
-    .viewer-toolbar.viewer-toolbar.viewer-toolbar .ant-select-open .ant-select-selector,
-    .viewer-toolbar.viewer-toolbar.viewer-toolbar .ant-select-open .ant-select-arrow,
-    .viewer-toolbar.viewer-toolbar.viewer-toolbar .ant-select-open .ant-select-selection-item{
-      color:var(--color-button-tertiary-hover-text);
-      outline-color:var(--color-button-tertiary-hover-outline);
-    }
-
-.viewer-toolbar-dropdown .ant-select-dropdown-menu-item-active{
-    transition-property:background-color, color;
-  }
-
-.viewer-toolbar-dropdown .ant-select-dropdown-menu-item-disabled,
-  .viewer-toolbar-dropdown .ant-select-dropdown-menu-item-disabled:hover{
-    color:#6e6e6e;
-  }
-
-.viewer-toolbar-dropdown .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled){
-    background-color:transparent;
-    color:white;
+    color:var(--color-button-icon-active-text);
+    background-color:var(--color-button-icon-active-bg);
+    border:1px solid var(--color-button-icon-active-outline);
   }
 
-.viewer-toolbar-dropdown .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled).ant-select-dropdown-menu-item-selected{
-      background-color:#4b4b4b;
-    }
+.viewer-toolbar{
+  --color-button-radio-hover-outline:var(--color-button-tertiary-active-outline);
+  --color-button-radio-hover-text:var(--color-button-icon-active-text);
+}
 
-.viewer-toolbar-dropdown .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled){
-    background-color:#f6f0ff;
-    color:#4b4b4b;
+.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):hover,
+  .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):has(:focus-visible){
+    background-color:var(--color-button-tertiary-hover-text);
   }
 
-@supports selector(:has(:focus-visible)){
-    .viewer-toolbar .ant-select-selection:focus-visible,
-    .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):has(:focus-visible),
-    .viewer-toolbar .btn-borderless:focus-visible{
-      background-color:#aa88ed !important;
-      color:white !important;
+.viewer-toolbar .ant-select.select-resolution > .ant-select-selector{
+      text-align:left;
     }
 
-    .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):has(:focus-visible){
-      outline:none;
-      border-color:#aeacae;
-    }
-
-      .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):has(:focus-visible):not(:first-child){
-        box-shadow:-1px 0px 0px 0px #aeacae;
-      }
-}
-
-@supports not (selector(:has(:focus-visible))){
-    .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):focus-within{
-      outline:none;
-      border-color:#aeacae;
+.viewer-toolbar .ant-select.select-resolution .ant-select-selection-item{
+      color:var(--color-button-tertiary-text);
     }
 
-      .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):focus-within:not(:first-child){
-        box-shadow:-1px 0px 0px 0px #aeacae;
+.viewer-toolbar .ant-select.select-resolution.ant-select-disabled .ant-select-arrow{
+        display:none;
       }
-}

package/es/aics-image-viewer/components/shared/ControlPanelRow/styles.css

@@ -25,7 +25,7 @@
     }
 
   .control-panel-col .control-panel-row .ant-btn-text{
-    color:var(--color-button-icon-activated-text);
+    color:var(--color-button-icon-active-text);
     transition:color 0.3s;
   }