@bi-digital/css 0.11.11 → 0.12.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 (31) hide show
  1. package/dist/components/alert.css +7 -67
  2. package/dist/components/avatar.css +2 -48
  3. package/dist/components/badge.css +8 -75
  4. package/dist/components/button.css +31 -54
  5. package/dist/components/card.css +18 -81
  6. package/dist/components/checkbox-subsection.css +1 -5
  7. package/dist/components/chip.css +10 -154
  8. package/dist/components/details.css +9 -24
  9. package/dist/components/dialog.css +3 -10
  10. package/dist/components/dropdown.css +2 -11
  11. package/dist/components/field.css +14 -32
  12. package/dist/components/fieldset.css +2 -8
  13. package/dist/components/filter-group.css +8 -26
  14. package/dist/components/footer.css +16 -22
  15. package/dist/components/input.css +26 -42
  16. package/dist/components/label.css +2 -8
  17. package/dist/components/link.css +13 -33
  18. package/dist/components/logo.css +17 -11
  19. package/dist/components/navbar.css +8 -7
  20. package/dist/components/pagination.css +2 -7
  21. package/dist/components/popover.css +3 -12
  22. package/dist/components/search.css +1 -1
  23. package/dist/components/sub-navbar.css +11 -9
  24. package/dist/components/tabs.css +7 -19
  25. package/dist/components/tooltip.css +2 -2
  26. package/dist/components/validation-message.css +2 -2
  27. package/dist/components.css +223 -768
  28. package/dist/index.css +505 -8
  29. package/dist/salesforce.css +728 -776
  30. package/dist/tokens.css +505 -8
  31. package/package.json +2 -2
package/dist/components/link.css CHANGED
@@ -1,12 +1,14 @@
1
1
  .bi-link {
2
- --bic-link-background-active: var(--bi-primary-20);
3
- --bic-link-color-active: var(--bi-primary-60);
4
- --bic-link-color-hover: var(--bi-primary-60);
5
- --bic-link-color: var(--bi-primary-50);
2
+ --bic-link-color-hover: var(--bi-color-primary-contrast-hover);
3
+ --bic-link-color: var(--bi-color-primary-contrast);
6
4
  --bic-link-text-decoration-thickness--hover: .125em;
7
5
  --bic-link-text-decoration-thickness: .0625em;
8
- --bic-link-focus-shadow-color: var(--bi-basic-white);
9
- --bic-link-focus-outline-color: var(--bi-primary-50);
6
+
7
+ &[data-color] {
8
+ --bic-link-color-hover: var(--bi-color-contrast-hover);
9
+ --bic-link-color: var(--bi-color-contrast);
10
+ }
11
+
10
12
  color: var(--bic-link-color);
11
13
  text-decoration-line: underline;
12
14
  text-decoration-style: solid;
@@ -18,29 +20,6 @@
18
20
  vertical-align: middle;
19
21
  }
20
22
 
21
- &[data-dark="true"] {
22
- --bic-link-background-active: var(--bi-primary-80);
23
- --bic-link-color-active: var(--bi-primary-30);
24
- --bic-link-color-hover: var(--bi-primary-30);
25
- --bic-link-color: var(--bi-primary-40);
26
- --bic-link-focus-shadow-color: var(--bi-neutral-95);
27
- --bic-link-focus-outline-color: var(--bi-primary-30);
28
- }
29
-
30
- &[data-color="neutral"] {
31
- --bic-link-background-active: var(--bi-neutral-10);
32
- --bic-link-color-active: var(--bi-neutral-100);
33
- --bic-link-color-hover: var(--bi-neutral-100);
34
- --bic-link-color: var(--bi-neutral-90);
35
-
36
- &[data-dark="true"] {
37
- --bic-link-background-active: var(--bi-neutral-90);
38
- --bic-link-color-active: var(--bi-neutral-15);
39
- --bic-link-color-hover: var(--bi-neutral-15);
40
- --bic-link-color: var(--bi-neutral-5);
41
- }
42
- }
43
-
44
23
  &[data-underline="hover"]:not(:hover) {
45
24
  text-decoration: none;
46
25
  }
@@ -57,10 +36,11 @@
57
36
  }
58
37
 
59
38
  &:focus-visible {
60
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-link-focus-shadow-color), var(--bic-button-box-shadow));
61
- outline: var(--_bi--focus, 3px solid var(--bic-link-focus-outline-color));
39
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
40
+ outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
62
41
  outline-offset: var(--_bi--focus, 2px);
63
42
  border-radius: var(--bi-radius-small);
43
+ text-decoration: none;
64
44
 
65
45
  & * {
66
46
  --_bi--focus: ;
@@ -68,7 +48,7 @@
68
48
  }
69
49
 
70
50
  &:active {
71
- background: var(--bic-link-background-active);
72
- color: var(--bic-link-color-active);
51
+ background-color: var(--bi-states-press);
52
+ border-radius: var(--bi-radius-small);
73
53
  }
74
54
  }
package/dist/components/logo.css CHANGED
@@ -1,17 +1,23 @@
1
- [data-bi-pride="true"] {
1
+ :root, [data-color-scheme="light"] {
2
+ --bic-logo-international-vertical: url("./assets/logos/vertical.svg");
3
+ --bic-logo-international: url("./assets/logos/international.svg");
4
+ --bic-logo-default: url("./assets/logos/default.svg");
2
5
  --bic-logo-pride-international-vertical: url("./assets/logos/pride-vertical.svg");
3
6
  --bic-logo-pride-international: url("./assets/logos/pride-international.svg");
4
7
  --bic-logo-pride-default: url("./assets/logos/pride-default.svg");
5
- --bic-logo-pride-dark-international-vertical: url("./assets/logos/pride-vertical-dark.svg");
6
- --bic-logo-pride-dark-international: url("./assets/logos/pride-international-dark.svg");
7
- --bic-logo-pride-dark-default: url("./assets/logos/pride-dark.svg");
8
+ }
9
+
10
+ [data-color-scheme="dark"] {
11
+ --bic-logo-international-vertical: url("./assets/logos/vertical-dark.svg");
12
+ --bic-logo-international: url("./assets/logos/international-dark.svg");
13
+ --bic-logo-default: url("./assets/logos/dark.svg");
14
+ --bic-logo-pride-international-vertical: url("./assets/logos/pride-vertical-dark.svg");
15
+ --bic-logo-pride-international: url("./assets/logos/pride-international-dark.svg");
16
+ --bic-logo-pride-default: url("./assets/logos/pride-dark.svg");
8
17
  }
9
18
 
10
19
  .bi-logo {
11
20
  --bic-logo-height: var(--bi-scale-12x);
12
- --bic-logo-international-vertical: var(--bic-logo-pride-international-vertical, url("./assets/logos/vertical.svg"));
13
- --bic-logo-international: var(--bic-logo-pride-international, url("./assets/logos/international.svg"));
14
- --bic-logo-default: var(--bic-logo-pride-default, url("./assets/logos/default.svg"));
15
21
  height: var(--bic-logo-height);
16
22
  aspect-ratio: 1;
17
23
  background-position: center;
@@ -20,10 +26,10 @@
20
26
  justify-content: center;
21
27
  display: flex;
22
28
 
23
- &[data-dark="true"] {
24
- --bic-logo-international-vertical: var(--bic-logo-pride-dark-international-vertical, url("./assets/logos/vertical-dark.svg"));
25
- --bic-logo-international: var(--bic-logo-pride-dark-international, url("./assets/logos/international-dark.svg"));
26
- --bic-logo-default: var(--bic-logo-pride-dark-default, url("./assets/logos/dark.svg"));
29
+ &[data-pride="true"] {
30
+ --bic-logo-international-vertical: var(--bic-logo-pride-international-vertical);
31
+ --bic-logo-international: var(--bic-logo-pride-international);
32
+ --bic-logo-default: var(--bic-logo-pride-default);
27
33
  }
28
34
 
29
35
  &[data-size="xs"] {
package/dist/components/navbar.css CHANGED
@@ -9,19 +9,20 @@
9
9
  }
10
10
 
11
11
  .bi-navbar {
12
- --bic-navbar-background-color: var(--bi-basic-white);
13
- --bic-navbar-color: var(--bi-basic-key);
12
+ --bic-navbar-background-color: var(--bi-color-primary-surface-subtle);
13
+ --bic-navbar-color: var(--bi-color-primary-text);
14
+
15
+ &[data-color] {
16
+ --bic-navbar-background-color: var(--bi-color-surface-subtle);
17
+ --bic-navbar-color: var(--bi-color-text);
18
+ }
19
+
14
20
  height: var(--bi-layout-navbar-height);
15
21
  background-color: var(--bic-navbar-background-color);
16
22
  width: 100%;
17
23
  color: var(--bic-navbar-color);
18
24
  display: flex;
19
25
 
20
- &[data-dark="true"] {
21
- --bic-navbar-background-color: var(--bi-primary-95);
22
- --bic-navbar-color: var(--bi-basic-white);
23
- }
24
-
25
26
  & > header {
26
27
  height: var(--bi-layout-navbar-height);
27
28
  align-items: center;
package/dist/components/pagination.css CHANGED
@@ -1,12 +1,7 @@
1
1
  .bi-pagination {
2
2
  --bic-pagination-gap: var(--bi-scale-2x);
3
- --bic-pagination-color: var(--bi-basic-key);
4
- --bic-pagination-selected-background: var(--bi-primary-5);
5
-
6
- &[data-dark="true"] {
7
- --bic-pagination-color: var(--bi-basic-white);
8
- --bic-pagination-selected-background: var(--bi-primary-80);
9
- }
3
+ --bic-pagination-color: var(--bi-color-text);
4
+ --bic-pagination-selected-background: var(--bi-color-surface);
10
5
 
11
6
  & :is(ol, ul) {
12
7
  color: var(--bic-pagination-color);
package/dist/components/popover.css CHANGED
@@ -1,24 +1,15 @@
1
1
  .bi-popover {
2
2
  --bic-popover-arrow-size: var(--bi-scale-3x);
3
- --bic-popover-background: var(--bi-basic-white);
3
+ --bic-popover-background: var(--bi-color-surface-subtle);
4
4
  --bic-popover-border-width: var(--bi-stroke-thin);
5
5
  --bic-popover-border-style: solid;
6
- --bic-popover-border-color: var(--bi-neutral-15);
7
- --bic-popover-color: var(--bi-neutral-90);
6
+ --bic-popover-border-color: var(--bi-color-stroke);
7
+ --bic-popover-color: var(--bi-color-text);
8
8
  --bic-popover-border-radius: var(--bi-radius-medium);
9
9
  --bic-popover-max-width: 300px;
10
10
  --bic-popover-padding: var(--bi-scale-1x);
11
11
  --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
12
12
  0px 2px 2px -1px #26333f0a;
13
-
14
- &[data-dark="true"] {
15
- --bic-popover-background: var(--bi-neutral-95);
16
- --bic-popover-border-color: var(--bi-neutral-70);
17
- --bic-popover-color: var(--bi-neutral-5);
18
- --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
19
- 0px 2px 2px -1px #26333f0a;
20
- }
21
-
22
13
  background: var(--bic-popover-background);
23
14
  border-radius: var(--bic-popover-border-radius);
24
15
  border-width: var(--bic-popover-border-width);
package/dist/components/search.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .bi-search {
2
2
  &:has(:focus-visible) {
3
3
  & .bi-field--affix:first-child {
4
- color: var(--bi-primary-50);
4
+ color: var(--bi-states-focus);
5
5
  }
6
6
  }
7
7
 
package/dist/components/sub-navbar.css CHANGED
@@ -3,23 +3,25 @@
3
3
  position: relative;
4
4
 
5
5
  & .bi-sub-navbar {
6
- --bic-sub-navbar-background-color: var(--bi-basic-white);
7
- --bic-sub-navbar-color: var(--bi-basic-key);
8
- --bic-sub-navbar-border-color: var(--bi-neutral-15);
6
+ --bic-sub-navbar-background-color: var(--bi-color-primary-surface-subtle);
7
+ --bic-sub-navbar-color: var(--bi-color-primary-text);
8
+ --bic-sub-navbar-border-color: var(--bi-color-primary-stroke);
9
+
10
+ &[data-color] {
11
+ --bic-sub-navbar-background-color: var(--bi-color-surface-subtle);
12
+ --bic-sub-navbar-color: var(--bi-color-text);
13
+ --bic-sub-navbar-border-color: var(--bi-color-stroke);
14
+ }
15
+
9
16
  height: var(--bi-layout-navbar-height);
10
17
  background-color: var(--bic-sub-navbar-background-color);
11
18
  border-bottom: 1px solid var(--bic-sub-navbar-border-color);
12
19
  width: 100%;
20
+ color: var(--bic-sub-navbar-color);
13
21
  position: absolute;
14
22
  top: 0;
15
23
  left: 0;
16
24
 
17
- &[data-dark="true"] {
18
- --bic-sub-navbar-background-color: var(--bi-primary-95);
19
- --bic-sub-navbar-color: var(--bi-basic-white);
20
- --bic-sub-navbar-border-color: var(--bi-neutral-70);
21
- }
22
-
23
25
  &[data-fixed="true"] {
24
26
  z-index: 120;
25
27
  position: fixed;
package/dist/components/tabs.css CHANGED
@@ -1,22 +1,10 @@
1
1
  .bi-tabs {
2
- --bic-tabs-tab-color: var(--bi-neutral-90);
3
- --bic-tabs-tab-color-selected: var(--bi-primary-50);
4
- --bic-tabs-tab-background-hover: var(--bi-states-hover-dark);
5
- --bic-tabs-tab-background-press: var(--bi-states-press-dark);
2
+ --bic-tabs-tab-color: var(--bi-color-text);
3
+ --bic-tabs-tab-color-selected: var(--bi-color-contrast);
4
+ --bic-tabs-tab-background-hover: var(--bi-states-hover);
5
+ --bic-tabs-tab-background-press: var(--bi-states-press);
6
6
  --bic-tabs-tab-font: var(--bi-font-title-bold-xs);
7
7
  --bic-tabs-panel-padding: var(--bi-scale-4x) var(--bi-scale-5x);
8
- --bic-tabs-focus-shadow-color: var(--bi-basic-white);
9
- --bic-tabs-focus-outline-color: var(--bi-primary-50);
10
-
11
- &[data-dark="true"] {
12
- --bic-tabs-tab-color: var(--bi-neutral-5);
13
- --bic-tabs-tab-color-selected: var(--bi-primary-30);
14
- --bic-tabs-tab-background-hover: var(--bi-states-hover-light);
15
- --bic-tabs-tab-background-press: var(--bi-states-press-light);
16
- --bic-tabs-focus-shadow-color: var(--bi-neutral-95);
17
- --bic-tabs-focus-outline-color: var(--bi-primary-30);
18
- }
19
-
20
8
  flex-direction: column;
21
9
  display: flex;
22
10
  overflow: hidden;
@@ -73,8 +61,8 @@
73
61
  }
74
62
 
75
63
  &:focus-visible {
76
- box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
77
- outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
64
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bi-states-focus-background));
65
+ outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
78
66
  outline-offset: var(--_bi--focus, -3px);
79
67
 
80
68
  &:after {
@@ -121,7 +109,7 @@
121
109
 
122
110
  & :is([role="tabpanel"], ds-tabpanel) {
123
111
  padding: var(--bic-tabs-panel-padding);
124
- color: var(--bic-tabs-tab-color);
112
+ color: var(--bi-color-text);
125
113
  outline: none;
126
114
  flex-grow: 1;
127
115
  }
package/dist/components/tooltip.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .bi-tooltip {
2
2
  --_ds-floating: var(--bic-tooltip-placement);
3
- --bic-tooltip-background: var(--bi-neutral-85);
4
- --bic-tooltip-color: var(--bi-neutral-0);
3
+ --bic-tooltip-background: var(--bi-color-surface);
4
+ --bic-tooltip-color: var(--bi-color-text);
5
5
  --bic-tooltip-border-radius: var(--bi-radius-medium);
6
6
  --bic-tooltip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
7
7
  --bic-tooltip-shift-size: var(--bi-scale-2x);
package/dist/components/validation-message.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .bi-validation-message {
2
2
  --bic-validation-message-icon-size: var(--bi-icon-small);
3
3
  --bic-validation-message-padding: var(--bi-scale-2x);
4
- --bic-validation-message-background: var(--bi-alert-10);
5
- --bic-validation-message-color: var(--bi-alert-95);
4
+ --bic-validation-message-background: var(--bi-color-alert-surface);
5
+ --bic-validation-message-color: var(--bi-color-alert-text);
6
6
  color: var(--bic-validation-message-color);
7
7
  padding: var(--bic-validation-message-padding);
8
8
  background: var(--bic-validation-message-background);