@box/blueprint-web 12.64.4 → 12.65.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/lib-esm/icon-toggle-button/icon-toggle-button.d.ts +1 -0
  2. package/dist/lib-esm/icon-toggle-button/icon-toggle-button.js +9 -4
  3. package/dist/lib-esm/icon-toggle-button/icon-toggle-button.module.js +1 -1
  4. package/dist/lib-esm/index.css +18 -18
  5. package/package.json +1 -1
package/dist/lib-esm/icon-toggle-button/icon-toggle-button.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  import { type IconToggleButtonProps } from './types';
2
2
  export declare const iconSizeMap: Record<NonNullable<IconToggleButtonProps['size']>, string>;
3
+ export declare const iconSizeMapModern: Record<NonNullable<IconToggleButtonProps['size']>, string>;
3
4
  export declare const IconToggleButton: import("react").ForwardRefExoticComponent<Omit<IconToggleButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
package/dist/lib-esm/icon-toggle-button/icon-toggle-button.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import { Size4, Size5, Size6 } from '@box/blueprint-web-assets/tokens/tokens';
2
+ import { Size4, Size5, Size6, bpSize040, bpSize050, bpSize060 } from '@box/blueprint-web-assets/tokens/tokens';
3
3
  import clsx from 'clsx';
4
4
  import { forwardRef, createElement } from 'react';
5
5
  import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
@@ -11,6 +11,11 @@ const iconSizeMap = {
11
11
  small: Size5,
12
12
  medium: Size6
13
13
  };
14
+ const iconSizeMapModern = {
15
+ 'x-small': bpSize040,
16
+ small: bpSize050,
17
+ medium: bpSize060
18
+ };
14
19
  const IconToggleButton = /*#__PURE__*/forwardRef(({
15
20
  className,
16
21
  icon,
@@ -28,12 +33,12 @@ const IconToggleButton = /*#__PURE__*/forwardRef(({
28
33
  "data-modern": enableModernizedComponents,
29
34
  children: /*#__PURE__*/createElement(icon, {
30
35
  className: styles.icon,
31
- height: iconSizeMap[size],
32
- width: iconSizeMap[size],
36
+ height: enableModernizedComponents ? iconSizeMapModern[size] : iconSizeMap[size],
37
+ width: enableModernizedComponents ? iconSizeMapModern[size] : iconSizeMap[size],
33
38
  role: 'presentation'
34
39
  })
35
40
  });
36
41
  });
37
42
  IconToggleButton.displayName = 'IconToggleButton';
38
43
 
39
- export { IconToggleButton, iconSizeMap };
44
+ export { IconToggleButton, iconSizeMap, iconSizeMapModern };
package/dist/lib-esm/icon-toggle-button/icon-toggle-button.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- 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"};
2
+ var styles = {"iconToggleButton":"bp_icon_toggle_button_module_iconToggleButton--d9aab","high-contrast":"bp_icon_toggle_button_module_high-contrast--d9aab","icon":"bp_icon_toggle_button_module_icon--d9aab","default":"bp_icon_toggle_button_module_default--d9aab","medium":"bp_icon_toggle_button_module_medium--d9aab","small":"bp_icon_toggle_button_module_small--d9aab","x-small":"bp_icon_toggle_button_module_x-small--d9aab"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/index.css CHANGED
@@ -5768,7 +5768,7 @@
5768
5768
  height:var(--icon-dual-state-button-small-size);
5769
5769
  width:var(--icon-dual-state-button-small-size);
5770
5770
  }
5771
- .bp_icon_toggle_button_module_iconToggleButton--afa02[data-modern=false]{
5771
+ .bp_icon_toggle_button_module_iconToggleButton--d9aab[data-modern=false]{
5772
5772
  --icon-toggle-button-radius:var(--radius-2);
5773
5773
  --icon-toggle-button-padding-inline:0;
5774
5774
  --icon-toggle-button-off-color:var(--text-text-on-light);
@@ -5791,7 +5791,7 @@
5791
5791
  --icon-toogle-button-medium-size:var(--size-10);
5792
5792
  }
5793
5793
 
5794
- .bp_icon_toggle_button_module_iconToggleButton--afa02[data-modern=true]{
5794
+ .bp_icon_toggle_button_module_iconToggleButton--d9aab[data-modern=true]{
5795
5795
  --icon-toggle-button-radius:var(--bp-radius-10);
5796
5796
  --icon-toggle-button-padding-inline:0;
5797
5797
  --icon-toggle-button-off-color:var(--bp-text-text-on-light);
@@ -5805,7 +5805,7 @@
5805
5805
  --icon-toggle-button-on-background-hover:var(--bp-surface-toggle-surface-on-hover);
5806
5806
  --icon-toggle-button-on-background-pressed:var(--bp-surface-toggle-surface-on-pressed);
5807
5807
  --icon-toggle-button-on-border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
5808
- --icon-toggle-button-on-border-focus:var(--bp-border-01) solid #fff;
5808
+ --icon-toggle-button-on-border-focus:var(--bp-border-01) solid var(--bp-border-toggle-border-off);
5809
5809
  --icon-toggle-button-on-color:var(--bp-text-text-on-dark);
5810
5810
  --icon-toggle-button-on-icon-color:var(--bp-icon-icon-blue);
5811
5811
  --icon-toggle-button-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
@@ -5814,7 +5814,7 @@
5814
5814
  --icon-toogle-button-medium-size:var(--bp-size-100);
5815
5815
  }
5816
5816
 
5817
- .bp_icon_toggle_button_module_iconToggleButton--afa02{
5817
+ .bp_icon_toggle_button_module_iconToggleButton--d9aab{
5818
5818
  align-items:center;
5819
5819
  background:var(--icon-toggle-button-off-background);
5820
5820
  border:var(--icon-toggle-button-off-border);
@@ -5834,52 +5834,52 @@
5834
5834
  text-decoration:var(--body-default-text-decoration);
5835
5835
  text-transform:var(--body-default-text-case);
5836
5836
  }
5837
- .bp_icon_toggle_button_module_iconToggleButton--afa02:disabled{
5837
+ .bp_icon_toggle_button_module_iconToggleButton--d9aab:disabled{
5838
5838
  opacity:.3;
5839
5839
  pointer-events:none;
5840
5840
  }
5841
- .bp_icon_toggle_button_module_iconToggleButton--afa02:hover{
5841
+ .bp_icon_toggle_button_module_iconToggleButton--d9aab:hover{
5842
5842
  background-color:var(--icon-toggle-button-off-background-hover);
5843
5843
  }
5844
- .bp_icon_toggle_button_module_iconToggleButton--afa02[data-focus-visible]{
5844
+ .bp_icon_toggle_button_module_iconToggleButton--d9aab[data-focus-visible]{
5845
5845
  outline:var(--icon-toggle-button-focus-outline);
5846
5846
  }
5847
- .bp_icon_toggle_button_module_iconToggleButton--afa02:active{
5847
+ .bp_icon_toggle_button_module_iconToggleButton--d9aab:active{
5848
5848
  background-color:var(--icon-toggle-button-off-background-pressed);
5849
5849
  }
5850
- .bp_icon_toggle_button_module_iconToggleButton--afa02.bp_icon_toggle_button_module_high-contrast--afa02 .bp_icon_toggle_button_module_icon--afa02 *{
5850
+ .bp_icon_toggle_button_module_iconToggleButton--d9aab.bp_icon_toggle_button_module_high-contrast--d9aab .bp_icon_toggle_button_module_icon--d9aab *{
5851
5851
  fill:var(--icon-toggle-button-off-icon-color-high-contrast);
5852
5852
  }
5853
- .bp_icon_toggle_button_module_iconToggleButton--afa02.bp_icon_toggle_button_module_default--afa02 .bp_icon_toggle_button_module_icon--afa02 *{
5853
+ .bp_icon_toggle_button_module_iconToggleButton--d9aab.bp_icon_toggle_button_module_default--d9aab .bp_icon_toggle_button_module_icon--d9aab *{
5854
5854
  fill:var(--icon-toggle-button-off-icon-color);
5855
5855
  }
5856
- .bp_icon_toggle_button_module_iconToggleButton--afa02[aria-pressed=true]{
5856
+ .bp_icon_toggle_button_module_iconToggleButton--d9aab[aria-pressed=true]{
5857
5857
  background:var(--icon-toggle-button-on-background);
5858
5858
  border:var(--icon-toggle-button-on-border);
5859
5859
  color:var(--icon-toggle-button-on-color);
5860
5860
  }
5861
- .bp_icon_toggle_button_module_iconToggleButton--afa02[aria-pressed=true] .bp_icon_toggle_button_module_icon--afa02 *{
5861
+ .bp_icon_toggle_button_module_iconToggleButton--d9aab[aria-pressed=true] .bp_icon_toggle_button_module_icon--d9aab *{
5862
5862
  fill:var(--icon-toggle-button-on-icon-color);
5863
5863
  }
5864
- .bp_icon_toggle_button_module_iconToggleButton--afa02[aria-pressed=true]:hover{
5864
+ .bp_icon_toggle_button_module_iconToggleButton--d9aab[aria-pressed=true]:hover{
5865
5865
  background-color:var(--icon-toggle-button-on-background-hover);
5866
5866
  }
5867
- .bp_icon_toggle_button_module_iconToggleButton--afa02[aria-pressed=true][data-focus-visible]{
5867
+ .bp_icon_toggle_button_module_iconToggleButton--d9aab[aria-pressed=true][data-focus-visible]{
5868
5868
  border:var(--icon-toggle-button-on-border-focus);
5869
5869
  outline:var(--icon-toggle-button-focus-outline);
5870
5870
  }
5871
- .bp_icon_toggle_button_module_iconToggleButton--afa02[aria-pressed=true]:active{
5871
+ .bp_icon_toggle_button_module_iconToggleButton--d9aab[aria-pressed=true]:active{
5872
5872
  background-color:var(--icon-toggle-button-on-background-pressed);
5873
5873
  }
5874
- .bp_icon_toggle_button_module_iconToggleButton--afa02.bp_icon_toggle_button_module_medium--afa02{
5874
+ .bp_icon_toggle_button_module_iconToggleButton--d9aab.bp_icon_toggle_button_module_medium--d9aab{
5875
5875
  height:var(--icon-toogle-button-medium-size);
5876
5876
  width:var(--icon-toogle-button-medium-size);
5877
5877
  }
5878
- .bp_icon_toggle_button_module_iconToggleButton--afa02.bp_icon_toggle_button_module_small--afa02{
5878
+ .bp_icon_toggle_button_module_iconToggleButton--d9aab.bp_icon_toggle_button_module_small--d9aab{
5879
5879
  height:var(--icon-toogle-button-small-size);
5880
5880
  width:var(--icon-toogle-button-small-size);
5881
5881
  }
5882
- .bp_icon_toggle_button_module_iconToggleButton--afa02.bp_icon_toggle_button_module_x-small--afa02{
5882
+ .bp_icon_toggle_button_module_iconToggleButton--d9aab.bp_icon_toggle_button_module_x-small--d9aab{
5883
5883
  height:var(--icon-toogle-button-xsmall-size);
5884
5884
  width:var(--icon-toogle-button-xsmall-size);
5885
5885
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "12.64.4",
3
+ "version": "12.65.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {