@box/blueprint-web 12.20.2 → 12.21.0

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

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { Size4, Size5, Size6 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { forwardRef, createElement } 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 './icon-toggle-button.module.js';
 
@@ -17,10 +18,14 @@ const IconToggleButton = /*#__PURE__*/forwardRef(({
   size = 'medium',
   ...rest
 }, ref) => {
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx(BaseToggleButton, {
     ...rest,
     ref: ref,
     className: clsx(styles.iconToggleButton, styles[variant], styles[size], className),
+    "data-modern": enableModernizedComponents,
     children: /*#__PURE__*/createElement(icon, {
       className: styles.icon,
       height: iconSizeMap[size],

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"iconToggleButton":"bp_icon_toggle_button_module_iconToggleButton--45e04","high-contrast":"bp_icon_toggle_button_module_high-contrast--45e04","icon":"bp_icon_toggle_button_module_icon--45e04","default":"bp_icon_toggle_button_module_default--45e04","medium":"bp_icon_toggle_button_module_medium--45e04","small":"bp_icon_toggle_button_module_small--45e04","x-small":"bp_icon_toggle_button_module_x-small--45e04"};
+var styles = {"iconToggleButton":"bp_icon_toggle_button_module_iconToggleButton--afa02","high-contrast":"bp_icon_toggle_button_module_high-contrast--afa02","icon":"bp_icon_toggle_button_module_icon--afa02","default":"bp_icon_toggle_button_module_default--afa02","medium":"bp_icon_toggle_button_module_medium--afa02","small":"bp_icon_toggle_button_module_small--afa02","x-small":"bp_icon_toggle_button_module_x-small--afa02"};
 
 export { styles as default };

package/dist/lib-esm/index.css

@@ -4556,12 +4556,58 @@
   height:var(--size-8);
   width:var(--size-8);
 }
-.bp_icon_toggle_button_module_iconToggleButton--45e04{
+.bp_icon_toggle_button_module_iconToggleButton--afa02[data-modern=false]{
+  --icon-toggle-button-radius:var(--radius-2);
+  --icon-toggle-button-padding-inline:0;
+  --icon-toggle-button-off-color:var(--text-text-on-light);
+  --icon-toggle-button-off-background:#0000;
+  --icon-toggle-button-off-background-hover:var(--surface-toggle-surface-off-hover);
+  --icon-toggle-button-off-background-pressed:var(--surface-toggle-surface-off-pressed);
+  --icon-toggle-button-off-border:none;
+  --icon-toggle-button-off-icon-color:var(--icon-icon-on-light-secondary);
+  --icon-toggle-button-off-icon-color-high-contrast:var(--icon-icon-on-light);
+  --icon-toggle-button-on-background:var(--surface-toggle-surface-on);
+  --icon-toggle-button-on-background-hover:var(--surface-toggle-surface-on-hover);
+  --icon-toggle-button-on-background-pressed:var(--surface-toggle-surface-on-pressed);
+  --icon-toggle-button-on-border:var(--border-1) solid var(--border-toggle-border-on);
+  --icon-toggle-button-on-border-focus:var(--border-1) solid #fff;
+  --icon-toggle-button-on-color:var(--text-text-on-dark);
+  --icon-toggle-button-on-icon-color:var(--icon-icon-blue);
+  --icon-toggle-button-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
+  --icon-toogle-button-xsmall-size:var(--size-6);
+  --icon-toogle-button-small-size:var(--size-8);
+  --icon-toogle-button-medium-size:var(--size-10);
+}
+
+.bp_icon_toggle_button_module_iconToggleButton--afa02[data-modern=true]{
+  --icon-toggle-button-radius:var(--bp-radius-10);
+  --icon-toggle-button-padding-inline:0;
+  --icon-toggle-button-off-color:var(--bp-text-text-on-light);
+  --icon-toggle-button-off-background:var(--bp-surface-toggle-surface);
+  --icon-toggle-button-off-background-hover:var(--bp-surface-toggle-surface-off-hover);
+  --icon-toggle-button-off-background-pressed:var(--bp-surface-toggle-surface-off-pressed);
+  --icon-toggle-button-off-border:none;
+  --icon-toggle-button-off-icon-color:var(--bp-icon-icon-on-light-secondary);
+  --icon-toggle-button-off-icon-color-high-contrast:var(--bp-icon-icon-on-light);
+  --icon-toggle-button-on-background:var(--bp-surface-toggle-surface-on);
+  --icon-toggle-button-on-background-hover:var(--bp-surface-toggle-surface-on-hover);
+  --icon-toggle-button-on-background-pressed:var(--bp-surface-toggle-surface-on-pressed);
+  --icon-toggle-button-on-border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
+  --icon-toggle-button-on-border-focus:var(--bp-border-01) solid #fff;
+  --icon-toggle-button-on-color:var(--bp-text-text-on-dark);
+  --icon-toggle-button-on-icon-color:var(--bp-icon-icon-blue);
+  --icon-toggle-button-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
+  --icon-toogle-button-xsmall-size:var(--bp-size-060);
+  --icon-toogle-button-small-size:var(--bp-size-080);
+  --icon-toogle-button-medium-size:var(--bp-size-100);
+}
+
+.bp_icon_toggle_button_module_iconToggleButton--afa02{
   align-items:center;
-  background:#0000;
-  border:none;
-  border-radius:var(--radius-2);
-  color:var(--text-text-on-light);
+  background:var(--icon-toggle-button-off-background);
+  border:var(--icon-toggle-button-off-border);
+  border-radius:var(--icon-toggle-button-radius);
+  color:var(--icon-toggle-button-off-color);
   cursor:pointer;
   display:flex;
   font-family:var(--body-default-font-family);
@@ -4571,59 +4617,59 @@
   letter-spacing:var(--body-default-letter-spacing);
   line-height:var(--body-default-line-height);
   outline:0;
-  padding-inline:0;
+  padding-inline:var(--icon-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);
 }
-.bp_icon_toggle_button_module_iconToggleButton--45e04:disabled{
+.bp_icon_toggle_button_module_iconToggleButton--afa02:disabled{
   opacity:.3;
   pointer-events:none;
 }
-.bp_icon_toggle_button_module_iconToggleButton--45e04:hover{
-  background-color:var(--surface-toggle-surface-off-hover);
+.bp_icon_toggle_button_module_iconToggleButton--afa02:hover{
+  background-color:var(--icon-toggle-button-off-background-hover);
 }
-.bp_icon_toggle_button_module_iconToggleButton--45e04[data-focus-visible]{
-  outline:var(--border-2) solid var(--outline-focus-on-light);
+.bp_icon_toggle_button_module_iconToggleButton--afa02[data-focus-visible]{
+  outline:var(--icon-toggle-button-focus-outline);
 }
-.bp_icon_toggle_button_module_iconToggleButton--45e04:active{
-  background-color:var(--surface-toggle-surface-off-pressed);
+.bp_icon_toggle_button_module_iconToggleButton--afa02:active{
+  background-color:var(--icon-toggle-button-off-background-pressed);
 }
-.bp_icon_toggle_button_module_iconToggleButton--45e04.bp_icon_toggle_button_module_high-contrast--45e04 .bp_icon_toggle_button_module_icon--45e04 *{
-  fill:var(--icon-icon-on-light);
+.bp_icon_toggle_button_module_iconToggleButton--afa02.bp_icon_toggle_button_module_high-contrast--afa02 .bp_icon_toggle_button_module_icon--afa02 *{
+  fill:var(--icon-toggle-button-off-icon-color-high-contrast);
 }
-.bp_icon_toggle_button_module_iconToggleButton--45e04.bp_icon_toggle_button_module_default--45e04 .bp_icon_toggle_button_module_icon--45e04 *{
-  fill:var(--icon-icon-on-light-secondary);
+.bp_icon_toggle_button_module_iconToggleButton--afa02.bp_icon_toggle_button_module_default--afa02 .bp_icon_toggle_button_module_icon--afa02 *{
+  fill:var(--icon-toggle-button-off-icon-color);
 }
-.bp_icon_toggle_button_module_iconToggleButton--45e04[aria-pressed=true]{
-  background:var(--surface-toggle-surface-on);
-  border:var(--border-1) solid var(--border-toggle-border-on);
-  color:var(--text-text-on-dark);
+.bp_icon_toggle_button_module_iconToggleButton--afa02[aria-pressed=true]{
+  background:var(--icon-toggle-button-on-background);
+  border:var(--icon-toggle-button-on-border);
+  color:var(--icon-toggle-button-on-color);
 }
-.bp_icon_toggle_button_module_iconToggleButton--45e04[aria-pressed=true] .bp_icon_toggle_button_module_icon--45e04 *{
-  fill:var(--icon-icon-blue);
+.bp_icon_toggle_button_module_iconToggleButton--afa02[aria-pressed=true] .bp_icon_toggle_button_module_icon--afa02 *{
+  fill:var(--icon-toggle-button-on-icon-color);
 }
-.bp_icon_toggle_button_module_iconToggleButton--45e04[aria-pressed=true]:hover{
-  background-color:var(--surface-toggle-surface-on-hover);
+.bp_icon_toggle_button_module_iconToggleButton--afa02[aria-pressed=true]:hover{
+  background-color:var(--icon-toggle-button-on-background-hover);
 }
-.bp_icon_toggle_button_module_iconToggleButton--45e04[aria-pressed=true][data-focus-visible]{
-  border:var(--border-1) solid #fff;
-  outline:var(--border-2) solid var(--outline-focus-on-light);
+.bp_icon_toggle_button_module_iconToggleButton--afa02[aria-pressed=true][data-focus-visible]{
+  border:var(--icon-toggle-button-on-border-focus);
+  outline:var(--icon-toggle-button-focus-outline);
 }
-.bp_icon_toggle_button_module_iconToggleButton--45e04[aria-pressed=true]:active{
-  background-color:var(--surface-toggle-surface-on-pressed);
+.bp_icon_toggle_button_module_iconToggleButton--afa02[aria-pressed=true]:active{
+  background-color:var(--icon-toggle-button-on-background-pressed);
 }
-.bp_icon_toggle_button_module_iconToggleButton--45e04.bp_icon_toggle_button_module_medium--45e04{
-  height:var(--size-10);
-  width:var(--size-10);
+.bp_icon_toggle_button_module_iconToggleButton--afa02.bp_icon_toggle_button_module_medium--afa02{
+  height:var(--icon-toogle-button-medium-size);
+  width:var(--icon-toogle-button-medium-size);
 }
-.bp_icon_toggle_button_module_iconToggleButton--45e04.bp_icon_toggle_button_module_small--45e04{
-  height:var(--size-8);
-  width:var(--size-8);
+.bp_icon_toggle_button_module_iconToggleButton--afa02.bp_icon_toggle_button_module_small--afa02{
+  height:var(--icon-toogle-button-small-size);
+  width:var(--icon-toogle-button-small-size);
 }
-.bp_icon_toggle_button_module_iconToggleButton--45e04.bp_icon_toggle_button_module_x-small--45e04{
-  height:var(--size-6);
-  width:var(--size-6);
+.bp_icon_toggle_button_module_iconToggleButton--afa02.bp_icon_toggle_button_module_x-small--afa02{
+  height:var(--icon-toogle-button-xsmall-size);
+  width:var(--icon-toogle-button-xsmall-size);
 }
 table.bp_inline_table_module_inlineTable--7cffa{
   background:var(--gray-white);

package/package.json

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