@bi-digital/css 0.11.10 → 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 (36) hide show
  1. package/dist/baseline.css +4 -2
  2. package/dist/components/alert.css +52 -114
  3. package/dist/components/avatar.css +11 -59
  4. package/dist/components/badge.css +25 -92
  5. package/dist/components/button.css +108 -131
  6. package/dist/components/card.css +232 -309
  7. package/dist/components/checkbox-subsection.css +13 -17
  8. package/dist/components/chip.css +41 -185
  9. package/dist/components/details.css +86 -105
  10. package/dist/components/dialog.css +97 -102
  11. package/dist/components/dropdown.css +19 -30
  12. package/dist/components/field.css +203 -219
  13. package/dist/components/fieldset.css +18 -26
  14. package/dist/components/filter-group.css +76 -94
  15. package/dist/components/footer.css +104 -124
  16. package/dist/components/icons.css +30 -30
  17. package/dist/components/input.css +188 -206
  18. package/dist/components/label.css +15 -21
  19. package/dist/components/link.css +36 -56
  20. package/dist/components/logo.css +45 -41
  21. package/dist/components/navbar.css +49 -52
  22. package/dist/components/pagination.css +27 -30
  23. package/dist/components/popover.css +37 -46
  24. package/dist/components/search.css +12 -8
  25. package/dist/components/skip-link.css +8 -10
  26. package/dist/components/spinner.css +22 -25
  27. package/dist/components/sticky-header.css +1 -3
  28. package/dist/components/sub-navbar.css +25 -25
  29. package/dist/components/tabs.css +105 -121
  30. package/dist/components/tooltip.css +32 -32
  31. package/dist/components/validation-message.css +11 -11
  32. package/dist/components.css +1695 -2281
  33. package/dist/index.css +509 -10
  34. package/dist/salesforce.css +2200 -2289
  35. package/dist/tokens.css +505 -8
  36. package/package.json +2 -2
package/dist/components/tabs.css CHANGED
@@ -1,132 +1,116 @@
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
-
12
- .bi-tabs[data-dark="true"] {
13
- --bic-tabs-tab-color: var(--bi-neutral-5);
14
- --bic-tabs-tab-color-selected: var(--bi-primary-30);
15
- --bic-tabs-tab-background-hover: var(--bi-states-hover-light);
16
- --bic-tabs-tab-background-press: var(--bi-states-press-light);
17
- --bic-tabs-focus-shadow-color: var(--bi-neutral-95);
18
- --bic-tabs-focus-outline-color: var(--bi-primary-30);
19
- }
20
-
21
- .bi-tabs {
22
8
  flex-direction: column;
23
9
  display: flex;
24
10
  overflow: hidden;
25
- }
26
-
27
- .bi-tabs :is([role="tablist"], ds-tablist, nav) {
28
- scrollbar-width: none;
29
- flex-direction: row;
30
- flex-shrink: 0;
31
- position: relative;
32
- overflow-x: auto;
33
- }
34
11
 
35
- .bi-tabs :is([role="tablist"], ds-tablist, nav):not([hidden]) {
36
- display: flex;
37
- }
38
-
39
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) {
40
- font: var(--bic-tabs-tab-font);
41
- border-radius: var(--bi-radius-medium);
42
- box-sizing: border-box;
43
- color: var(--bic-tabs-tab-color);
44
- cursor: pointer;
45
- align-items: center;
46
- gap: var(--bi-scale-1x);
47
- padding: .625rem var(--bi-scale-6x);
48
- text-align: center;
49
- white-space: nowrap;
50
- background: none;
51
- border: 0;
52
- flex-direction: row;
53
- justify-content: center;
54
- margin: 0;
55
- line-height: 1.5;
56
- text-decoration: none;
57
- transition: color .2s ease-in-out;
58
- position: relative;
59
- }
60
-
61
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):not([hidden]) {
62
- display: flex;
63
- }
64
-
65
- @media (hover: hover) and (pointer: fine) {
66
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):hover {
67
- background: var(--bic-tabs-tab-background-hover);
12
+ & :is([role="tablist"], ds-tablist, nav) {
13
+ scrollbar-width: none;
14
+ flex-direction: row;
15
+ flex-shrink: 0;
16
+ position: relative;
17
+ overflow-x: auto;
18
+
19
+ &:not([hidden]) {
20
+ display: flex;
21
+ }
22
+
23
+ & > :is([role="tab"], ds-tab, a) {
24
+ font: var(--bic-tabs-tab-font);
25
+ border-radius: var(--bi-radius-medium);
26
+ box-sizing: border-box;
27
+ color: var(--bic-tabs-tab-color);
28
+ cursor: pointer;
29
+ align-items: center;
30
+ gap: var(--bi-scale-1x);
31
+ padding: .625rem var(--bi-scale-6x);
32
+ text-align: center;
33
+ white-space: nowrap;
34
+ background: none;
35
+ border: 0;
36
+ flex-direction: row;
37
+ justify-content: center;
38
+ margin: 0;
39
+ line-height: 1.5;
40
+ text-decoration: none;
41
+ transition: color .2s ease-in-out;
42
+ position: relative;
43
+
44
+ &:not([hidden]) {
45
+ display: flex;
46
+ }
47
+
48
+ @media (hover: hover) and (pointer: fine) {
49
+ &:hover {
50
+ background: var(--bic-tabs-tab-background-hover);
51
+ }
52
+ }
53
+
54
+ &:active {
55
+ background: var(--bic-tabs-tab-background-press);
56
+ }
57
+
58
+ &:not(:focus-visible) {
59
+ border-bottom-right-radius: 0;
60
+ border-bottom-left-radius: 0;
61
+ }
62
+
63
+ &:focus-visible {
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));
66
+ outline-offset: var(--_bi--focus, -3px);
67
+
68
+ &:after {
69
+ bottom: 3px;
70
+ }
71
+ }
72
+
73
+ & :where(img, svg) {
74
+ font-size: var(--bi-icon-medium);
75
+ flex-shrink: 0;
76
+ }
77
+
78
+ &:after {
79
+ background: var(--bic-tabs-tab-color-selected);
80
+ content: "";
81
+ border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
82
+ width: 0;
83
+ height: 3px;
84
+ transition: width .2s ease-in-out;
85
+ display: block;
86
+ position: absolute;
87
+ bottom: 0;
88
+ left: 50%;
89
+ transform: translateX(-50%);
90
+ }
91
+
92
+ @media (prefers-reduced-motion: reduce) {
93
+ transition: none;
94
+
95
+ &:after {
96
+ transition: none;
97
+ }
98
+ }
99
+
100
+ &[aria-selected="true"], &[aria-current="page"] {
101
+ color: var(--bic-tabs-tab-color-selected);
102
+
103
+ &:after {
104
+ width: calc(100% - var(--bi-scale-6x));
105
+ }
106
+ }
107
+ }
68
108
  }
69
- }
70
-
71
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):active {
72
- background: var(--bic-tabs-tab-background-press);
73
- }
74
109
 
75
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):not(:focus-visible) {
76
- border-bottom-right-radius: 0;
77
- border-bottom-left-radius: 0;
78
- }
79
-
80
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):focus-visible {
81
- box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
82
- outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
83
- outline-offset: var(--_bi--focus, -3px);
84
- }
85
-
86
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):focus-visible:after {
87
- bottom: 3px;
88
- }
89
-
90
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) :where(img, svg) {
91
- font-size: var(--bi-icon-medium);
92
- flex-shrink: 0;
93
- }
94
-
95
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):after {
96
- background: var(--bic-tabs-tab-color-selected);
97
- content: "";
98
- border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
99
- width: 0;
100
- height: 3px;
101
- transition: width .2s ease-in-out;
102
- display: block;
103
- position: absolute;
104
- bottom: 0;
105
- left: 50%;
106
- transform: translateX(-50%);
107
- }
108
-
109
- @media (prefers-reduced-motion: reduce) {
110
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) {
111
- transition: none;
112
- }
113
-
114
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):after {
115
- transition: none;
110
+ & :is([role="tabpanel"], ds-tabpanel) {
111
+ padding: var(--bic-tabs-panel-padding);
112
+ color: var(--bi-color-text);
113
+ outline: none;
114
+ flex-grow: 1;
116
115
  }
117
116
  }
118
-
119
- .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-selected="true"], .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-current="page"] {
120
- color: var(--bic-tabs-tab-color-selected);
121
- }
122
-
123
- :is(.bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-selected="true"], .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-current="page"]):after {
124
- width: calc(100% - var(--bi-scale-6x));
125
- }
126
-
127
- .bi-tabs :is([role="tabpanel"], ds-tabpanel) {
128
- padding: var(--bic-tabs-panel-padding);
129
- color: var(--bic-tabs-tab-color);
130
- outline: none;
131
- flex-grow: 1;
132
- }
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);
@@ -18,42 +18,42 @@
18
18
  position: absolute;
19
19
  inset: 0 auto auto 0;
20
20
  overflow: visible;
21
- }
22
21
 
23
- .bi-tooltip:after {
24
- content: "";
25
- box-sizing: border-box;
26
- width: 0;
27
- height: 0;
28
- position: absolute;
29
- top: 100%;
30
- left: 50%;
31
- }
22
+ &:after {
23
+ content: "";
24
+ box-sizing: border-box;
25
+ width: 0;
26
+ height: 0;
27
+ position: absolute;
28
+ top: 100%;
29
+ left: 50%;
30
+ }
32
31
 
33
- .bi-tooltip[data-floating="top"]:after, .bi-tooltip[data-floating="bottom"]:after {
34
- width: 100%;
35
- height: var(--bic-tooltip-shift-size);
36
- top: 100%;
37
- left: 0;
38
- }
32
+ &[data-floating="top"]:after, &[data-floating="bottom"]:after {
33
+ width: 100%;
34
+ height: var(--bic-tooltip-shift-size);
35
+ top: 100%;
36
+ left: 0;
37
+ }
39
38
 
40
- .bi-tooltip[data-floating="left"]:after, .bi-tooltip[data-floating="right"]:after {
41
- width: var(--bic-tooltip-shift-size);
42
- height: 100%;
43
- top: 0;
44
- left: 100%;
45
- }
39
+ &[data-floating="left"]:after, &[data-floating="right"]:after {
40
+ width: var(--bic-tooltip-shift-size);
41
+ height: 100%;
42
+ top: 0;
43
+ left: 100%;
44
+ }
46
45
 
47
- .bi-tooltip[data-floating="bottom"]:after {
48
- top: calc(var(--bic-tooltip-shift-size) * -1);
49
- }
46
+ &[data-floating="bottom"]:after {
47
+ top: calc(var(--bic-tooltip-shift-size) * -1);
48
+ }
50
49
 
51
- .bi-tooltip[data-floating="right"]:after {
52
- left: calc(var(--bic-tooltip-shift-size) * -1);
53
- }
50
+ &[data-floating="right"]:after {
51
+ left: calc(var(--bic-tooltip-shift-size) * -1);
52
+ }
54
53
 
55
- .bi-tooltip:not([popover]) {
56
- display: none;
54
+ &:not([popover]) {
55
+ display: none;
56
+ }
57
57
  }
58
58
 
59
59
  @keyframes bi-tooltip-fade-in {
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);
@@ -10,15 +10,15 @@
10
10
  font: var(--bi-font-label-medium);
11
11
  margin: 0;
12
12
  position: relative;
13
- }
14
13
 
15
- .bi-validation-message:has( > svg) {
16
- padding-inline-start: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
17
- }
14
+ &:has( > svg) {
15
+ padding-inline-start: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
16
+ }
18
17
 
19
- .bi-validation-message > svg {
20
- font-size: var(--bic-validation-message-icon-size);
21
- top: var(--bic-validation-message-padding);
22
- left: var(--bic-validation-message-padding);
23
- position: absolute;
18
+ & > svg {
19
+ font-size: var(--bic-validation-message-icon-size);
20
+ top: var(--bic-validation-message-padding);
21
+ left: var(--bic-validation-message-padding);
22
+ position: absolute;
23
+ }
24
24
  }