@box/blueprint-web 12.13.1 → 12.14.0

package/dist/lib-esm/index.css

@@ -5350,60 +5350,119 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   white-space:nowrap;
 }
 
-.bp_notification_module_viewport--0bfb0{
+.bp_notification_module_viewport--bc071{
+  --notification-viewport-space:var(--space-4);
+  --notification-viewport-item-spacing:var(--space-3);
   all:unset;
   align-items:center;
   display:flex;
   flex-direction:column;
-  gap:var(--space-3);
+  gap:var(--notification-viewport-item-spacing);
   left:50%;
   position:fixed;
-  top:var(--space-4);
+  top:var(--notification-viewport-space);
   transform:translate(-50%);
   z-index:2147483647;
 }
 
-.bp_notification_module_root--0bfb0{
-  border:var(--border-2) solid;
-  border-radius:var(--radius-3);
+.bp_notification_module_root--bc071[data-modern=false]{
+  --notification-padding-vertical:var(--space-3);
+  --notification-padding-horizontal:var(--space-4);
+  --notification-item-spacing:var(--space-3);
+  --notification-radius:var(--radius-3);
+  --notification-border:var(--border-2);
+  --notification-shadow:var(--dropshadow-3);
+  --notification-background-info:var(--surface-message-surface-info);
+  --notification-background-success:var(--surface-message-surface-success);
+  --notification-background-warning:var(--surface-message-surface-warning);
+  --notification-background-error:var(--surface-message-surface-error);
+  --notification-background-blur:none;
+  --notification-border-color-info:var(--border-message-border-info);
+  --notification-border-color-success:var(--border-message-border-success);
+  --notification-border-color-warning:var(--border-message-border-warning);
+  --notification-border-color-error:var(--border-message-border-error);
+  --notification-text-color:var(--text-text-on-light);
+  --notification-text-container-height:var(--space-8);
+  --notification-icon-size:var(--size-8);
+}
+
+.bp_notification_module_root--bc071[data-modern=true]{
+  --notification-padding-vertical:var(--bp-space-030);
+  --notification-padding-horizontal:var(--bp-space-040);
+  --notification-item-spacing:var(--bp-space-030);
+  --notification-radius:var(--bp-radius-16);
+  --notification-border:var(--bp-border-02);
+  --notification-shadow:var(--dropshadow-3);
+  --notification-background-info:var(--bp-light-blue-opacity-04);
+  --notification-background-success:var(--bp-green-light-opacity-04);
+  --notification-background-warning:var(--bp-yellow-opacity-04);
+  --notification-background-error:var(--bp-watermelon-red-opacity-04);
+  --notification-background-overlay:var(--bp-white-opacity-90);
+  --notification-background-blur:16px;
+  --notification-border-color-info:var(--bp-light-blue-opacity-30);
+  --notification-border-color-success:var(--bp-green-light-opacity-30);
+  --notification-border-color-warning:var(--bp-yellow-opacity-30);
+  --notification-border-color-error:var(--bp-watermelon-red-opacity-30);
+  --notification-outline-focus:var(--bp-outline-focus-on-light);
+  --notification-text-color:var(--bp-text-text-on-light);
+  --notification-text-container-height:var(--bp-space-080);
+  --notification-icon-size:var(--bp-size-080);
+}
+.bp_notification_module_root--bc071[data-modern=true].bp_notification_module_info--bc071{
+  background:linear-gradient(0deg, var(--notification-background-info) 0, var(--notification-background-info) 100%), var(--notification-background-overlay);
+}
+.bp_notification_module_root--bc071[data-modern=true].bp_notification_module_success--bc071{
+  background:linear-gradient(0deg, var(--notification-background-success) 0, var(--notification-background-success) 100%), var(--notification-background-overlay);
+}
+.bp_notification_module_root--bc071[data-modern=true].bp_notification_module_warning--bc071{
+  background:linear-gradient(0deg, var(--notification-background-warning) 0, var(--notification-background-warning) 100%), var(--notification-background-overlay);
+}
+.bp_notification_module_root--bc071[data-modern=true].bp_notification_module_error--bc071{
+  background:linear-gradient(0deg, var(--notification-background-error) 0, var(--notification-background-error) 100%), var(--notification-background-overlay);
+}
+
+.bp_notification_module_root--bc071{
+  backdrop-filter:blur(var(--notification-background-blur));
+  border:var(--notification-border) solid;
+  border-radius:var(--notification-radius);
+  box-shadow:var(--notification-shadow);
   display:flex;
   max-width:288px;
   width:max-content;
 }
 @media (width > 374px){
-  .bp_notification_module_root--0bfb0{
+  .bp_notification_module_root--bc071{
     max-width:343px;
   }
 }
 @media (width > 767px){
-  .bp_notification_module_root--0bfb0{
+  .bp_notification_module_root--bc071{
     max-width:728px;
   }
 }
 @media (width > 1023px){
-  .bp_notification_module_root--0bfb0{
+  .bp_notification_module_root--bc071{
     max-width:848px;
   }
 }
 @media (width > 1219px){
-  .bp_notification_module_root--0bfb0{
+  .bp_notification_module_root--bc071{
     max-width:896px;
   }
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_container--0bfb0{
+.bp_notification_module_root--bc071 .bp_notification_module_container--bc071{
   align-items:flex-start;
-  box-shadow:var(--dropshadow-3);
   display:flex;
-  gap:var(--space-3);
-  padding:var(--space-3) 0;
+  gap:var(--notification-item-spacing);
+  padding:var(--notification-padding-vertical) 0;
   width:100%;
 }
 @media (width > 767px){
-  .bp_notification_module_root--0bfb0 .bp_notification_module_container--0bfb0{
+  .bp_notification_module_root--bc071 .bp_notification_module_container--bc071{
     align-items:center;
   }
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_mobileContainer--0bfb0{
+.bp_notification_module_root--bc071 .bp_notification_module_mobileContainer--bc071{
   align-items:left;
   display:flex;
   flex-direction:column;
@@ -5411,88 +5470,89 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   width:100%;
 }
 @media (width > 767px){
-  .bp_notification_module_root--0bfb0 .bp_notification_module_mobileContainer--0bfb0{
+  .bp_notification_module_root--bc071 .bp_notification_module_mobileContainer--bc071{
     align-items:center;
     flex-direction:row;
   }
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_withButtons--0bfb0{
-  gap:var(--space-3);
+.bp_notification_module_root--bc071 .bp_notification_module_withButtons--bc071{
+  gap:var(--notification-item-spacing);
 }
-.bp_notification_module_root--0bfb0.bp_notification_module_info--0bfb0{
-  background:var(--surface-message-surface-info);
-  border-color:var(--border-message-border-info);
+.bp_notification_module_root--bc071.bp_notification_module_info--bc071{
+  background:var(--notification-background-info);
+  border-color:var(--notification-border-color-info);
 }
-.bp_notification_module_root--0bfb0.bp_notification_module_success--0bfb0{
-  background:var(--surface-message-surface-success);
-  border-color:var(--border-message-border-success);
+.bp_notification_module_root--bc071.bp_notification_module_success--bc071{
+  background:var(--notification-background-success);
+  border-color:var(--notification-border-color-success);
 }
-.bp_notification_module_root--0bfb0.bp_notification_module_warning--0bfb0{
-  background:var(--surface-message-surface-warning);
-  border-color:var(--border-message-border-warning);
+.bp_notification_module_root--bc071.bp_notification_module_warning--bc071{
+  background:var(--notification-background-warning);
+  border-color:var(--notification-border-color-warning);
 }
-.bp_notification_module_root--0bfb0.bp_notification_module_error--0bfb0{
-  background:var(--surface-message-surface-error);
-  border-color:var(--border-message-border-error);
+.bp_notification_module_root--bc071.bp_notification_module_error--bc071{
+  background:var(--notification-background-error);
+  border-color:var(--notification-border-color-error);
 }
-.bp_notification_module_root--0bfb0:focus-visible{
-  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
+.bp_notification_module_root--bc071:focus-visible{
+  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--notification-outline-focus);
   outline:none;
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_typeIconContainer--0bfb0{
+.bp_notification_module_root--bc071 .bp_notification_module_typeIconContainer--bc071{
   align-items:center;
   display:flex;
-  height:var(--size-8);
+  height:var(--notification-icon-size);
   justify-content:center;
-  width:var(--size-8);
+  width:var(--notification-icon-size);
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_typeIconContainer--0bfb0 .bp_notification_module_typeIcon--0bfb0{
+.bp_notification_module_root--bc071 .bp_notification_module_typeIconContainer--bc071 .bp_notification_module_typeIcon--bc071{
   flex-shrink:0;
-  margin-left:var(--space-4);
+  margin-left:var(--notification-padding-horizontal);
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_text--0bfb0{
+.bp_notification_module_root--bc071 .bp_notification_module_text--bc071{
   align-items:center;
-  color:var(--text-text-on-light);
+  color:var(--notification-text-color);
   display:flex;
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
   font-weight:var(--body-default-bold-font-weight);
-  gap:var(--space-3);
+  gap:var(--notification-item-spacing);
   letter-spacing:var(--body-default-bold-letter-spacing);
   line-height:var(--body-default-bold-line-height);
+  min-height:var(--notification-text-container-height);
   overflow:hidden;
   -webkit-text-decoration:var(--body-default-bold-text-decoration);
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_text--0bfb0 > div{
+.bp_notification_module_root--bc071 .bp_notification_module_text--bc071 > div{
   overflow:hidden;
   overflow-wrap:break-word;
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_contentButtonSection--0bfb0{
+.bp_notification_module_root--bc071 .bp_notification_module_contentButtonSection--bc071{
   display:flex;
-  gap:var(--space-3);
+  gap:var(--notification-item-spacing);
   margin-left:0;
 }
 @media (width > 767px){
-  .bp_notification_module_root--0bfb0 .bp_notification_module_contentButtonSection--0bfb0{
+  .bp_notification_module_root--bc071 .bp_notification_module_contentButtonSection--bc071{
     margin-left:auto;
   }
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_contentButtonSection--0bfb0 .bp_notification_module_contentButtons--0bfb0{
+.bp_notification_module_root--bc071 .bp_notification_module_contentButtonSection--bc071 .bp_notification_module_contentButtons--bc071{
   display:flex;
-  gap:var(--space-3);
+  gap:var(--notification-item-spacing);
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_closeButtonSection--0bfb0{
+.bp_notification_module_root--bc071 .bp_notification_module_closeButtonSection--bc071{
   display:flex;
-  gap:var(--space-3);
+  gap:var(--notification-item-spacing);
   margin-left:auto;
-  margin-right:var(--space-4);
+  margin-right:var(--notification-padding-horizontal);
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_closeButtonSection--0bfb0 .bp_notification_module_closeButton--0bfb0{
+.bp_notification_module_root--bc071 .bp_notification_module_closeButtonSection--bc071 .bp_notification_module_closeButton--bc071{
   align-self:center;
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_closeButtonSection--0bfb0 .bp_notification_module_closeButton--0bfb0 svg *{
+.bp_notification_module_root--bc071 .bp_notification_module_closeButtonSection--bc071 .bp_notification_module_closeButton--bc071 svg *{
   fill:currentColor;
 }
 

package/dist/lib-esm/primitives/notification/notification.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"viewport":"bp_notification_module_viewport--0bfb0","root":"bp_notification_module_root--0bfb0","container":"bp_notification_module_container--0bfb0","mobileContainer":"bp_notification_module_mobileContainer--0bfb0","withButtons":"bp_notification_module_withButtons--0bfb0","info":"bp_notification_module_info--0bfb0","success":"bp_notification_module_success--0bfb0","warning":"bp_notification_module_warning--0bfb0","error":"bp_notification_module_error--0bfb0","typeIconContainer":"bp_notification_module_typeIconContainer--0bfb0","typeIcon":"bp_notification_module_typeIcon--0bfb0","text":"bp_notification_module_text--0bfb0","contentButtonSection":"bp_notification_module_contentButtonSection--0bfb0","contentButtons":"bp_notification_module_contentButtons--0bfb0","closeButtonSection":"bp_notification_module_closeButtonSection--0bfb0","closeButton":"bp_notification_module_closeButton--0bfb0"};
+var styles = {"viewport":"bp_notification_module_viewport--bc071","root":"bp_notification_module_root--bc071","info":"bp_notification_module_info--bc071","success":"bp_notification_module_success--bc071","warning":"bp_notification_module_warning--bc071","error":"bp_notification_module_error--bc071","container":"bp_notification_module_container--bc071","mobileContainer":"bp_notification_module_mobileContainer--bc071","withButtons":"bp_notification_module_withButtons--bc071","typeIconContainer":"bp_notification_module_typeIconContainer--bc071","typeIcon":"bp_notification_module_typeIcon--bc071","text":"bp_notification_module_text--bc071","contentButtonSection":"bp_notification_module_contentButtonSection--bc071","contentButtons":"bp_notification_module_contentButtons--bc071","closeButtonSection":"bp_notification_module_closeButtonSection--bc071","closeButton":"bp_notification_module_closeButton--bc071"};
 
 export { styles as default };

package/dist/lib-esm/primitives/notification/private-notification-element.js

@@ -5,6 +5,7 @@ import { Size5 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as Toast from '@radix-ui/react-toast';
 import clsx from 'clsx';
 import { useMemo } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { IconButton } from '../icon-button/icon-button.js';
 import styles from './notification.module.js';
 
@@ -56,9 +57,13 @@ function PrivateNotificationElement(props) {
     ...rest
   } = props;
   const iconComponent = useMemo(() => getIcon(typeIconAriaLabel, variant), [typeIconAriaLabel, variant]);
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx(Toast.Root, {
     ...rest,
     className: clsx(styles.root, styles[variant]),
+    "data-modern": enableModernizedComponents,
     onOpenChange: onClose,
     open: open,
     type: sensitivity,

package/package.json

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