@wwtdev/bsds-css 1.6.5 → 1.8.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 (51) hide show
  1. package/dist/components/_accordions.scss +3 -3
  2. package/dist/components/_badge.scss +13 -11
  3. package/dist/components/_banner.scss +2 -10
  4. package/dist/components/_buttons.scss +11 -5
  5. package/dist/components/_circle-buttons.scss +6 -6
  6. package/dist/components/_dropdown-options.scss +119 -0
  7. package/dist/components/_dropdown.scss +29 -154
  8. package/dist/components/_form-booleans.scss +8 -8
  9. package/dist/components/_form-character-count.scss +2 -2
  10. package/dist/components/_form-elements.scss +4 -4
  11. package/dist/components/_form-hints.scss +3 -2
  12. package/dist/components/_form-input-composite.scss +1 -1
  13. package/dist/components/_form-labels.scss +2 -2
  14. package/dist/components/_form-switches.scss +6 -6
  15. package/dist/components/_form-text-fields.scss +12 -10
  16. package/dist/components/_loader.scss +89 -0
  17. package/dist/components/_modal.scss +36 -0
  18. package/dist/components/_overlay.scss +22 -0
  19. package/dist/components/_pills.scss +9 -11
  20. package/dist/components/_profile-layout.scss +1 -5
  21. package/dist/components/_tables.scss +1 -1
  22. package/dist/components/_toast.scss +19 -25
  23. package/dist/components/_tooltip.scss +2 -2
  24. package/dist/components/accordions.css +3 -3
  25. package/dist/components/badge.css +12 -10
  26. package/dist/components/banner.css +2 -10
  27. package/dist/components/buttons.css +11 -5
  28. package/dist/components/circle-buttons.css +6 -6
  29. package/dist/components/dropdown-options.css +115 -0
  30. package/dist/components/dropdown.css +29 -154
  31. package/dist/components/form-booleans.css +8 -8
  32. package/dist/components/form-character-count.css +2 -2
  33. package/dist/components/form-elements.css +4 -4
  34. package/dist/components/form-hints.css +3 -2
  35. package/dist/components/form-input-composite.css +1 -1
  36. package/dist/components/form-labels.css +2 -2
  37. package/dist/components/form-switches.css +6 -6
  38. package/dist/components/form-text-fields.css +12 -10
  39. package/dist/components/loader.css +85 -0
  40. package/dist/components/modal.css +32 -0
  41. package/dist/components/overlay.css +18 -0
  42. package/dist/components/pills.css +9 -11
  43. package/dist/components/profile-layout.css +1 -5
  44. package/dist/components/tables.css +1 -1
  45. package/dist/components/toast.css +19 -25
  46. package/dist/components/tooltip.css +2 -2
  47. package/dist/wwt-bsds-preset.js +5 -2
  48. package/dist/wwt-bsds-wc-base.css +110 -15
  49. package/dist/wwt-bsds.css +408 -201
  50. package/dist/wwt-bsds.min.css +1 -1
  51. package/package.json +1 -1
@@ -1,11 +1,11 @@
1
1
  @mixin accordions() {
2
2
  .bs-accordion {
3
3
  --accordion-link-color: var(--bs-purple-400);
4
- --accordion-link-outline-color: var(--bs-blue-400);
4
+ --accordion-link-outline-color: var(--bs-blue-base);
5
5
  --accordion-outline-color: transparent;
6
6
  --accordion-padding-inline: 0;
7
7
  --accordion-text-size: var(--bs-text-sm);
8
- border-block: 1px solid var(--bs-border);
8
+ border-block: 1px solid var(--bs-border-base);
9
9
  display: block;
10
10
  }
11
11
 
@@ -38,7 +38,7 @@
38
38
  }
39
39
 
40
40
  .bs-accordion :where(header button:focus-visible) {
41
- --accordion-outline-color: var(--bs-blue-400);
41
+ --accordion-outline-color: var(--bs-blue-base);
42
42
  }
43
43
 
44
44
  .bs-accordion :where(header button) > * {
@@ -1,8 +1,13 @@
1
1
  @mixin badge() {
2
- .bs-badge[data-position^='left']::before,
2
+ .bs-badge {
3
+ --badge-bg: var(--bs-red-base);
4
+ --badge-text: var(--bs-white);
5
+ }
6
+
7
+ .bs-badge[data-position^='left']::before,
3
8
  .bs-badge:where(:not([data-position^='left']))::after {
4
9
  align-items: center;
5
- background: var(--bs-red-500);
10
+ background: var(--badge-bg);
6
11
  border-radius: 0.5rem;
7
12
  content: '';
8
13
  display: inline-flex;
@@ -24,7 +29,7 @@
24
29
 
25
30
  .bs-badge[data-count]:where([data-position^='left'])::before,
26
31
  .bs-badge[data-count]:where(:not([data-position^='left']))::after {
27
- color: white;
32
+ color: var(--badge-text);
28
33
  content: attr(data-count);
29
34
  min-height: 1rem;
30
35
  min-width: 1rem;
@@ -52,15 +57,12 @@
52
57
  display: inline-flex;
53
58
  }
54
59
 
55
- .bs-badge[data-badge-color^='blue']::before,
56
- .bs-badge[data-badge-color^='blue']::after {
57
- background: var(--bs-blue-500);
60
+ .bs-badge[data-badge-color^='blue'] {
61
+ --badge-bg: var(--bs-blue-base);
58
62
  }
59
-
60
- .bs-badge[data-badge-color^='white']::before,
61
- .bs-badge[data-badge-color^='white']::after {
62
- background: white;
63
- color: var(--badge-text, var(--bs-black));
63
+ .bs-badge[data-badge-color^='white'] {
64
+ --badge-bg: var(--bs-white);
65
+ --badge-text: var(--bs-black);
64
66
  }
65
67
 
66
68
  }
@@ -1,6 +1,6 @@
1
1
  @mixin banner() {
2
2
  .bs-banner {
3
- background-color: var(--bs-bg-invert-subtle);
3
+ background-color: var(--bs-royal-400);
4
4
  color: var(--bs-gray-100);
5
5
  display: flex;
6
6
  justify-content: center;
@@ -14,10 +14,6 @@
14
14
  display: none;
15
15
  }
16
16
 
17
- :where(.dark) .bs-banner {
18
- color: var(--bs-black);
19
- }
20
-
21
17
  .bs-banner :where(.bs-banner-content) {
22
18
  align-items: center;
23
19
  display: flex;
@@ -38,14 +34,10 @@
38
34
  }
39
35
 
40
36
  .bs-banner :where(.bs-banner-content p a) {
41
- color: var(--bs-pink-200);
37
+ color: var(--bs-pink-light);
42
38
  text-decoration: none;
43
39
  }
44
40
 
45
- :where(.dark) .bs-banner :where(.bs-banner-content p a) {
46
- color: var(--bs-pink-500);
47
- }
48
-
49
41
  .bs-banner :where(.bs-banner-content p a:hover) {
50
42
  text-decoration: underline;
51
43
  }
@@ -1,8 +1,10 @@
1
1
  @mixin buttons() {
2
2
  .bs-button {
3
- --btn-main: var(--bs-blue-400);
4
- --btn-secondary: var(--bs-blue-300);
3
+ --btn-main: var(--bs-blue-base);
4
+ --btn-secondary: var(--bs-blue-medium);
5
5
  --btn-highlight: var(--bs-blue-100);
6
+ --btn-padding: var(--bs-space-1) var(--bs-space-4) calc(var(--bs-space-1) * 1.5);
7
+ --btn-focus-pseudo-width: calc(100% + 0.5rem);
6
8
  align-items: center;
7
9
  background-color: var(--btn-main);
8
10
  border: none;
@@ -15,7 +17,7 @@
15
17
  justify-content: center;
16
18
  line-height: 1.5;
17
19
  outline: 2px solid transparent;
18
- padding: var(--bs-space-1) var(--bs-space-4) calc(var(--bs-space-1) * 1.5);
20
+ padding: var(--btn-padding);
19
21
  position: relative;
20
22
  text-decoration: none;
21
23
  transition: all 100ms ease-in-out;
@@ -42,9 +44,11 @@
42
44
  content: '';
43
45
  height: calc(100% + 0.5rem);
44
46
  inset: -0.25rem;
47
+ left: auto;
45
48
  position: absolute;
49
+ right: auto;
46
50
  transition: border-color 0.125s ease-in-out;
47
- width: calc(100% + 0.5rem);
51
+ width: var(--btn-focus-pseudo-width);
48
52
  }
49
53
 
50
54
  .bs-button:focus::before {
@@ -116,6 +120,8 @@
116
120
 
117
121
  /* Text Button */
118
122
  .bs-button:where([data-text]) {
123
+ --btn-padding: 0 0;
124
+ --btn-focus-pseudo-width: calc(100% + 1.25rem); /* text btns don't have side padding, but we do want focus outline to look padded */
119
125
  background-color: transparent;
120
126
  color: var(--bs-blue-500);
121
127
  cursor: pointer;
@@ -124,7 +130,7 @@
124
130
  line-height: 150%;
125
131
  }
126
132
  .bs-button:where([data-text]):hover {
127
- color: var(--bs-blue-400);
133
+ color: var(--bs-blue-base);
128
134
  background-color: transparent;
129
135
  text-decoration: underline;
130
136
  }
@@ -1,8 +1,8 @@
1
1
  @mixin circle-buttons() {
2
2
  .bs-circle-button {
3
- --btn-main: var(--bs-blue-400);
4
- --btn-secondary: var(--bs-blue-300);
5
- --btn-highlight: var(--bs-blue-100);
3
+ --btn-main: var(--bs-blue-base);
4
+ --btn-secondary: var(--bs-blue-medium);
5
+ --btn-highlight: var(--bs-blue-lightest);
6
6
  --btn-border-color: transparent;
7
7
  --btn-border-radius: 50%;
8
8
  --btn-icon-bg-color: var(--btn-main);
@@ -124,12 +124,12 @@ a.bs-circle-button {
124
124
 
125
125
  /* Disabled State */
126
126
  .bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) /* for links as buttons */ {
127
- --btn-icon-stroke-color: var(--bs-gray-400);
128
- --btn-text-color: var(--bs-gray-400);
127
+ --btn-icon-stroke-color: var(--bs-ink-disabled);
128
+ --btn-text-color: var(--bs-ink-disabled);
129
129
  pointer-events: none;
130
130
  }
131
131
  .bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) :where(.bs-circle-button-icon) {
132
- background-color: var(--bs-gray-200);
132
+ background-color: var(--bs-bg-disabled);
133
133
  }
134
134
 
135
135
  }
@@ -0,0 +1,119 @@
1
+ @mixin dropdown-options() {
2
+ /* Option list */
3
+ .bs-dropdown-options {
4
+ list-style: none;
5
+ padding: 0;
6
+ }
7
+
8
+ .bs-dropdown-options :where(li:first-child) {
9
+ margin-top: 0.5rem;
10
+ }
11
+
12
+ /* Option list item */
13
+ .bs-dropdown-options :where(li) {
14
+ align-items: center;
15
+ border-bottom: 2px solid transparent;
16
+ border-left: 4px solid transparent;
17
+ border-radius: 3px;
18
+ border-right: 2px solid transparent;
19
+ border-top: 2px solid transparent;
20
+ color: var(--bs-ink-base);
21
+ column-gap: 0.5rem;
22
+ cursor: pointer;
23
+ display: grid;
24
+ margin-bottom: 0.5rem;
25
+ padding-bottom: 0.25rem;
26
+ padding-left: 0.5rem;
27
+ padding-right: 0.75rem;
28
+ padding-top: 0.25rem;
29
+ row-gap: 0.125rem;
30
+ }
31
+
32
+ /* Variant: 2-col */
33
+ .bs-dropdown-options :where(li[data-variant~="2-col"]) {
34
+ grid-template-columns: min-content 1fr;
35
+ }
36
+
37
+ /* Variant: description */
38
+ .bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"] :nth-child(2)) {
39
+ color: var(--bs-ink-light);
40
+ font-size: var(--bs-text-xs);
41
+ height: 1.125rem;
42
+ line-height: 1.125rem;
43
+ }
44
+
45
+ /* Variant: 2-col description */
46
+ .bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] :nth-child(3)) {
47
+ color: var(--bs-ink-light);
48
+ font-size: var(--bs-text-xs);
49
+ grid-column-start: 2;
50
+ height: 1.125rem;
51
+ line-height: 1.125rem;
52
+ }
53
+
54
+ /* Hover or data-selected */
55
+ .bs-dropdown-options :where(li:hover),
56
+ .bs-dropdown-options :where(li[data-selected]) {
57
+ background-color: var(--bs-bg-medium);
58
+ border-left: 4px solid var(--bs-blue-base);
59
+ color: var(--bs-blue-base);
60
+ outline: none;
61
+ }
62
+
63
+ /* Variant: negative */
64
+ .bs-dropdown-options :where(li[data-variant~="negative"]:hover),
65
+ .bs-dropdown-options :where(li[data-variant~="negative"][data-selected]),
66
+ .bs-dropdown-options :where(li[data-variant~="negative"][data-selected]:hover) {
67
+ /* 25% alpha version of --bs-red-400 */
68
+ background-color: rgba(248, 169, 170, 0.25);
69
+ border-left: 4px solid var(--bs-red-500);
70
+ color: var(--bs-red-500);
71
+ }
72
+
73
+ /* Hover or data-selected for 2-col/description variants */
74
+ .bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
75
+ .bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
76
+ .bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
77
+ .bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
78
+ color: var(--bs-blue-base);
79
+ }
80
+
81
+ /* Hover or data-selected for negative + 2-col/description variants */
82
+ .bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
83
+ .bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
84
+ .bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
85
+ .bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
86
+ color: var(--bs-red-500);
87
+ }
88
+
89
+ /* List option mouse click focus (do not show) */
90
+ .bs-dropdown-options :where(li:focus:not(:focus-visible)){
91
+ outline: none;
92
+ }
93
+
94
+ /* data-variant="negative" list option mouse click focus (do not show) */
95
+ .bs-dropdown-options :where(li[data-variant~="negative"]:focus:not(:focus-visible)) {
96
+ outline: none;
97
+ }
98
+
99
+ /* List option keyboard navigation focus */
100
+ .bs-dropdown-options :where(li:focus-visible) {
101
+ --focus-border-color: var(--bs-blue-base);
102
+ border: 2px solid var(--focus-border-color);
103
+ outline: none;
104
+ padding-left: 0.625rem;
105
+ }
106
+
107
+ /* Navigation focus on a selected element should preserve 4px left border */
108
+ .bs-dropdown-options :where(li[data-selected]:focus-visible) {
109
+ border-left: 4px solid var(--focus-border-color);
110
+ padding-left: 0.5rem;
111
+ }
112
+
113
+ /* data-variant="negative" list option keyboard navigation focus */
114
+ .bs-dropdown-options :where(li[data-variant~="negative"]:focus-visible) {
115
+ --focus-border-color: var(--bs-red-200);
116
+ }
117
+
118
+ }
119
+
@@ -1,24 +1,21 @@
1
1
  @mixin dropdown() {
2
- /* Positioning the parent */
3
- .bs-dropdown {
2
+ /* Parent */
3
+ .bs-dropdown-parent {
4
4
  display: inline-block;
5
5
  position: relative;
6
6
  }
7
7
 
8
- /* Option list */
9
- .bs-dropdown :where(ul) {
10
- background-color: var(--bs-white);
8
+ /* Content */
9
+ .bs-dropdown {
10
+ background-color: var(--bs-bg-base-elevated);
11
11
  border-radius: 4px;
12
12
  bottom: auto;
13
13
  box-shadow: var(--bs-shadow-contentMedium);
14
14
  line-height: 1.5rem;
15
- list-style: none;
16
15
  margin: 0;
17
16
  max-height: 0;
18
- max-width: 16.875rem;
19
17
  opacity: 0;
20
18
  overflow-y: auto;
21
- padding: 0;
22
19
  position: absolute;
23
20
  top: calc(100% + 0.5rem);
24
21
  transition-duration: 75ms;
@@ -27,167 +24,45 @@
27
24
  z-index: 999;
28
25
  }
29
26
 
30
- /* (not) data-variant="fit" */
31
- .bs-dropdown:not([data-variant="fit"]) :where(ul) {
32
- width: 16.875rem;
33
- }
34
-
35
- /* data-shown */
36
- .bs-dropdown:where([data-shown]) :where(ul) {
37
- max-height: 20rem;
38
- opacity: 1;
39
- padding-top: 0.75rem;
40
- }
41
-
42
- /* data-position="top" */
43
- .bs-dropdown:where([data-position="top"]) :where(ul) {
44
- bottom: calc(100% + 0.5rem);
45
- top: auto;
46
- }
47
-
48
- /* data-justify="center" */
49
- .bs-dropdown:where([data-justify="center"]) :where(ul) {
50
- left: 50%;
51
- transform: translateX(-50%);
52
- }
53
-
54
- /* Option list item */
55
- .bs-dropdown :where(ul li) {
56
- align-items: center;
57
- border-bottom: 2px solid transparent;
58
- border-left: 4px solid transparent;
59
- border-radius: 3px;
60
- border-right: 2px solid transparent;
61
- border-top: 2px solid transparent;
62
- color: var(--bs-ink-base);
63
- column-gap: 0.5rem;
64
- cursor: pointer;
65
- display: grid;
66
- margin-bottom: 0.5rem;
67
- padding-bottom: 0.25rem;
68
- padding-left: 0.5rem;
69
- padding-right: 0.75rem;
70
- padding-top: 0.25rem;
71
- row-gap: 0.125rem;
72
- }
73
-
74
- /* data-variant="search" (search input) */
75
- .bs-dropdown :where(ul li[data-variant~="search"]) {
76
- border-left: none;
77
- cursor: default;
78
- display: block;
79
- }
80
-
81
- /* data-variant="break" (list item) */
82
- .bs-dropdown :where(ul li[data-variant~="break"]) {
83
- border-left: none;
84
- cursor: default;
85
- display: block;
86
- padding: 0;
87
- }
88
-
89
- /* data-variant="break" (actual line break) */
90
- .bs-dropdown :where(ul li[data-variant~="break"] hr) {
91
- background: var(--bs-navy-200);
92
- }
93
-
94
- /* data-variant="2-col" */
95
- .bs-dropdown :where(ul li[data-variant~="2-col"]) {
96
- grid-template-columns: min-content 1fr;
97
- }
98
-
99
- /* data-variant="description" */
100
- /* Description will be the 2nd child in a 1-column item */
101
- .bs-dropdown :where(ul li:not([data-variant~="2-col"])[data-variant~="description"] :nth-child(2)) {
102
- color: var(--bs-ink-light);
103
- font-size: var(--bs-text-xs);
104
- height: 1.125rem;
105
- line-height: 1.125rem;
106
- }
107
-
108
- /* data-variant="2-col description" */
109
- /* Description will be the 3rd child in a 2-column item */
110
- .bs-dropdown :where(ul li[data-variant~="2-col"][data-variant~="description"] :nth-child(3)) {
111
- color: var(--bs-ink-light);
112
- font-size: var(--bs-text-xs);
113
- grid-column-start: 2;
114
- height: 1.125rem;
115
- line-height: 1.125rem;
116
- }
117
-
118
- /* List item hover or data-selected */
119
- .bs-dropdown :where(ul li:hover),
120
- .bs-dropdown :where(ul li[data-selected]) {
121
- background-color: var(--bs-bg-subtle);
122
- border-left: 4px solid var(--bs-blue-400);
123
- color: var(--bs-blue-400);
124
- outline: none;
27
+ /* Sizing */
28
+ .bs-dropdown:where([data-width="sm"]) {
29
+ width: 10rem;
125
30
  }
126
31
 
127
- /* data-variant="search" or data-variant="break" hover */
128
- .bs-dropdown :where(ul li[data-variant~="search"]:hover),
129
- .bs-dropdown :where(ul li[data-variant~="break"]:hover) {
130
- background-color: transparent;
131
- border-left: none;
132
- color: var(--bs-ink-base);
32
+ .bs-dropdown:where([data-width="md"]),
33
+ .bs-dropdown:where(:not([data-width])) {
34
+ width: 20rem;
133
35
  }
134
36
 
135
- /* data-variant="negative" hover, data-selected, and both */
136
- .bs-dropdown :where(ul li[data-variant~="negative"]:hover),
137
- .bs-dropdown :where(ul li[data-variant~="negative"][data-selected]),
138
- .bs-dropdown :where(ul li[data-variant~="negative"][data-selected]:hover) {
139
- /* 25% alpha version of --bs-red-400 */
140
- background-color: rgba(248, 169, 170, 0.25);
141
- border-left: 4px solid var(--bs-red-500);
142
- color: var(--bs-red-500);
37
+ .bs-dropdown:where([data-width="lg"]) {
38
+ width: 40rem;
143
39
  }
144
40
 
145
- /* data-variant="description" or data-variant="2-col description" hover or data-selected */
146
- .bs-dropdown :where(ul li:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
147
- .bs-dropdown :where(ul li[data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
148
- .bs-dropdown :where(ul li:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
149
- .bs-dropdown :where(ul li[data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
150
- color: var(--bs-blue-400);
41
+ .bs-dropdown:where([data-width="content"]) {
42
+ width: auto;
151
43
  }
152
44
 
153
- /* data-variant="negative description" or data-variant="2-col negative description" hover or data-selected */
154
- .bs-dropdown :where(ul li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
155
- .bs-dropdown :where(ul li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
156
- .bs-dropdown :where(ul li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
157
- .bs-dropdown :where(ul li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
158
- color: var(--bs-red-500);
45
+ .bs-dropdown-parent:where([data-width="toggle"]) :where(.bs-dropdown) {
46
+ width: 100%;
159
47
  }
160
48
 
161
- /* List option mouse click focus (do not show) */
162
- .bs-dropdown :where(ul li:focus:not(:focus-visible)){
163
- outline: none;
164
- }
165
-
166
- /* data-variant="negative" list option mouse click focus (do not show) */
167
- li[data-variant~="negative"]:focus:not(:focus-visible) {
168
- outline: none;
169
- }
170
-
171
- /* List option keyboard navigation focus */
172
- .bs-dropdown :where(ul li:focus-visible) {
173
- --focus-border-color: var(--bs-blue-400);
174
- border: 2px solid var(--focus-border-color);
175
- outline: none;
176
- padding-left: 0.625rem;
49
+ /* data-shown */
50
+ .bs-dropdown:where([data-shown]) {
51
+ max-height: 20rem;
52
+ opacity: 1;
177
53
  }
178
54
 
179
- /* Navigation focus on a selected element should preserve 4px left border */
180
- .bs-dropdown :where(ul li[data-selected]:focus-visible) {
181
- border-left: 4px solid var(--focus-border-color);
182
- padding-left: 0.5rem;
55
+ /* data-top */
56
+ .bs-dropdown:where([data-top]) {
57
+ bottom: calc(100% + 0.5rem);
58
+ top: auto;
183
59
  }
184
60
 
185
- /* data-variant="negative" list option keyboard navigation focus */
186
- .bs-dropdown :where(ul li[data-variant~="negative"]:focus-visible) {
187
- --focus-border-color: var(--bs-red-200);
61
+ /* data-justify="center" */
62
+ .bs-dropdown-parent:where([data-center]) :where(.bs-dropdown) {
63
+ left: 50%;
64
+ transform: translateX(-50%);
188
65
  }
189
66
 
190
-
191
-
192
67
  }
193
68
 
@@ -55,7 +55,7 @@
55
55
  :where(input[type='checkbox'], input[type='radio']):focus-visible {
56
56
  box-shadow: inset 0 0 0 0.125rem var(--box-shadow),
57
57
  0 0 0 2px var(--offset-color, var(--bs-bg-base)),
58
- 0 0 0 4px var(--outline-color, var(--bs-blue-400));
58
+ 0 0 0 4px var(--outline-color, var(--bs-blue-base));
59
59
  outline: 2px solid transparent;
60
60
  }
61
61
 
@@ -70,7 +70,7 @@
70
70
  /* Checkbox's checkmark */
71
71
  input:where([type='checkbox'])::before {
72
72
  --filled-size: 1rem;
73
- --check-fill-color: var(--bs-blue-400);
73
+ --check-fill-color: var(--bs-blue-base);
74
74
 
75
75
  content: '';
76
76
  border-radius: 0.125rem;
@@ -105,7 +105,7 @@ input:where([type='checkbox']):where(:indeterminate)::after {
105
105
  /* Radio's dot */
106
106
  input:where([type='radio'])::before {
107
107
  --filled-size: 1rem;
108
- --radio-fill-color: var(--bs-blue-400);
108
+ --radio-fill-color: var(--bs-blue-base);
109
109
 
110
110
  background-color: var(--radio-fill-color);
111
111
  border-radius: 50%;
@@ -160,26 +160,26 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
160
160
  /* Disabled State */
161
161
 
162
162
  input:where([type='checkbox'], [type='radio']):disabled {
163
- --box-shadow: var(--bs-gray-400);
163
+ --box-shadow: var(--bs-bg-disabled);
164
164
  background-color: transparent;
165
165
  cursor: default;
166
166
  }
167
167
 
168
168
  input:where([type='checkbox']):checked:disabled::before,
169
169
  input:where([type='checkbox']):indeterminate:disabled::before {
170
- --check-fill-color: var(--bs-gray-400);
170
+ --check-fill-color: var(--bs-bg-disabled);
171
171
  }
172
172
 
173
173
  input:where([type='radio']):checked:disabled::before {
174
- --radio-fill-color: var(--bs-gray-400);
174
+ --radio-fill-color: var(--bs-bg-disabled);
175
175
  }
176
176
 
177
177
 
178
178
  /* Error state */
179
179
 
180
180
  input:where([type='checkbox'], [type='radio'])[data-error] {
181
- --box-shadow: var(--bs-red-500);
182
- --outline-color: var(--bs-red-200);
181
+ --box-shadow: var(--bs-red-base);
182
+ --outline-color: var(--bs-red-base);
183
183
  }
184
184
 
185
185
  }
@@ -10,11 +10,11 @@
10
10
  :where([disabled], [data-disabled]) + .bs-character-count,
11
11
  :where([disabled], [data-disabled]) .bs-character-count,
12
12
  .bs-character-count:where([data-disabled]) {
13
- color: var(--bs-gray-400);
13
+ color: var(--bs-ink-disabled);
14
14
  }
15
15
 
16
16
  .bs-character-count:where([data-error]) {
17
- color: var(--bs-red-400);
17
+ color: var(--bs-ink-red);
18
18
  }
19
19
 
20
20
  }
@@ -1,7 +1,7 @@
1
1
  @mixin form-elements() {
2
2
  /* Generally applicable (all input types) */
3
3
  :where([data-required]) {
4
- color: var(--bs-red-500);
4
+ color: var(--bs-ink-red);
5
5
  font-weight: var(--bs-font-bold, 600);
6
6
  }
7
7
 
@@ -10,15 +10,15 @@
10
10
  }
11
11
 
12
12
  :where(.box) :is(input, textarea, select):where(:focus-visible) {
13
- --offset-color: var(--bs-bg-subtle);
13
+ --offset-color: var(--bs-bg-medium);
14
14
  }
15
15
  :where(.box[data-invert]) :is(input, textarea, select):where(:focus-visible) {
16
- --offset-color: var(--bs-bg-invert);
16
+ --offset-color: var(--bs-bg-invert-base);
17
17
  }
18
18
 
19
19
  /* Errors and Messages */
20
20
  :is(input, select, textarea):where([data-error]) {
21
- --input-border: var(--bs-red-500);
21
+ --input-border: var(--bs-ink-red);
22
22
  }
23
23
 
24
24
  /* Fieldset */
@@ -1,7 +1,8 @@
1
1
  @mixin form-hints() {
2
2
  .bs-hint {
3
+ --hint-color: var(--bs-ink-light);
3
4
  min-width: 0;
4
- color: var(--bs-ink-light);
5
+ color: var(--hint-color);
5
6
  font-size: var(--bs-text-xs);
6
7
  padding: 0;
7
8
  margin: 0;
@@ -10,7 +11,7 @@
10
11
  }
11
12
 
12
13
  .bs-hint:where([data-error]) {
13
- color: var(--bs-red-400);
14
+ --hint-color: var(--bs-ink-red);
14
15
  }
15
16
 
16
17
  }
@@ -128,7 +128,7 @@ and issues with box-sizing
128
128
 
129
129
  /* -------- Focus styles -------- */
130
130
  .bs-input-addon {
131
- --focus-border: var(--bs-blue-400);
131
+ --focus-border: var(--bs-blue-base);
132
132
  }
133
133
 
134
134
  .bs-input-addon:where(:not([data-multifocus]):focus-within),
@@ -11,11 +11,11 @@
11
11
  }
12
12
 
13
13
  :where([data-required]) {
14
- color: var(--bs-red-500);
14
+ color: var(--bs-ink-red);
15
15
  }
16
16
 
17
17
  :where(label[data-disabled], [data-disabled] [data-required], [data-disabled] label) {
18
- --label-color: var(--bs-ink-light);
18
+ --label-color: var(--bs-ink-disabled);
19
19
  }
20
20
 
21
21
  }