@box/blueprint-web 9.9.0 → 9.11.0

package/lib-esm/branding-styles/utils/createTheme.js

@@ -148,10 +148,16 @@ function createTheme(colorKey) {
     buttonBorderHover: exceedsLightThreshold ? bdlGray80 : hoverHex,
     buttonBorderActive: exceedsLightThreshold ? bdlGray65 : activeHex,
     // ProgressBar overrides
-    progressBarBackground: exceedsLightThreshold ? bdlGray50 : hoverHex,
+    progressBarBackground: null,
     // Scroll effect overrides for scrollable themed elements
     scrollShadowRgba
   };
+  const isDefaultTheme = colorKeyHex === Color(theme.primary.background).hex();
+  // Avoid overriding the default progress bar background color
+  // as the calculated value dooes not work well with the default theme
+  if (!isDefaultTheme) {
+    colorValues.progressBarBackground = exceedsLightThreshold ? bdlGray50 : hoverHex;
+  }
   const dynamicTheme = {
     // To avoid a mixture of casing, we force all values to lower
     primary: {

package/lib-esm/branding-styles/utils/theme.js

@@ -1,4 +1,4 @@
-import { white, bdlGray05, bdlGray10, bdlGray, bdlGray30, black, bdlGray40, bdlGridUnitPx, bdlBoxBlue } from './variables.js';
+import { white, bdlGray05, bdlGray10, bdlGray, bdlGray30, black, bdlGray40, bdlGridUnitPx, bdlBoxBlue, bdlBoxBlue80 } from './variables.js';
 
 // Copy of https://github.com/box/box-ui-elements/blob/830bf71bef5720a5e6ba128afa35152112674c17/src/styles/theme.js
 const theme = {
@@ -34,7 +34,7 @@ const theme = {
     buttonBorderHover: '#006ae9',
     buttonForeground: white,
     foreground: white,
-    progressBarBackground: '#006ae9',
+    progressBarBackground: bdlBoxBlue80,
     scrollShadowRgba: 'rgba(0, 0, 0, 0.12)'
   },
   // TODO: Should be the same keys as the default if applicable

package/lib-esm/branding-styles/utils/variables.js

@@ -3,6 +3,7 @@
 const white = '#fff'; // white
 const black = '#000'; // black
 const bdlBoxBlue = '#0061d5'; // bdl-box-blue
+const bdlBoxBlue80 = '#3381dd'; // bdl-box-blue-80
 const bdlGray = '#222'; // bdl-gray
 const bdlGray80 = '#4e4e4e'; // bdl-gray-80
 const bdlGray65 = '#6f6f6f'; // bdl-gray-65
@@ -14,4 +15,4 @@ const bdlGray05 = '#f4f4f4'; // bdl-gray-05
 const bdlGridUnitPx = '4'; // bdl-grid-unit-px
  // xlarge-screen
 
-export { bdlBoxBlue, bdlGray, bdlGray05, bdlGray10, bdlGray30, bdlGray40, bdlGray50, bdlGray65, bdlGray80, bdlGridUnitPx, black, white };
+export { bdlBoxBlue, bdlBoxBlue80, bdlGray, bdlGray05, bdlGray10, bdlGray30, bdlGray40, bdlGray50, bdlGray65, bdlGray80, bdlGridUnitPx, black, white };

package/lib-esm/index.d.ts

@@ -75,6 +75,7 @@ export * from './utils/composeEventHandlers';
 export * from './utils/isProduction';
 export * from './utils/keyboardUtils';
 export * from './utils/useBreakpoint';
+export * from './utils/useControllableState';
 export * from './utils/useFullTextTooltip';
 export * from './utils/useUniqueId';
 export * from './visually-hidden';

package/lib-esm/index.js

@@ -90,6 +90,7 @@ export { composeEventHandlers } from './utils/composeEventHandlers.js';
 export { isProduction } from './utils/isProduction.js';
 export { isCtrlKeyPressed, isDeleteKeyPressed, keys } from './utils/keyboardUtils.js';
 export { Breakpoint, useBreakpoint } from './utils/useBreakpoint.js';
+export { useControllableState } from './utils/useControllableState.js';
 export { useFullTextTooltip } from './utils/useFullTextTooltip.js';
 export { getUniqueId, useUniqueId } from './utils/useUniqueId.js';
 export { VisuallyHidden } from './visually-hidden/visually-hidden.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "9.9.0",
+    "version": "9.11.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "669489f834920de03a726e0106414e4065a239c1",
+    "gitHead": "12ff2908da5de325ae2b5e8124befa5f9cb04a84",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {