@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/dialog.css CHANGED
@@ -6,23 +6,14 @@
6
6
  --bic-dialog-anchor-closed-translate: 0, var(--bi-scale-12x);
7
7
  --bic-dialog-animation-duration: .2s;
8
8
  --bic-dialog-backdrop-background: #00000080;
9
- --bic-dialog-background: var(--bi-basic-white);
9
+ --bic-dialog-background: var(--bi-color-background);
10
10
  --bic-dialog-border-radius: var(--bi-radius-large);
11
- --bic-dialog-border-color: var(--bi-neutral-15);
11
+ --bic-dialog-border-color: var(--bi-color-stroke);
12
12
  --bic-dialog-icon-spacing: .625rem;
13
- --bic-dialog-color: var(--bi-neutral-90);
13
+ --bic-dialog-color: var(--bi-color-text);
14
14
  --bic-dialog-max-height: 80vh;
15
15
  --bic-dialog-max-width: 40rem;
16
16
  --bic-dialog-padding: var(--bi-scale-4x);
17
- }
18
-
19
- .bi-dialog[data-dark="true"] {
20
- --bic-dialog-background: var(--bi-primary-95);
21
- --bic-dialog-border-color: var(--bi-neutral-70);
22
- --bic-dialog-color: var(--bi-basic-white);
23
- }
24
-
25
- .bi-dialog {
26
17
  animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) forwards;
27
18
  background: var(--bic-dialog-background);
28
19
  border-radius: var(--bic-dialog-border-radius);
@@ -38,116 +29,120 @@
38
29
  position: fixed;
39
30
  inset: 0;
40
31
  overflow: auto;
41
- }
42
32
 
43
- .bi-dialog::backdrop {
44
- animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
45
- background: var(--bic-dialog-backdrop-background, #00000080);
46
- }
33
+ &::backdrop {
34
+ animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
35
+ background: var(--bic-dialog-backdrop-background, #00000080);
36
+ }
47
37
 
48
- .bi-dialog[open] {
49
- animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out,
38
+ &[open] {
39
+ animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out,
50
40
  bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
51
- display: flex;
52
- }
41
+ display: flex;
42
+ }
53
43
 
54
- .bi-dialog:where([data-anchor="bottom"], [data-anchor="top"], [data-anchor="left"], [data-anchor="right"]) {
55
- --bic-dialog-max-height: unset;
56
- border-radius: var(--bic-dialog-anchor-border-radius);
57
- transition: display var(--bic-dialog-animation-duration) allow-discrete,
44
+ &:where([data-anchor="bottom"], [data-anchor="top"], [data-anchor="left"], [data-anchor="right"]) {
45
+ --bic-dialog-max-height: unset;
46
+ border-radius: var(--bic-dialog-anchor-border-radius);
47
+ transition: display var(--bic-dialog-animation-duration) allow-discrete,
58
48
  overlay var(--bic-dialog-animation-duration) allow-discrete;
59
- transform: translate(var(--bic-dialog-anchor-closed-translate));
60
- animation: bi-dialog-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
61
- }
49
+ transform: translate(var(--bic-dialog-anchor-closed-translate));
50
+ animation: bi-dialog-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
62
51
 
63
- .bi-dialog:where([data-anchor="bottom"], [data-anchor="top"], [data-anchor="left"], [data-anchor="right"])[open] {
64
- animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
65
- transform: translate(0);
66
- }
52
+ &[open] {
53
+ animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
54
+ transform: translate(0);
55
+ }
56
+ }
67
57
 
68
- .bi-dialog:where([data-anchor="bottom"], [data-anchor="top"]) {
69
- min-height: var(--bic-dialog-anchor-block-min-height);
70
- max-height: calc(100dvh - var(--bi-layout-navbar-height));
71
- max-width: 100dvw;
72
- }
58
+ &:where([data-anchor="bottom"], [data-anchor="top"]) {
59
+ min-height: var(--bic-dialog-anchor-block-min-height);
60
+ max-height: calc(100dvh - var(--bi-layout-navbar-height));
61
+ max-width: 100dvw;
62
+ }
73
63
 
74
- .bi-dialog:where([data-anchor="left"], [data-anchor="right"]) {
75
- min-width: var(--bic-dialog-anchor-inline-min-width);
76
- max-width: var(--bic-dialog-anchor-inline-max-width);
77
- width: fit-content;
78
- height: 100dvh;
79
- }
64
+ &:where([data-anchor="left"], [data-anchor="right"]) {
65
+ min-width: var(--bic-dialog-anchor-inline-min-width);
66
+ max-width: var(--bic-dialog-anchor-inline-max-width);
67
+ width: fit-content;
68
+ height: 100dvh;
69
+ }
80
70
 
81
- .bi-dialog[data-anchor="bottom"] {
82
- --bic-dialog-anchor-closed-translate: 0, 100%;
83
- border-bottom-right-radius: 0;
84
- border-bottom-left-radius: 0;
85
- top: auto;
86
- }
71
+ &[data-anchor="bottom"] {
72
+ --bic-dialog-anchor-closed-translate: 0, 100%;
73
+ border-bottom-right-radius: 0;
74
+ border-bottom-left-radius: 0;
75
+ top: auto;
76
+ }
87
77
 
88
- .bi-dialog[data-anchor="top"] {
89
- --bic-dialog-anchor-closed-translate: 0, -100%;
90
- border-top-left-radius: 0;
91
- border-top-right-radius: 0;
92
- bottom: auto;
93
- }
78
+ &[data-anchor="top"] {
79
+ --bic-dialog-anchor-closed-translate: 0, -100%;
80
+ border-top-left-radius: 0;
81
+ border-top-right-radius: 0;
82
+ bottom: auto;
83
+ }
94
84
 
95
- .bi-dialog[data-anchor="left"] {
96
- --bic-dialog-anchor-closed-translate: -100%, 0;
97
- border-top-left-radius: 0;
98
- border-bottom-left-radius: 0;
99
- right: auto;
100
- }
85
+ &[data-anchor="left"] {
86
+ --bic-dialog-anchor-closed-translate: -100%, 0;
87
+ border-top-left-radius: 0;
88
+ border-bottom-left-radius: 0;
89
+ right: auto;
90
+ }
101
91
 
102
- .bi-dialog[data-anchor="right"] {
103
- --bic-dialog-anchor-closed-translate: 100%, 0;
104
- border-top-right-radius: 0;
105
- border-bottom-right-radius: 0;
106
- left: auto;
107
- }
92
+ &[data-anchor="right"] {
93
+ --bic-dialog-anchor-closed-translate: 100%, 0;
94
+ border-top-right-radius: 0;
95
+ border-bottom-right-radius: 0;
96
+ left: auto;
97
+ }
108
98
 
109
- @media (prefers-reduced-motion: reduce) {
110
- .bi-dialog[open], .bi-dialog::backdrop {
111
- animation: none;
99
+ @media (prefers-reduced-motion: reduce) {
100
+ &[open], &::backdrop {
101
+ animation: none;
102
+ }
112
103
  }
113
- }
114
104
 
115
- .bi-dialog > button.bi-dialog--close {
116
- top: var(--bic-dialog-icon-spacing);
117
- right: var(--bic-dialog-icon-spacing);
118
- position: absolute;
119
- }
105
+ & > button.bi-dialog--close {
106
+ top: var(--bic-dialog-icon-spacing);
107
+ right: var(--bic-dialog-icon-spacing);
108
+ position: absolute;
109
+ }
120
110
 
121
- .bi-dialog .bi-dialog--header {
122
- padding: var(--bic-dialog-padding);
123
- min-height: var(--bi-scale-16x);
124
- font: var(--bi-font-title-bold-medium);
125
- align-items: center;
126
- margin: 0;
127
- display: flex;
128
- }
111
+ & .bi-dialog--header {
112
+ padding: var(--bic-dialog-padding);
113
+ min-height: var(--bi-scale-16x);
114
+ font: var(--bi-font-title-bold-medium);
115
+ align-items: center;
116
+ margin: 0;
117
+ display: flex;
118
+ }
129
119
 
130
- .bi-dialog:has( > button.bi-dialog--close) .bi-dialog--header {
131
- padding-right: var(--bi-scale-14x);
132
- }
120
+ &:has( > button.bi-dialog--close) {
121
+ & .bi-dialog--header {
122
+ padding-right: var(--bi-scale-14x);
123
+ }
124
+ }
133
125
 
134
- .bi-dialog .bi-dialog--content {
135
- padding: var(--bic-dialog-padding);
136
- overflow-behavior: contain;
137
- overflow: auto;
138
- }
126
+ & .bi-dialog--content {
127
+ padding: var(--bic-dialog-padding);
128
+ overflow-behavior: contain;
129
+ overflow: auto;
130
+ }
139
131
 
140
- .bi-dialog .bi-dialog--footer {
141
- padding: var(--bic-dialog-padding);
142
- justify-content: flex-end;
143
- align-items: center;
144
- gap: var(--bi-scale-4x);
145
- margin-top: auto;
146
- display: flex;
147
- }
132
+ & .bi-dialog--footer {
133
+ padding: var(--bic-dialog-padding);
134
+ justify-content: flex-end;
135
+ align-items: center;
136
+ gap: var(--bi-scale-4x);
137
+ margin-top: auto;
138
+ display: flex;
139
+ }
148
140
 
149
- :is(.bi-dialog .bi-dialog--header, .bi-dialog .bi-dialog--content, .bi-dialog .bi-dialog--footer):not([data-no-border="true"]):not(:first-child) {
150
- border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
141
+ & .bi-dialog--header, & .bi-dialog--content, & .bi-dialog--footer {
142
+ &:not([data-no-border="true"]):not(:first-child) {
143
+ border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
144
+ }
145
+ }
151
146
  }
152
147
 
153
148
  body:has(.bi-dialog:modal) {
package/dist/components/dropdown.css CHANGED
@@ -2,24 +2,13 @@
2
2
  --bic-dropdown-padding: var(--bi-scale-1x);
3
3
  --bic-dropdown-item-padding: var(--bi-scale-2x) var(--bi-scale-3x);
4
4
  --bic-dropdown-item-size: var(--bi-scale-11x);
5
- --bic-dropdown-background: var(--bi-basic-white);
5
+ --bic-dropdown-background: var(--bi-color-surface-subtle);
6
6
  --bic-dropdown-border-width: var(--bi-stroke-thin);
7
7
  --bic-dropdown-border-style: solid;
8
- --bic-dropdown-border-color: var(--bi-neutral-15);
8
+ --bic-dropdown-border-color: var(--bi-color-stroke);
9
9
  --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
10
10
  0px 2px 2px -1px #26333f0a;
11
11
  --bic-dropdown-min-width: var(--bi-scale-64x);
12
- }
13
-
14
- .bi-dropdown[data-dark="true"] {
15
- --bic-dropdown-background: var(--bi-neutral-100);
16
- --bic-dropdown-border-color: var(--bi-neutral-90);
17
- --bic-dropdown-color: var(--bi-neutral-5);
18
- --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
19
- 0px 2px 2px -1px #26333f0a;
20
- }
21
-
22
- .bi-dropdown {
23
12
  background: var(--bic-dropdown-background);
24
13
  border-radius: var(--bi-radius-medium);
25
14
  border-width: var(--bic-dropdown-border-width);
@@ -30,24 +19,24 @@
30
19
  min-width: max(var(--bic-dropdown-min-width), var(--bic-popover-trigger-width, 0px));
31
20
  padding: var(--bic-dropdown-padding);
32
21
  list-style: none;
33
- }
34
22
 
35
- .bi-dropdown ul {
36
- gap: var(--bi-scale-1x);
37
- flex-direction: column;
38
- margin: 0;
39
- padding: 0;
40
- list-style: none;
41
- display: flex;
42
- }
23
+ & ul {
24
+ gap: var(--bi-scale-1x);
25
+ flex-direction: column;
26
+ margin: 0;
27
+ padding: 0;
28
+ list-style: none;
29
+ display: flex;
30
+ }
43
31
 
44
- .bi-dropdown :is(a, button, [role="button"]) {
45
- padding: var(--bic-dropdown-item-padding);
46
- min-height: var(--bic-dropdown-item-size);
47
- justify-content: start;
48
- width: 100%;
49
- }
32
+ & :is(a, button, [role="button"]) {
33
+ padding: var(--bic-dropdown-item-padding);
34
+ min-height: var(--bic-dropdown-item-size);
35
+ justify-content: start;
36
+ width: 100%;
50
37
 
51
- .bi-dropdown :is(a, button, [role="button"]) .bi-button--end-icon {
52
- margin-left: auto;
38
+ & .bi-button--end-icon {
39
+ margin-left: auto;
40
+ }
41
+ }
53
42
  }