@box/blueprint-web 12.41.0 → 12.42.0

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"card":"bp_card_module_card--6d119","dropshadow-1":"bp_card_module_dropshadow-1--6d119","dropshadow-3":"bp_card_module_dropshadow-3--6d119"};
+var styles = {"card":"bp_card_module_card--ce148","dropshadow-1":"bp_card_module_dropshadow-1--ce148","dropshadow-3":"bp_card_module_dropshadow-3--ce148"};
 
 export { styles as default };

package/dist/lib-esm/index.css

@@ -1251,7 +1251,7 @@
 .bp_button_wrapper_module_buttonWrapper--b0897{
   all:unset;
 }
-.bp_card_module_card--6d119[data-modern=true]{
+.bp_card_module_card--ce148[data-modern=true]{
   --bp-card-dropshadow-1:var(--dropshadow-1);
   --bp-card-dropshadow-3:var(--dropshadow-3);
   --card-radius:var(--bp-radius-10);
@@ -1262,25 +1262,27 @@
   --card-dropshadow-3:var(--bp-card-dropshadow-3);
 }
 
-.bp_card_module_card--6d119[data-modern=false]{
+.bp_card_module_card--ce148[data-modern=false]{
   --card-padding:var(--space-4);
   --card-background:var(--surface-card-surface);
   --card-border:var(--border-1) solid var(--border-card-border);
   --card-radius:var(--radius-4);
   --card-dropshadow-1:var(--dropshadow-1);
   --card-dropshadow-3:var(--dropshadow-3);
+  --card-backdrop-filter:blur(16px);
 }
 
-.bp_card_module_card--6d119{
+.bp_card_module_card--ce148{
+  backdrop-filter:var(--card-backdrop-filter);
   background:var(--card-background);
   border:var(--card-border);
   border-radius:var(--card-radius);
   padding:var(--card-padding);
 }
-.bp_card_module_card--6d119.bp_card_module_dropshadow-1--6d119{
+.bp_card_module_card--ce148.bp_card_module_dropshadow-1--ce148{
   box-shadow:var(--card-dropshadow-1);
 }
-.bp_card_module_card--6d119.bp_card_module_dropshadow-3--6d119{
+.bp_card_module_card--ce148.bp_card_module_dropshadow-3--ce148{
   box-shadow:var(--card-dropshadow-3);
 }
 
@@ -7868,20 +7870,64 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
 .bp_text_input_module_loadingIndicatorReset--53592 div{
   position:static;
 }
-.bp_text_toggle_button_module_textToggleButton--a97ea{
-  background:var(--surface-toggle-surface);
-  border:var(--border-1) solid var(--border-toggletext-border-off);
-  border-radius:var(--radius-2);
-  color:var(--text-toggletext-text);
+.bp_text_toggle_button_module_textToggleButton--b6cea[data-modern=false]{
+  --text-toggle-button-min-height:var(--size-8);
+  --text-toggle-button-padding-inline:var(--space-2);
+  --text-toggle-button-color-on:var(--text-toggletext-text);
+  --text-toggle-button-color-off:var(--text-toggletext-text);
+  --text-toggle-button-background:var(--surface-toggle-surface);
+  --text-toggle-button-border-width:var(--border-1);
+  --text-toggle-button-border-color-off:var(--border-toggletext-border-off);
+  --text-toggle-button-border-radius:var(--radius-2);
+  --text-toggle-button-focus-outline:var(--outline-focus-on-light);
+  --text-toggle-button-background-off-hover:var(--surface-toggle-surface-off-hover);
+  --text-toggle-button-border-color-off-hover:var(--border-toggletext-border-off-hover);
+  --text-toggle-button-background-off-pressed:var(--surface-toggle-surface-off-pressed);
+  --text-toggle-button-border-color-off-pressed:var(--border-toggletext-border-off-pressed);
+  --text-toggle-button-background-on:var(--surface-toggletext-surface-on);
+  --text-toggle-button-border-color-on:var(--border-toggletext-border-on);
+  --text-toggle-button-background-on-hover:var(--surface-toggletext-surface-on-hover);
+  --text-toggle-button-border-color-on-hover:var(--border-toggletext-border-on-hover);
+  --text-toggle-button-background-on-pressed:var(--surface-toggletext-surface-on-pressed);
+  --text-toggle-button-border-color-on-pressed:var(--border-toggletext-border-on-pressed);
+}
+
+.bp_text_toggle_button_module_textToggleButton--b6cea[data-modern=true]{
+  --text-toggle-button-min-height:var(--bp-size-080);
+  --text-toggle-button-padding-inline:var(--bp-space-020);
+  --text-toggle-button-color-on:var(--bp-text-toggle-text-text);
+  --text-toggle-button-color-off:var(--bp-text-text-on-light);
+  --text-toggle-button-background:var(--bp-surface-toggle-surface);
+  --text-toggle-button-border-width:var(--bp-border-01);
+  --text-toggle-button-border-color-off:var(--bp-border-toggle-text-border-off);
+  --text-toggle-button-border-radius:var(--bp-radius-10);
+  --text-toggle-button-focus-outline:var(--bp-outline-focus-on-light);
+  --text-toggle-button-background-off-hover:var(--bp-surface-toggle-text-surface-off-hover);
+  --text-toggle-button-border-color-off-hover:var(--bp-border-toggle-text-border-off-hover);
+  --text-toggle-button-background-off-pressed:var(--bp-surface-toggle-text-surface-off-pressed);
+  --text-toggle-button-border-color-off-pressed:var(--bp-border-toggle-text-border-off-pressed);
+  --text-toggle-button-background-on:var(--bp-surface-toggle-text-surface-on);
+  --text-toggle-button-border-color-on:var(--bp-border-toggle-text-border-on);
+  --text-toggle-button-background-on-hover:var(--bp-surface-toggle-text-surface-on-hover);
+  --text-toggle-button-border-color-on-hover:var(--bp-border-toggle-text-border-on-hover);
+  --text-toggle-button-background-on-pressed:var(--bp-surface-toggle-text-surface-on-pressed);
+  --text-toggle-button-border-color-on-pressed:var(--bp-border-toggle-text-border-on-pressed);
+}
+
+.bp_text_toggle_button_module_textToggleButton--b6cea{
+  background:var(--text-toggle-button-background);
+  border:var(--text-toggle-button-border-width) solid var(--text-toggle-button-border-color-off);
+  border-radius:var(--text-toggle-button-border-radius);
+  color:var(--text-toggle-button-color-off);
   cursor:pointer;
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
   letter-spacing:var(--body-default-letter-spacing);
   line-height:var(--body-default-line-height);
-  min-height:var(--size-8);
+  min-height:var(--text-toggle-button-min-height);
   outline:0;
-  padding-inline:var(--space-2);
+  padding-inline:var(--text-toggle-button-padding-inline);
   -webkit-text-decoration:var(--body-default-text-decoration);
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
@@ -7889,35 +7935,36 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
           user-select:none;
   white-space:nowrap;
 }
-.bp_text_toggle_button_module_textToggleButton--a97ea:disabled,.bp_text_toggle_button_module_textToggleButton--a97ea[aria-disabled]{
+.bp_text_toggle_button_module_textToggleButton--b6cea:disabled,.bp_text_toggle_button_module_textToggleButton--b6cea[aria-disabled]{
   opacity:.3;
   pointer-events:none;
 }
-.bp_text_toggle_button_module_textToggleButton--a97ea:hover{
-  background:var(--surface-toggle-surface-off-hover);
-  border-color:var(--border-toggletext-border-off-hover);
+.bp_text_toggle_button_module_textToggleButton--b6cea:hover{
+  background:var(--text-toggle-button-background-off-hover);
+  border-color:var(--text-toggle-button-border-color-off-hover);
 }
-.bp_text_toggle_button_module_textToggleButton--a97ea:focus,.bp_text_toggle_button_module_textToggleButton--a97ea[data-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_text_toggle_button_module_textToggleButton--b6cea:focus,.bp_text_toggle_button_module_textToggleButton--b6cea[data-focus-visible]{
+  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--text-toggle-button-focus-outline);
 }
-.bp_text_toggle_button_module_textToggleButton--a97ea:active,.bp_text_toggle_button_module_textToggleButton--a97ea[data-active]{
-  background:var(--surface-toggle-surface-off-pressed);
-  border-color:var(--border-toggletext-border-off-pressed);
+.bp_text_toggle_button_module_textToggleButton--b6cea:active,.bp_text_toggle_button_module_textToggleButton--b6cea[data-active]{
+  background:var(--text-toggle-button-background-off-pressed);
+  border-color:var(--text-toggle-button-border-color-off-pressed);
 }
-.bp_text_toggle_button_module_textToggleButton--a97ea[aria-pressed=true]{
-  background:var(--surface-toggletext-surface-on);
-  border:var(--border-1) solid var(--border-toggletext-border-on);
+.bp_text_toggle_button_module_textToggleButton--b6cea[aria-pressed=true]{
+  background:var(--text-toggle-button-background-on);
+  border:var(--text-toggle-button-border-width) solid var(--text-toggle-button-border-color-on);
+  color:var(--text-toggle-button-color-on);
 }
-.bp_text_toggle_button_module_textToggleButton--a97ea[aria-pressed=true]:hover{
-  background:var(--surface-toggletext-surface-on-hover);
-  border-color:var(--border-toggletext-border-on-hover);
+.bp_text_toggle_button_module_textToggleButton--b6cea[aria-pressed=true]:hover{
+  background:var(--text-toggle-button-background-on-hover);
+  border-color:var(--text-toggle-button-border-color-on-hover);
 }
-.bp_text_toggle_button_module_textToggleButton--a97ea[aria-pressed=true]:focus,.bp_text_toggle_button_module_textToggleButton--a97ea[aria-pressed=true][data-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_text_toggle_button_module_textToggleButton--b6cea[aria-pressed=true]:focus,.bp_text_toggle_button_module_textToggleButton--b6cea[aria-pressed=true][data-focus-visible]{
+  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--text-toggle-button-focus-outline);
 }
-.bp_text_toggle_button_module_textToggleButton--a97ea[aria-pressed=true]:active,.bp_text_toggle_button_module_textToggleButton--a97ea[aria-pressed=true][data-active]{
-  background:var(--surface-toggletext-surface-on-pressed);
-  border-color:var(--border-toggletext-border-on-pressed);
+.bp_text_toggle_button_module_textToggleButton--b6cea[aria-pressed=true]:active,.bp_text_toggle_button_module_textToggleButton--b6cea[aria-pressed=true][data-active]{
+  background:var(--text-toggle-button-background-on-pressed);
+  border-color:var(--text-toggle-button-border-color-on-pressed);
 }
 
 .bp_time_picker_module_timePicker--1cdb7{

package/dist/lib-esm/text-toggle-button/text-toggle-button.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { BaseToggleButton } from '../util-components/base-toggle-button/base-toggle-button.js';
 import styles from './text-toggle-button.module.js';
 
@@ -8,10 +9,14 @@ const TextToggleButton = /*#__PURE__*/forwardRef(({
   className,
   ...rest
 }, ref) => {
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx(BaseToggleButton, {
     ...rest,
     ref: ref,
-    className: clsx(styles.textToggleButton, className)
+    className: clsx(styles.textToggleButton, className),
+    "data-modern": enableModernizedComponents
   });
 });
 TextToggleButton.displayName = 'TextToggleButton';

package/dist/lib-esm/text-toggle-button/text-toggle-button.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"textToggleButton":"bp_text_toggle_button_module_textToggleButton--a97ea"};
+var styles = {"textToggleButton":"bp_text_toggle_button_module_textToggleButton--b6cea"};
 
 export { styles as default };

package/package.json

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