@box/blueprint-web 12.20.2 → 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.
- package/dist/lib-esm/icon-dual-state-button/icon-dual-state-button.js +5 -0
- package/dist/lib-esm/icon-dual-state-button/icon-dual-state-button.module.js +1 -1
- package/dist/lib-esm/icon-toggle-button/icon-toggle-button.js +5 -0
- package/dist/lib-esm/icon-toggle-button/icon-toggle-button.module.js +1 -1
- package/dist/lib-esm/index.css +170 -88
- package/package.json +1 -1
|
@@ -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, () => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"iconDualStateButton":"bp_icon_dual_state_button_module_iconDualStateButton--
|
|
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 };
|
|
@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { Size4, Size5, Size6 } from '@box/blueprint-web-assets/tokens/tokens';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { forwardRef, createElement } from 'react';
|
|
5
|
+
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
5
6
|
import { BaseToggleButton } from '../util-components/base-toggle-button/base-toggle-button.js';
|
|
6
7
|
import styles from './icon-toggle-button.module.js';
|
|
7
8
|
|
|
@@ -17,10 +18,14 @@ const IconToggleButton = /*#__PURE__*/forwardRef(({
|
|
|
17
18
|
size = 'medium',
|
|
18
19
|
...rest
|
|
19
20
|
}, ref) => {
|
|
21
|
+
const {
|
|
22
|
+
enableModernizedComponents
|
|
23
|
+
} = useBlueprintModernization();
|
|
20
24
|
return jsx(BaseToggleButton, {
|
|
21
25
|
...rest,
|
|
22
26
|
ref: ref,
|
|
23
27
|
className: clsx(styles.iconToggleButton, styles[variant], styles[size], className),
|
|
28
|
+
"data-modern": enableModernizedComponents,
|
|
24
29
|
children: /*#__PURE__*/createElement(icon, {
|
|
25
30
|
className: styles.icon,
|
|
26
31
|
height: iconSizeMap[size],
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"iconToggleButton":"bp_icon_toggle_button_module_iconToggleButton--
|
|
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"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -4490,78 +4490,160 @@
|
|
|
4490
4490
|
margin-block-start:var(--space-5);
|
|
4491
4491
|
width:100%;
|
|
4492
4492
|
}
|
|
4493
|
-
.bp_icon_dual_state_button_module_iconDualStateButton--
|
|
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:
|
|
4496
|
-
border-radius:var(--radius
|
|
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
|
|
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:
|
|
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
|
|
4547
|
+
width:var(--icon-dual-state-button-medium-size);
|
|
4512
4548
|
}
|
|
4513
|
-
.bp_icon_dual_state_button_module_iconDualStateButton--
|
|
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--
|
|
4518
|
-
background:var(--
|
|
4519
|
-
}
|
|
4520
|
-
.bp_icon_dual_state_button_module_iconDualStateButton--
|
|
4521
|
-
background:var(--
|
|
4522
|
-
}
|
|
4523
|
-
.bp_icon_dual_state_button_module_iconDualStateButton--
|
|
4524
|
-
background:var(--
|
|
4525
|
-
outline:var(--
|
|
4526
|
-
}
|
|
4527
|
-
.bp_icon_dual_state_button_module_iconDualStateButton--
|
|
4528
|
-
background:var(--
|
|
4529
|
-
}
|
|
4530
|
-
.bp_icon_dual_state_button_module_iconDualStateButton--
|
|
4531
|
-
background:var(--
|
|
4532
|
-
border:var(--
|
|
4533
|
-
color:var(--icon-icon-
|
|
4534
|
-
}
|
|
4535
|
-
.bp_icon_dual_state_button_module_iconDualStateButton--
|
|
4536
|
-
background:var(--
|
|
4537
|
-
}
|
|
4538
|
-
.bp_icon_dual_state_button_module_iconDualStateButton--
|
|
4539
|
-
background:var(--
|
|
4540
|
-
}
|
|
4541
|
-
.bp_icon_dual_state_button_module_iconDualStateButton--
|
|
4542
|
-
background:var(--
|
|
4543
|
-
border:var(--border-
|
|
4544
|
-
outline:var(--
|
|
4545
|
-
}
|
|
4546
|
-
.bp_icon_dual_state_button_module_iconDualStateButton--
|
|
4547
|
-
background:var(--
|
|
4548
|
-
}
|
|
4549
|
-
|
|
4550
|
-
.bp_icon_dual_state_button_module_xsmallButton--
|
|
4551
|
-
height:var(--size
|
|
4552
|
-
width:var(--size
|
|
4553
|
-
}
|
|
4554
|
-
|
|
4555
|
-
.bp_icon_dual_state_button_module_smallButton--
|
|
4556
|
-
height:var(--size
|
|
4557
|
-
width:var(--size
|
|
4558
|
-
}
|
|
4559
|
-
.bp_icon_toggle_button_module_iconToggleButton--
|
|
4553
|
+
.bp_icon_dual_state_button_module_iconDualStateButton--ab460:hover{
|
|
4554
|
+
background:var(--icon-dual-state-button-off-background-hover);
|
|
4555
|
+
}
|
|
4556
|
+
.bp_icon_dual_state_button_module_iconDualStateButton--ab460:active{
|
|
4557
|
+
background:var(--icon-dual-state-button-off-background-pressed);
|
|
4558
|
+
}
|
|
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);
|
|
4562
|
+
}
|
|
4563
|
+
.bp_icon_dual_state_button_module_iconDualStateButton--ab460[data-focus-visible]:active{
|
|
4564
|
+
background:var(--icon-dual-state-button-off-background-pressed);
|
|
4565
|
+
}
|
|
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);
|
|
4570
|
+
}
|
|
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);
|
|
4573
|
+
}
|
|
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);
|
|
4576
|
+
}
|
|
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);
|
|
4581
|
+
}
|
|
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);
|
|
4584
|
+
}
|
|
4585
|
+
|
|
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);
|
|
4589
|
+
}
|
|
4590
|
+
|
|
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);
|
|
4594
|
+
}
|
|
4595
|
+
.bp_icon_toggle_button_module_iconToggleButton--afa02[data-modern=false]{
|
|
4596
|
+
--icon-toggle-button-radius:var(--radius-2);
|
|
4597
|
+
--icon-toggle-button-padding-inline:0;
|
|
4598
|
+
--icon-toggle-button-off-color:var(--text-text-on-light);
|
|
4599
|
+
--icon-toggle-button-off-background:#0000;
|
|
4600
|
+
--icon-toggle-button-off-background-hover:var(--surface-toggle-surface-off-hover);
|
|
4601
|
+
--icon-toggle-button-off-background-pressed:var(--surface-toggle-surface-off-pressed);
|
|
4602
|
+
--icon-toggle-button-off-border:none;
|
|
4603
|
+
--icon-toggle-button-off-icon-color:var(--icon-icon-on-light-secondary);
|
|
4604
|
+
--icon-toggle-button-off-icon-color-high-contrast:var(--icon-icon-on-light);
|
|
4605
|
+
--icon-toggle-button-on-background:var(--surface-toggle-surface-on);
|
|
4606
|
+
--icon-toggle-button-on-background-hover:var(--surface-toggle-surface-on-hover);
|
|
4607
|
+
--icon-toggle-button-on-background-pressed:var(--surface-toggle-surface-on-pressed);
|
|
4608
|
+
--icon-toggle-button-on-border:var(--border-1) solid var(--border-toggle-border-on);
|
|
4609
|
+
--icon-toggle-button-on-border-focus:var(--border-1) solid #fff;
|
|
4610
|
+
--icon-toggle-button-on-color:var(--text-text-on-dark);
|
|
4611
|
+
--icon-toggle-button-on-icon-color:var(--icon-icon-blue);
|
|
4612
|
+
--icon-toggle-button-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
|
|
4613
|
+
--icon-toogle-button-xsmall-size:var(--size-6);
|
|
4614
|
+
--icon-toogle-button-small-size:var(--size-8);
|
|
4615
|
+
--icon-toogle-button-medium-size:var(--size-10);
|
|
4616
|
+
}
|
|
4617
|
+
|
|
4618
|
+
.bp_icon_toggle_button_module_iconToggleButton--afa02[data-modern=true]{
|
|
4619
|
+
--icon-toggle-button-radius:var(--bp-radius-10);
|
|
4620
|
+
--icon-toggle-button-padding-inline:0;
|
|
4621
|
+
--icon-toggle-button-off-color:var(--bp-text-text-on-light);
|
|
4622
|
+
--icon-toggle-button-off-background:var(--bp-surface-toggle-surface);
|
|
4623
|
+
--icon-toggle-button-off-background-hover:var(--bp-surface-toggle-surface-off-hover);
|
|
4624
|
+
--icon-toggle-button-off-background-pressed:var(--bp-surface-toggle-surface-off-pressed);
|
|
4625
|
+
--icon-toggle-button-off-border:none;
|
|
4626
|
+
--icon-toggle-button-off-icon-color:var(--bp-icon-icon-on-light-secondary);
|
|
4627
|
+
--icon-toggle-button-off-icon-color-high-contrast:var(--bp-icon-icon-on-light);
|
|
4628
|
+
--icon-toggle-button-on-background:var(--bp-surface-toggle-surface-on);
|
|
4629
|
+
--icon-toggle-button-on-background-hover:var(--bp-surface-toggle-surface-on-hover);
|
|
4630
|
+
--icon-toggle-button-on-background-pressed:var(--bp-surface-toggle-surface-on-pressed);
|
|
4631
|
+
--icon-toggle-button-on-border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
|
|
4632
|
+
--icon-toggle-button-on-border-focus:var(--bp-border-01) solid #fff;
|
|
4633
|
+
--icon-toggle-button-on-color:var(--bp-text-text-on-dark);
|
|
4634
|
+
--icon-toggle-button-on-icon-color:var(--bp-icon-icon-blue);
|
|
4635
|
+
--icon-toggle-button-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
|
|
4636
|
+
--icon-toogle-button-xsmall-size:var(--bp-size-060);
|
|
4637
|
+
--icon-toogle-button-small-size:var(--bp-size-080);
|
|
4638
|
+
--icon-toogle-button-medium-size:var(--bp-size-100);
|
|
4639
|
+
}
|
|
4640
|
+
|
|
4641
|
+
.bp_icon_toggle_button_module_iconToggleButton--afa02{
|
|
4560
4642
|
align-items:center;
|
|
4561
|
-
background
|
|
4562
|
-
border:
|
|
4563
|
-
border-radius:var(--radius
|
|
4564
|
-
color:var(--
|
|
4643
|
+
background:var(--icon-toggle-button-off-background);
|
|
4644
|
+
border:var(--icon-toggle-button-off-border);
|
|
4645
|
+
border-radius:var(--icon-toggle-button-radius);
|
|
4646
|
+
color:var(--icon-toggle-button-off-color);
|
|
4565
4647
|
cursor:pointer;
|
|
4566
4648
|
display:flex;
|
|
4567
4649
|
font-family:var(--body-default-font-family);
|
|
@@ -4571,59 +4653,59 @@
|
|
|
4571
4653
|
letter-spacing:var(--body-default-letter-spacing);
|
|
4572
4654
|
line-height:var(--body-default-line-height);
|
|
4573
4655
|
outline:0;
|
|
4574
|
-
padding-inline:
|
|
4656
|
+
padding-inline:var(--icon-toggle-button-padding-inline);
|
|
4575
4657
|
-webkit-text-decoration:var(--body-default-text-decoration);
|
|
4576
4658
|
text-decoration:var(--body-default-text-decoration);
|
|
4577
4659
|
text-transform:var(--body-default-text-case);
|
|
4578
4660
|
}
|
|
4579
|
-
.bp_icon_toggle_button_module_iconToggleButton--
|
|
4661
|
+
.bp_icon_toggle_button_module_iconToggleButton--afa02:disabled{
|
|
4580
4662
|
opacity:.3;
|
|
4581
4663
|
pointer-events:none;
|
|
4582
4664
|
}
|
|
4583
|
-
.bp_icon_toggle_button_module_iconToggleButton--
|
|
4584
|
-
background-color:var(--
|
|
4665
|
+
.bp_icon_toggle_button_module_iconToggleButton--afa02:hover{
|
|
4666
|
+
background-color:var(--icon-toggle-button-off-background-hover);
|
|
4585
4667
|
}
|
|
4586
|
-
.bp_icon_toggle_button_module_iconToggleButton--
|
|
4587
|
-
outline:var(--
|
|
4668
|
+
.bp_icon_toggle_button_module_iconToggleButton--afa02[data-focus-visible]{
|
|
4669
|
+
outline:var(--icon-toggle-button-focus-outline);
|
|
4588
4670
|
}
|
|
4589
|
-
.bp_icon_toggle_button_module_iconToggleButton--
|
|
4590
|
-
background-color:var(--
|
|
4671
|
+
.bp_icon_toggle_button_module_iconToggleButton--afa02:active{
|
|
4672
|
+
background-color:var(--icon-toggle-button-off-background-pressed);
|
|
4591
4673
|
}
|
|
4592
|
-
.bp_icon_toggle_button_module_iconToggleButton--
|
|
4593
|
-
fill:var(--icon-icon-
|
|
4674
|
+
.bp_icon_toggle_button_module_iconToggleButton--afa02.bp_icon_toggle_button_module_high-contrast--afa02 .bp_icon_toggle_button_module_icon--afa02 *{
|
|
4675
|
+
fill:var(--icon-toggle-button-off-icon-color-high-contrast);
|
|
4594
4676
|
}
|
|
4595
|
-
.bp_icon_toggle_button_module_iconToggleButton--
|
|
4596
|
-
fill:var(--icon-
|
|
4677
|
+
.bp_icon_toggle_button_module_iconToggleButton--afa02.bp_icon_toggle_button_module_default--afa02 .bp_icon_toggle_button_module_icon--afa02 *{
|
|
4678
|
+
fill:var(--icon-toggle-button-off-icon-color);
|
|
4597
4679
|
}
|
|
4598
|
-
.bp_icon_toggle_button_module_iconToggleButton--
|
|
4599
|
-
background:var(--
|
|
4600
|
-
border:var(--
|
|
4601
|
-
color:var(--
|
|
4680
|
+
.bp_icon_toggle_button_module_iconToggleButton--afa02[aria-pressed=true]{
|
|
4681
|
+
background:var(--icon-toggle-button-on-background);
|
|
4682
|
+
border:var(--icon-toggle-button-on-border);
|
|
4683
|
+
color:var(--icon-toggle-button-on-color);
|
|
4602
4684
|
}
|
|
4603
|
-
.bp_icon_toggle_button_module_iconToggleButton--
|
|
4604
|
-
fill:var(--icon-icon-
|
|
4685
|
+
.bp_icon_toggle_button_module_iconToggleButton--afa02[aria-pressed=true] .bp_icon_toggle_button_module_icon--afa02 *{
|
|
4686
|
+
fill:var(--icon-toggle-button-on-icon-color);
|
|
4605
4687
|
}
|
|
4606
|
-
.bp_icon_toggle_button_module_iconToggleButton--
|
|
4607
|
-
background-color:var(--
|
|
4688
|
+
.bp_icon_toggle_button_module_iconToggleButton--afa02[aria-pressed=true]:hover{
|
|
4689
|
+
background-color:var(--icon-toggle-button-on-background-hover);
|
|
4608
4690
|
}
|
|
4609
|
-
.bp_icon_toggle_button_module_iconToggleButton--
|
|
4610
|
-
border:var(--border-
|
|
4611
|
-
outline:var(--
|
|
4691
|
+
.bp_icon_toggle_button_module_iconToggleButton--afa02[aria-pressed=true][data-focus-visible]{
|
|
4692
|
+
border:var(--icon-toggle-button-on-border-focus);
|
|
4693
|
+
outline:var(--icon-toggle-button-focus-outline);
|
|
4612
4694
|
}
|
|
4613
|
-
.bp_icon_toggle_button_module_iconToggleButton--
|
|
4614
|
-
background-color:var(--
|
|
4695
|
+
.bp_icon_toggle_button_module_iconToggleButton--afa02[aria-pressed=true]:active{
|
|
4696
|
+
background-color:var(--icon-toggle-button-on-background-pressed);
|
|
4615
4697
|
}
|
|
4616
|
-
.bp_icon_toggle_button_module_iconToggleButton--
|
|
4617
|
-
height:var(--size
|
|
4618
|
-
width:var(--size
|
|
4698
|
+
.bp_icon_toggle_button_module_iconToggleButton--afa02.bp_icon_toggle_button_module_medium--afa02{
|
|
4699
|
+
height:var(--icon-toogle-button-medium-size);
|
|
4700
|
+
width:var(--icon-toogle-button-medium-size);
|
|
4619
4701
|
}
|
|
4620
|
-
.bp_icon_toggle_button_module_iconToggleButton--
|
|
4621
|
-
height:var(--size
|
|
4622
|
-
width:var(--size
|
|
4702
|
+
.bp_icon_toggle_button_module_iconToggleButton--afa02.bp_icon_toggle_button_module_small--afa02{
|
|
4703
|
+
height:var(--icon-toogle-button-small-size);
|
|
4704
|
+
width:var(--icon-toogle-button-small-size);
|
|
4623
4705
|
}
|
|
4624
|
-
.bp_icon_toggle_button_module_iconToggleButton--
|
|
4625
|
-
height:var(--size
|
|
4626
|
-
width:var(--size
|
|
4706
|
+
.bp_icon_toggle_button_module_iconToggleButton--afa02.bp_icon_toggle_button_module_x-small--afa02{
|
|
4707
|
+
height:var(--icon-toogle-button-xsmall-size);
|
|
4708
|
+
width:var(--icon-toogle-button-xsmall-size);
|
|
4627
4709
|
}
|
|
4628
4710
|
table.bp_inline_table_module_inlineTable--7cffa{
|
|
4629
4711
|
background:var(--gray-white);
|