@box/blueprint-web 12.21.0 → 12.22.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 (4) hide show
  1. package/dist/lib-esm/icon-dual-state-button/icon-dual-state-button.js +5 -0
  2. package/dist/lib-esm/icon-dual-state-button/icon-dual-state-button.module.js +1 -1
  3. package/dist/lib-esm/index.css +72 -36
  4. package/package.json +1 -1
package/dist/lib-esm/icon-dual-state-button/icon-dual-state-button.js CHANGED
@@ -3,6 +3,7 @@ import { Button } from '@ariakit/react';
3
3
  import { IconIconBlue, IconIconOnLightSecondary, Size4, Size5, Size6 } from '@box/blueprint-web-assets/tokens/tokens';
4
4
  import clsx from 'clsx';
5
5
  import { forwardRef, createElement } from 'react';
6
+ import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
6
7
  import { composeEventHandlers } from '../utils/composeEventHandlers.js';
7
8
  import { useControllableState } from '../utils/useControllableState.js';
8
9
  import styles from './icon-dual-state-button.module.js';
@@ -36,6 +37,9 @@ const IconDualStateButton = /*#__PURE__*/forwardRef(({
36
37
  onChange: onPressedChange,
37
38
  defaultProp: defaultPressed
38
39
  });
40
+ const {
41
+ enableModernizedComponents
42
+ } = useBlueprintModernization();
39
43
  const iconSize = buttonSizeToIconSize[size];
40
44
  return jsx(Button, {
41
45
  ...rest,
@@ -45,6 +49,7 @@ const IconDualStateButton = /*#__PURE__*/forwardRef(({
45
49
  [styles.pressed]: pressed
46
50
  }),
47
51
  "data-disabled": disabled ? '' : undefined,
52
+ "data-modern": enableModernizedComponents,
48
53
  "data-state": pressed ? 'on' : 'off',
49
54
  disabled: disabled,
50
55
  onClick: composeEventHandlers(onClick, () => {
package/dist/lib-esm/icon-dual-state-button/icon-dual-state-button.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"iconDualStateButton":"bp_icon_dual_state_button_module_iconDualStateButton--462b9","pressed":"bp_icon_dual_state_button_module_pressed--462b9","xsmallButton":"bp_icon_dual_state_button_module_xsmallButton--462b9","smallButton":"bp_icon_dual_state_button_module_smallButton--462b9"};
2
+ var styles = {"iconDualStateButton":"bp_icon_dual_state_button_module_iconDualStateButton--ab460","pressed":"bp_icon_dual_state_button_module_pressed--ab460","xsmallButton":"bp_icon_dual_state_button_module_xsmallButton--ab460","smallButton":"bp_icon_dual_state_button_module_smallButton--ab460"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/index.css CHANGED
@@ -4490,71 +4490,107 @@
4490
4490
  margin-block-start:var(--space-5);
4491
4491
  width:100%;
4492
4492
  }
4493
- .bp_icon_dual_state_button_module_iconDualStateButton--462b9{
4493
+ .bp_icon_dual_state_button_module_iconDualStateButton--ab460[data-modern=false]{
4494
+ --icon-dual-state-button-medium-size:var(--size-10);
4495
+ --icon-dual-state-button-small-size:var(--size-8);
4496
+ --icon-dual-state-button-xsmall-size:var(--size-6);
4497
+ --icon-dual-state-button-padding:0;
4498
+ --icon-dual-state-button-radius:var(--radius-1);
4499
+ --icon-dual-state-button-off-background:#0000;
4500
+ --icon-dual-state-button-off-background-hover:var(--surface-toggle-surface-off-hover);
4501
+ --icon-dual-state-button-off-background-pressed:var(--surface-toggle-surface-off-pressed);
4502
+ --icon-dual-state-button-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
4503
+ --icon-dual-state-button-on-background:var(--surface-toggle-surface-on);
4504
+ --icon-dual-state-button-on-background-hover:var(--surface-toggle-surface-on-hover);
4505
+ --icon-dual-state-button-on-background-pressed:var(--surface-toggle-surface-on-pressed);
4506
+ --icon-dual-state-button-on-border:var(--border-1) solid var(--border-toggle-border-on);
4507
+ --icon-dual-state-button-on-border-focus:var(--border-1) solid #fff;
4508
+ --icon-dual-state-button-on-icon-color:var(--icon-icon-blue);
4509
+ }
4510
+
4511
+ .bp_icon_dual_state_button_module_iconDualStateButton--ab460[data-modern=true]{
4512
+ --icon-dual-state-button-medium-size:var(--bp-size-100);
4513
+ --icon-dual-state-button-small-size:var(--bp-size-080);
4514
+ --icon-dual-state-button-xsmall-size:var(--bp-size-060);
4515
+ --icon-dual-state-button-padding:0;
4516
+ --icon-dual-state-button-radius:var(--bp-radius-10);
4517
+ --icon-dual-state-button-off-background:#0000;
4518
+ --icon-dual-state-button-off-background-hover:var(--bp-surface-toggle-surface-off-hover);
4519
+ --icon-dual-state-button-off-background-pressed:var(--bp-surface-toggle-surface-off-pressed);
4520
+ --icon-dual-state-button-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
4521
+ --icon-dual-state-button-on-background:var(--bp-surface-toggle-surface-on);
4522
+ --icon-dual-state-button-on-background-hover:var(--bp-surface-toggle-surface-on-hover);
4523
+ --icon-dual-state-button-on-background-pressed:var(--bp-surface-toggle-surface-on-pressed);
4524
+ --icon-dual-state-button-on-border:var(--bp-border-01) solid var(--bp-border-toggletext-border-on);
4525
+ --icon-dual-state-button-on-border-focus:var(--bp-border-01) solid var(--bp-border-toggletext-border-off);
4526
+ --icon-dual-state-button-on-icon-color:var(--bp-icon-icon-blue);
4527
+ }
4528
+
4529
+ .bp_icon_dual_state_button_module_iconDualStateButton--ab460{
4494
4530
  align-items:center;
4495
- background-color:initial;
4496
- border-radius:var(--radius-1);
4531
+ background-color:var(--icon-dual-state-button-off-background);
4532
+ border-radius:var(--icon-dual-state-button-radius);
4497
4533
  border-style:none;
4498
4534
  cursor:pointer;
4499
4535
  display:flex;
4500
4536
  font-family:var(--body-default-font-family);
4501
4537
  font-size:var(--body-default-font-size);
4502
4538
  font-weight:var(--body-default-font-weight);
4503
- height:var(--size-10);
4539
+ height:var(--icon-dual-state-button-medium-size);
4504
4540
  justify-content:center;
4505
4541
  letter-spacing:var(--body-default-letter-spacing);
4506
4542
  line-height:var(--body-default-line-height);
4507
- padding:0;
4543
+ padding:var(--icon-dual-state-button-padding);
4508
4544
  -webkit-text-decoration:var(--body-default-text-decoration);
4509
4545
  text-decoration:var(--body-default-text-decoration);
4510
4546
  text-transform:var(--body-default-text-case);
4511
- width:var(--size-10);
4547
+ width:var(--icon-dual-state-button-medium-size);
4512
4548
  }
4513
- .bp_icon_dual_state_button_module_iconDualStateButton--462b9:disabled{
4549
+ .bp_icon_dual_state_button_module_iconDualStateButton--ab460:disabled{
4514
4550
  opacity:.3;
4515
4551
  pointer-events:none;
4516
4552
  }
4517
- .bp_icon_dual_state_button_module_iconDualStateButton--462b9:hover{
4518
- background:var(--surface-toggle-surface-off-hover);
4553
+ .bp_icon_dual_state_button_module_iconDualStateButton--ab460:hover{
4554
+ background:var(--icon-dual-state-button-off-background-hover);
4519
4555
  }
4520
- .bp_icon_dual_state_button_module_iconDualStateButton--462b9:active{
4521
- background:var(--surface-toggle-surface-off-pressed);
4556
+ .bp_icon_dual_state_button_module_iconDualStateButton--ab460:active{
4557
+ background:var(--icon-dual-state-button-off-background-pressed);
4522
4558
  }
4523
- .bp_icon_dual_state_button_module_iconDualStateButton--462b9[data-focus-visible]{
4524
- background:var(--surface-toggle-surface-off-hover);
4525
- outline:var(--border-2) solid var(--outline-focus-on-light);
4559
+ .bp_icon_dual_state_button_module_iconDualStateButton--ab460[data-focus-visible]{
4560
+ background:var(--icon-dual-state-button-off-background-hover);
4561
+ outline:var(--icon-dual-state-button-focus-outline);
4526
4562
  }
4527
- .bp_icon_dual_state_button_module_iconDualStateButton--462b9[data-focus-visible]:active{
4528
- background:var(--surface-toggle-surface-off-pressed);
4563
+ .bp_icon_dual_state_button_module_iconDualStateButton--ab460[data-focus-visible]:active{
4564
+ background:var(--icon-dual-state-button-off-background-pressed);
4529
4565
  }
4530
- .bp_icon_dual_state_button_module_iconDualStateButton--462b9.bp_icon_dual_state_button_module_pressed--462b9{
4531
- background:var(--surface-toggle-surface-on);
4532
- border:var(--border-1) solid var(--border-toggle-border-on);
4533
- color:var(--icon-icon-blue);
4566
+ .bp_icon_dual_state_button_module_iconDualStateButton--ab460.bp_icon_dual_state_button_module_pressed--ab460{
4567
+ background:var(--icon-dual-state-button-on-background);
4568
+ border:var(--icon-dual-state-button-on-border);
4569
+ color:var(--icon-dual-state-button-on-icon-color);
4534
4570
  }
4535
- .bp_icon_dual_state_button_module_iconDualStateButton--462b9.bp_icon_dual_state_button_module_pressed--462b9:hover{
4536
- background:var(--surface-toggle-surface-on-hover);
4571
+ .bp_icon_dual_state_button_module_iconDualStateButton--ab460.bp_icon_dual_state_button_module_pressed--ab460:hover{
4572
+ background:var(--icon-dual-state-button-on-background-hover);
4537
4573
  }
4538
- .bp_icon_dual_state_button_module_iconDualStateButton--462b9.bp_icon_dual_state_button_module_pressed--462b9:active{
4539
- background:var(--surface-toggle-surface-on-pressed);
4574
+ .bp_icon_dual_state_button_module_iconDualStateButton--ab460.bp_icon_dual_state_button_module_pressed--ab460:active{
4575
+ background:var(--icon-dual-state-button-on-background-pressed);
4540
4576
  }
4541
- .bp_icon_dual_state_button_module_iconDualStateButton--462b9.bp_icon_dual_state_button_module_pressed--462b9[data-focus-visible]{
4542
- background:var(--surface-toggle-surface-on-hover);
4543
- border:var(--border-1) solid #fff;
4544
- outline:var(--border-2) solid var(--outline-focus-on-light);
4577
+ .bp_icon_dual_state_button_module_iconDualStateButton--ab460.bp_icon_dual_state_button_module_pressed--ab460[data-focus-visible]{
4578
+ background:var(--icon-dual-state-button-on-background-hover);
4579
+ border:var(--icon-dual-state-button-on-border-focus);
4580
+ outline:var(--icon-dual-state-button-focus-outline);
4545
4581
  }
4546
- .bp_icon_dual_state_button_module_iconDualStateButton--462b9.bp_icon_dual_state_button_module_pressed--462b9[data-focus-visible]:active{
4547
- background:var(--surface-toggle-surface-on-pressed);
4582
+ .bp_icon_dual_state_button_module_iconDualStateButton--ab460.bp_icon_dual_state_button_module_pressed--ab460[data-focus-visible]:active{
4583
+ background:var(--icon-dual-state-button-on-background-pressed);
4548
4584
  }
4549
4585
 
4550
- .bp_icon_dual_state_button_module_xsmallButton--462b9{
4551
- height:var(--size-6);
4552
- width:var(--size-6);
4586
+ .bp_icon_dual_state_button_module_xsmallButton--ab460{
4587
+ height:var(--icon-dual-state-button-xsmall-size);
4588
+ width:var(--icon-dual-state-button-xsmall-size);
4553
4589
  }
4554
4590
 
4555
- .bp_icon_dual_state_button_module_smallButton--462b9{
4556
- height:var(--size-8);
4557
- width:var(--size-8);
4591
+ .bp_icon_dual_state_button_module_smallButton--ab460{
4592
+ height:var(--icon-dual-state-button-small-size);
4593
+ width:var(--icon-dual-state-button-small-size);
4558
4594
  }
4559
4595
  .bp_icon_toggle_button_module_iconToggleButton--afa02[data-modern=false]{
4560
4596
  --icon-toggle-button-radius:var(--radius-2);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "12.21.0",
3
+ "version": "12.22.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {