@box/blueprint-web 12.80.0 → 12.81.1

package/dist/lib-esm/index.css

@@ -11698,11 +11698,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --z-index-card-tooltip:2147483647;
 }
 
-.bp_toolbar_module_dropdownIndicator--47b61.bp_toolbar_module_invertCaret--47b61{
+.bp_toolbar_module_dropdownIndicator--ce6fd.bp_toolbar_module_invertCaret--ce6fd{
   transform:rotate(.5turn);
 }
 
-.bp_toolbar_module_toolbarRoot--47b61[data-modern=false]{
+.bp_toolbar_module_toolbarRoot--ce6fd[data-modern=false]{
   --toolbar-root-gap:var(--space-1);
   --toolbar-root-padding:calc(var(--space-1) - var(--border-1));
   --toolbar-root-background:var(--surface-surface);
@@ -11718,7 +11718,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --toolbar-separator-border-radius:var(--radius-2);
 }
 
-.bp_toolbar_module_toolbarRoot--47b61[data-modern=true]{
+.bp_toolbar_module_toolbarRoot--ce6fd[data-modern=true]{
   --box-shadow:0 4px 12px 0 #0000001a;
   --toolbar-root-gap:var(--bp-space-010);
   --toolbar-root-padding:var(--bp-space-010);
@@ -11735,11 +11735,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --toolbar-separator-border-radius:var(--bp-radius-03);
   --toolbar-toggle-group-gap:var(--bp-space-010);
 }
-.bp_toolbar_module_toolbarRoot--47b61[data-modern=true].bp_toolbar_module_ScrollableToolbarWithReducedPadding--47b61{
+.bp_toolbar_module_toolbarRoot--ce6fd[data-modern=true].bp_toolbar_module_ScrollableToolbarWithReducedPadding--ce6fd{
   --toolbar-root-padding:0;
 }
 
-.bp_toolbar_module_toolbarItem--47b61[data-modern=false]{
+.bp_toolbar_module_toolbarItem--ce6fd[data-modern=false]{
   --toolbar-item-min-width:var(--size-8);
   --toolbar-item-min-height:var(--size-8);
   --toolbar-item-text-indent:var(--space-1);
@@ -11758,6 +11758,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --toolbar-toggle-on-hover-border:var(--border-1) solid var(--surface-toggle-surface-on-hover);
   --toolbar-icon-width:var(--size-5);
   --toolbar-icon-height:var(--size-5);
+  --toolbar-item-text-color:var(--text-text-on-light);
   --toolbar-text-toggle-color:var(--text-text-on-light);
   --toolbar-text-toggle-off-border:var(--border-1) solid var(--border-toggletext-border-off);
   --toolbar-text-toggle-padding-inline:var(--space-2);
@@ -11775,7 +11776,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --trigger-button-hover-opacity:.7;
 }
 
-.bp_toolbar_module_toolbarItem--47b61[data-modern=true]{
+.bp_toolbar_module_toolbarItem--ce6fd[data-modern=true]{
   --toolbar-item-min-width:var(--bp-size-080);
   --toolbar-item-min-height:var(--bp-size-080);
   --toolbar-item-text-indent:var(--bp-space-010);
@@ -11794,6 +11795,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --toolbar-toggle-on-hover-border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
   --toolbar-icon-width:var(--bp-size-050);
   --toolbar-icon-height:var(--bp-size-050);
+  --toolbar-item-text-color:var(--bp-text-text-on-light);
   --toolbar-text-toggle-color:var(--bp-text-text-on-light);
   --toolbar-text-toggle-off-border:var(--bp-border-01) solid var(--bp-border-toggle-text-border-off);
   --toolbar-text-toggle-padding-inline:var(--bp-space-020);
@@ -11811,36 +11813,36 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --trigger-button-hover-opacity:.65;
   --trigger-button-active-opacity:.8;
 }
-.bp_toolbar_module_toolbarItem--47b61[data-modern=true]:active,.bp_toolbar_module_toolbarItem--47b61[data-modern=true][data-active]{
+.bp_toolbar_module_toolbarItem--ce6fd[data-modern=true]:active,.bp_toolbar_module_toolbarItem--ce6fd[data-modern=true][data-active]{
   background:var(--bp-surface-toggle-surface-off-pressed);
   border:var(--bp-border-01) solid var(--bp-border-toggle-border-off);
 }
-.bp_toolbar_module_toolbarItem--47b61[data-modern=true][data-state=on]:active,.bp_toolbar_module_toolbarItem--47b61[data-modern=true][data-state=on][data-active]{
+.bp_toolbar_module_toolbarItem--ce6fd[data-modern=true][data-state=on]:active,.bp_toolbar_module_toolbarItem--ce6fd[data-modern=true][data-state=on][data-active]{
   background:var(--bp-surface-toggle-surface-on-pressed);
   border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
 }
-.bp_toolbar_module_toolbarItem--47b61[data-modern=true][data-state=on]:hover .bp_toolbar_module_dropdownIndicator--47b61{
+.bp_toolbar_module_toolbarItem--ce6fd[data-modern=true][data-state=on]:hover .bp_toolbar_module_dropdownIndicator--ce6fd{
   transform:rotate(1turn);
 }
-.bp_toolbar_module_toolbarItem--47b61[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--47b61:active,.bp_toolbar_module_toolbarItem--47b61[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--47b61[data-active]{
+.bp_toolbar_module_toolbarItem--ce6fd[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--ce6fd:active,.bp_toolbar_module_toolbarItem--ce6fd[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--ce6fd[data-active]{
   background-color:var(--toolbar-button-color);
   opacity:var(--trigger-button-active-opacity);
 }
-.bp_toolbar_module_toolbarItem--47b61[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--47b61[data-state=on]:hover{
+.bp_toolbar_module_toolbarItem--ce6fd[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--ce6fd[data-state=on]:hover{
   background-color:var(--toolbar-button-color);
   border-color:var(--toolbar-button-color);
   opacity:var(--trigger-button-hover-opacity);
 }
 
-.bp_toolbar_module_toggleGroup--47b61[data-modern=false]{
+.bp_toolbar_module_toggleGroup--ce6fd[data-modern=false]{
   --toolbar-toggle-group-gap:var(--space-1);
 }
 
-.bp_toolbar_module_toggleGroup--47b61[data-modern=true]{
+.bp_toolbar_module_toggleGroup--ce6fd[data-modern=true]{
   --toolbar-toggle-group-gap:var(--bp-space-010);
 }
 
-.bp_toolbar_module_toolbarRoot--47b61{
+.bp_toolbar_module_toolbarRoot--ce6fd{
   align-items:center;
   background:var(--toolbar-root-background);
   border:var(--toolbar-root-border);
@@ -11851,16 +11853,16 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   padding:var(--toolbar-root-padding);
 }
 
-.bp_toolbar_module_scrollButtonWrapper--47b61{
+.bp_toolbar_module_scrollButtonWrapper--ce6fd{
   align-items:center;
   display:flex;
   gap:var(--toolbar-scroll-button-gap);
 }
-.bp_toolbar_module_scrollButtonWrapper--47b61.bp_toolbar_module_hidden--47b61{
+.bp_toolbar_module_scrollButtonWrapper--ce6fd.bp_toolbar_module_hidden--ce6fd{
   display:none;
 }
 
-.bp_toolbar_module_scrollableChildrenWrapper--47b61{
+.bp_toolbar_module_scrollableChildrenWrapper--ce6fd{
   -ms-overflow-style:none;
   align-items:center;
   display:flex;
@@ -11873,30 +11875,31 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   scrollbar-width:none;
   white-space:nowrap;
 }
-.bp_toolbar_module_scrollableChildrenWrapper--47b61::-webkit-scrollbar{
+.bp_toolbar_module_scrollableChildrenWrapper--ce6fd::-webkit-scrollbar{
   display:none;
 }
-.bp_toolbar_module_scrollableChildrenWrapper--47b61 > *{
+.bp_toolbar_module_scrollableChildrenWrapper--ce6fd > *{
   flex:none;
 }
 
-.bp_toolbar_module_separator--47b61{
+.bp_toolbar_module_separator--ce6fd{
   background-color:var(--toolbar-separator-background);
   border-radius:var(--toolbar-separator-border-radius);
   height:var(--toolbar-separator-height);
   width:1px;
 }
 
-.bp_toolbar_module_toggleGroup--47b61{
+.bp_toolbar_module_toggleGroup--ce6fd{
   display:flex;
   gap:var(--toolbar-toggle-group-gap);
 }
 
-.bp_toolbar_module_toolbarItem--47b61{
+.bp_toolbar_module_toolbarItem--ce6fd{
   align-items:center;
   background:var(--toolbar-button-color, var(--toolbar-item-background));
   border:var(--toolbar-item-border);
   border-radius:var(--toolbar-item-border-radius);
+  color:var(--toolbar-item-text-color);
   cursor:pointer;
   display:flex;
   gap:var(--toolbar-scroll-button-gap);
@@ -11909,40 +11912,40 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_toolbar_module_toolbarItem--47b61[data-disabled]{
+.bp_toolbar_module_toolbarItem--ce6fd[data-disabled]{
   background:var(--toolbar-item-background);
   opacity:var(--toolbar-item-disabled-opacity);
   pointer-events:none;
 }
-.bp_toolbar_module_toolbarItem--47b61:not([data-disabled]):focus-visible{
+.bp_toolbar_module_toolbarItem--ce6fd:not([data-disabled]):focus-visible{
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--toolbar-item-focus-outline);
 }
-.bp_toolbar_module_toolbarItem--47b61:not([data-disabled]):hover{
+.bp_toolbar_module_toolbarItem--ce6fd:not([data-disabled]):hover{
   background:var(--toolbar-button-color, var(--toolbar-item-off-hover-background));
   border:var(--toolbar-item-off-hover-border);
 }
 
-.bp_toolbar_module_toolbarToggle--47b61[data-state=on]{
+.bp_toolbar_module_toolbarToggle--ce6fd[data-state=on]{
   background:var(--toolbar-toggle-on-pressed-background);
   border:var(--toolbar-toggle-on-pressed-border);
 }
-.bp_toolbar_module_toolbarToggle--47b61[data-state=on] svg *{
+.bp_toolbar_module_toolbarToggle--ce6fd[data-state=on] svg *{
   fill:var(--toolbar-toggle-icon-fill);
 }
-.bp_toolbar_module_toolbarToggle--47b61[data-state=on]:not([data-disabled]):hover{
+.bp_toolbar_module_toolbarToggle--ce6fd[data-state=on]:not([data-disabled]):hover{
   background:var(--toolbar-toggle-on-hover-background);
   border:var(--toolbar-toggle-on-hover-border);
 }
-.bp_toolbar_module_triggerButtonSelectedWithColor--47b61[data-state=on] .bp_toolbar_module_dropdownIndicator--47b61 path{
+.bp_toolbar_module_triggerButtonSelectedWithColor--ce6fd[data-state=on] .bp_toolbar_module_dropdownIndicator--ce6fd path{
   fill:var(--icon-icon-on-light);
 }
-.bp_toolbar_module_triggerButtonSelectedWithColor--47b61[data-state=on]:hover{
+.bp_toolbar_module_triggerButtonSelectedWithColor--ce6fd[data-state=on]:hover{
   background-color:var(--toolbar-button-color);
   border-color:var(--toolbar-button-color);
   opacity:var(--trigger-button-hover-opacity);
 }
 
-.bp_toolbar_module_toolbarIcon--47b61{
+.bp_toolbar_module_toolbarIcon--ce6fd{
   align-items:center;
   display:flex;
   height:var(--toolbar-icon-height);
@@ -11950,7 +11953,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   width:var(--toolbar-icon-width);
 }
 
-.bp_toolbar_module_toolbarTextToggleItem--47b61{
+.bp_toolbar_module_toolbarTextToggleItem--ce6fd{
   border:var(--toolbar-text-toggle-off-border);
   color:var(--toolbar-text-toggle-color);
   font-family:var(--body-default-font-family);
@@ -11965,24 +11968,24 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:var(--body-default-text-case);
   white-space:nowrap;
 }
-.bp_toolbar_module_toolbarTextToggleItem--47b61:hover{
+.bp_toolbar_module_toolbarTextToggleItem--ce6fd:hover{
   background:var(--toolbar-text-toggle-hover-background);
   border-color:var(--toolbar-text-toggle-hover-border-color);
 }
-.bp_toolbar_module_toolbarTextToggleItem--47b61:active{
+.bp_toolbar_module_toolbarTextToggleItem--ce6fd:active{
   background:var(--toolbar-text-toggle-active-background);
   border-color:var(--toolbar-text-toggle-active-border-color);
 }
-.bp_toolbar_module_toolbarTextToggleItem--47b61[aria-checked=true]{
+.bp_toolbar_module_toolbarTextToggleItem--ce6fd[aria-checked=true]{
   background:var(--toolbar-text-toggle-checked-background);
   border:var(--toolbar-text-toggle-checked-border);
   color:var(--toolbar-text-toggle-checked-color);
 }
-.bp_toolbar_module_toolbarTextToggleItem--47b61[aria-checked=true]:hover{
+.bp_toolbar_module_toolbarTextToggleItem--ce6fd[aria-checked=true]:hover{
   background:var(--toolbar-text-toggle-checked-hover-background);
   border-color:var(--toolbar-text-toggle-checked-hover-border-color);
 }
-.bp_toolbar_module_toolbarTextToggleItem--47b61[aria-checked=true]:active{
+.bp_toolbar_module_toolbarTextToggleItem--ce6fd[aria-checked=true]:active{
   background:var(--toolbar-text-toggle-checked-active-background);
   border-color:var(--toolbar-text-toggle-checked-active-border-color);
 }

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-checkbox-item.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Checkmark } from '@box/blueprint-web-assets/icons/Fill';
-import { Gray100 } from '@box/blueprint-web-assets/tokens/tokens';
+import { bpIconIconOnLight, Gray100 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import styles from './dropdown-menu.module.js';
 import { useMenuItemVariant } from './menu-item-variant-context.js';
@@ -21,8 +22,12 @@ const DropdownMenuCheckboxItem = /*#__PURE__*/forwardRef((props, forwardedRef) =
   const {
     internalSize
   } = useMenuItemVariant();
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const isSizeSmall = internalSize === 'small';
   const checkmarkSize = isSizeSmall ? '1rem' : '2rem';
+  const checkmarkColor = enableModernizedComponents ? bpIconIconOnLight : Gray100;
   const preventDefault = useCallback(event => event.preventDefault(), []);
   return jsxs(DropdownMenuPrimitive.CheckboxItem, {
     ...rest,
@@ -33,7 +38,7 @@ const DropdownMenuCheckboxItem = /*#__PURE__*/forwardRef((props, forwardedRef) =
     children: [jsx(DropdownMenuPrimitive.ItemIndicator, {
       className: styles.checkmark,
       children: jsx(Checkmark, {
-        color: Gray100,
+        color: checkmarkColor,
         height: checkmarkSize,
         role: "presentation",
         width: checkmarkSize

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-item.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Size8, Size4 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Size8, Size4, bpIconIconOnLightSecondary } from '@box/blueprint-web-assets/tokens/tokens';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef, useCallback, createElement } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { Text } from '../../text/text.js';
 import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import styles from './dropdown-menu.module.js';
@@ -86,13 +87,18 @@ const MenuItemStartElement = /*#__PURE__*/forwardRef(({
   const {
     internalSize
   } = useMenuItemVariant();
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const iconSize = internalSize === 'medium' ? Size8 : Size4;
+  const iconColor = enableModernizedComponents ? bpIconIconOnLightSecondary : undefined;
   return jsxs("div", {
     ...rest,
     ref: ref,
     className: clsx(styles.startElement, className),
     children: [icon && /*#__PURE__*/createElement(icon, {
       className: styles.icon,
+      color: iconColor,
       height: iconSize,
       width: iconSize,
       role: 'presentation'

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-radio-select-item.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Checkmark } from '@box/blueprint-web-assets/icons/Fill';
-import { Gray100 } from '@box/blueprint-web-assets/tokens/tokens';
+import { bpIconIconOnLight, Gray100 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import styles from './dropdown-menu.module.js';
 import { useMenuItemVariant } from './menu-item-variant-context.js';
@@ -21,8 +22,12 @@ const DropdownMenuRadioSelectItem = /*#__PURE__*/forwardRef((props, forwardedRef
   const {
     internalSize
   } = useMenuItemVariant();
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const isSizeSmall = internalSize === 'small';
   const checkmarkSize = isSizeSmall ? '1rem' : '2rem';
+  const checkmarkColor = enableModernizedComponents ? bpIconIconOnLight : Gray100;
   const preventDefault = useCallback(event => event.preventDefault(), []);
   return jsxs(DropdownMenuPrimitive.RadioItem, {
     ...rest,
@@ -34,7 +39,7 @@ const DropdownMenuRadioSelectItem = /*#__PURE__*/forwardRef((props, forwardedRef
     children: [jsx(DropdownMenuPrimitive.ItemIndicator, {
       className: styles.checkmark,
       children: jsx(Checkmark, {
-        color: Gray100,
+        color: checkmarkColor,
         height: checkmarkSize,
         role: "presentation",
         width: checkmarkSize

package/dist/lib-esm/toolbar/toolbar.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"dropdownIndicator":"bp_toolbar_module_dropdownIndicator--47b61","invertCaret":"bp_toolbar_module_invertCaret--47b61","toolbarRoot":"bp_toolbar_module_toolbarRoot--47b61","ScrollableToolbarWithReducedPadding":"bp_toolbar_module_ScrollableToolbarWithReducedPadding--47b61","toolbarItem":"bp_toolbar_module_toolbarItem--47b61","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--47b61","toggleGroup":"bp_toolbar_module_toggleGroup--47b61","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--47b61","hidden":"bp_toolbar_module_hidden--47b61","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--47b61","separator":"bp_toolbar_module_separator--47b61","toolbarToggle":"bp_toolbar_module_toolbarToggle--47b61","toolbarIcon":"bp_toolbar_module_toolbarIcon--47b61","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--47b61"};
+var styles = {"dropdownIndicator":"bp_toolbar_module_dropdownIndicator--ce6fd","invertCaret":"bp_toolbar_module_invertCaret--ce6fd","toolbarRoot":"bp_toolbar_module_toolbarRoot--ce6fd","ScrollableToolbarWithReducedPadding":"bp_toolbar_module_ScrollableToolbarWithReducedPadding--ce6fd","toolbarItem":"bp_toolbar_module_toolbarItem--ce6fd","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--ce6fd","toggleGroup":"bp_toolbar_module_toggleGroup--ce6fd","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--ce6fd","hidden":"bp_toolbar_module_hidden--ce6fd","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--ce6fd","separator":"bp_toolbar_module_separator--ce6fd","toolbarToggle":"bp_toolbar_module_toolbarToggle--ce6fd","toolbarIcon":"bp_toolbar_module_toolbarIcon--ce6fd","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--ce6fd"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.80.0",
+    "version": "12.81.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {