elixir-toolkit-theme 2.1.0 → 2.2.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (86) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/contributor-carousel-selection.html +2 -3
  3. data/_includes/contributor-minitiles-page.html +2 -3
  4. data/_includes/contributor-tiles-all.html +2 -3
  5. data/_includes/news.html +1 -1
  6. data/_includes/resource-table-all.html +1 -1
  7. data/_includes/section-navigation-tiles.html +20 -2
  8. data/_includes/toc.html +1 -1
  9. data/_layouts/default.html +2 -2
  10. data/_layouts/page.html +1 -1
  11. data/_sass/bootstrap/_accordion.scss +9 -0
  12. data/_sass/bootstrap/_alert.scss +8 -11
  13. data/_sass/bootstrap/_button-group.scss +2 -2
  14. data/_sass/bootstrap/_buttons.scss +3 -3
  15. data/_sass/bootstrap/_card.scss +5 -0
  16. data/_sass/bootstrap/_carousel.scss +20 -2
  17. data/_sass/bootstrap/_close.scss +32 -9
  18. data/_sass/bootstrap/_dropdown.scss +1 -0
  19. data/_sass/bootstrap/_functions.scss +1 -1
  20. data/_sass/bootstrap/_grid.scss +6 -0
  21. data/_sass/bootstrap/_helpers.scss +2 -0
  22. data/_sass/bootstrap/_list-group.scss +12 -7
  23. data/_sass/bootstrap/_maps.scss +120 -0
  24. data/_sass/bootstrap/_mixins.scss +1 -2
  25. data/_sass/bootstrap/_nav.scss +42 -17
  26. data/_sass/bootstrap/_navbar.scss +15 -4
  27. data/_sass/bootstrap/_offcanvas.scss +4 -2
  28. data/_sass/bootstrap/_pagination.scss +1 -1
  29. data/_sass/bootstrap/_progress.scss +10 -1
  30. data/_sass/bootstrap/_reboot.scss +7 -7
  31. data/_sass/bootstrap/_root.scss +121 -10
  32. data/_sass/bootstrap/_tables.scss +18 -11
  33. data/_sass/bootstrap/_tooltip.scss +4 -5
  34. data/_sass/bootstrap/_utilities.scss +172 -13
  35. data/_sass/bootstrap/_variables-dark.scss +85 -0
  36. data/_sass/bootstrap/_variables.scss +268 -157
  37. data/_sass/bootstrap/bootstrap-grid.scss +1 -3
  38. data/_sass/bootstrap/bootstrap-reboot.scss +1 -0
  39. data/_sass/bootstrap/bootstrap-utilities.scss +1 -0
  40. data/_sass/bootstrap/bootstrap.scss +1 -0
  41. data/_sass/bootstrap/forms/_floating-labels.scss +23 -3
  42. data/_sass/bootstrap/forms/_form-check.scss +25 -12
  43. data/_sass/bootstrap/forms/_form-control.scss +24 -4
  44. data/_sass/bootstrap/forms/_form-range.scss +3 -3
  45. data/_sass/bootstrap/forms/_form-select.scss +12 -3
  46. data/_sass/bootstrap/forms/_input-group.scss +1 -1
  47. data/_sass/bootstrap/helpers/_color-bg.scss +1 -4
  48. data/_sass/bootstrap/helpers/_colored-links.scss +20 -2
  49. data/_sass/bootstrap/helpers/_focus-ring.scss +5 -0
  50. data/_sass/bootstrap/helpers/_icon-link.scss +25 -0
  51. data/_sass/bootstrap/helpers/_vr.scss +1 -1
  52. data/_sass/bootstrap/mixins/_alert.scss +4 -1
  53. data/_sass/bootstrap/mixins/_banner.scss +2 -4
  54. data/_sass/bootstrap/mixins/_caret.scss +30 -25
  55. data/_sass/bootstrap/mixins/_color-mode.scss +21 -0
  56. data/_sass/bootstrap/mixins/_forms.scss +8 -7
  57. data/_sass/bootstrap/mixins/_list-group.scss +2 -0
  58. data/_sass/bootstrap/mixins/_utilities.scss +1 -1
  59. data/_sass/bootstrap/mixins/_visually-hidden.scss +5 -1
  60. data/_sass/bootstrap/tests/jasmine.js +16 -0
  61. data/_sass/bootstrap/tests/mixins/_color-modes.test.scss +69 -0
  62. data/_sass/bootstrap/tests/mixins/_media-query-color-mode-full.test.scss +8 -0
  63. data/_sass/bootstrap/tests/mixins/_utilities.test.scss +393 -0
  64. data/_sass/bootstrap/tests/sass-true/register.js +14 -0
  65. data/_sass/bootstrap/tests/sass-true/runner.js +17 -0
  66. data/_sass/bootstrap/tests/utilities/_api.test.scss +75 -0
  67. data/_sass/bootstrap/vendor/_rfs.scss +23 -29
  68. data/assets/css/all.min.css +6 -3
  69. data/assets/css/dataTables.bootstrap5.min.css +2 -2
  70. data/assets/css/main.scss +30 -4
  71. data/assets/js/anchor.min.js +3 -3
  72. data/assets/js/bootstrap.bundle.min.js +3 -3
  73. data/assets/js/bootstrap.bundle.min.js.map +1 -1
  74. data/assets/js/dataTables.bootstrap5.min.js +4 -14
  75. data/assets/js/jquery.dataTables.min.js +4 -187
  76. data/assets/js/jquery.min.js +2 -2
  77. data/assets/js/jquery.min.map +1 -1
  78. data/assets/webfonts/fa-brands-400.ttf +0 -0
  79. data/assets/webfonts/fa-brands-400.woff2 +0 -0
  80. data/assets/webfonts/fa-regular-400.ttf +0 -0
  81. data/assets/webfonts/fa-regular-400.woff2 +0 -0
  82. data/assets/webfonts/fa-solid-900.ttf +0 -0
  83. data/assets/webfonts/fa-solid-900.woff2 +0 -0
  84. data/assets/webfonts/fa-v4compatibility.ttf +0 -0
  85. data/assets/webfonts/fa-v4compatibility.woff2 +0 -0
  86. metadata +13 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 50a883750f43ede5fd36322883070d37f2412df14e49a8f33f583a22db9754e5
4
- data.tar.gz: 3f1b7a3e937a1e8ca8d9cd0a5574091123f79683cb62754331a962f257465383
3
+ metadata.gz: e1b6d3b88355ec78a43d3231a148ecfae87db2d2ef773e0ed037b0cb920617eb
4
+ data.tar.gz: 6b7aba7982ac861c5e7a986624068d00ebdec54c959497317649f12aaf0e1c0f
5
5
  SHA512:
6
- metadata.gz: 137897f2f78de213f470e7cc70b7b48919445bb7272566e73dfe43e0dc30b1dd7e43ede5b3d7d836a89dfb4cd955611bec4836a563ad6fba350cca16436a4f5f
7
- data.tar.gz: 667a09391c125561515a0dc32cd0ce558a5615b6f47052769b70fbd088bada7303f70a1dc13e2a7d7d00623d2be0f21daa1551a79077f1a19542b6c07968c04a
6
+ metadata.gz: 7613fbf270abcc1b23b56c2534448d4c8cf40900ae981705a180697506ff7561d24f0894065666f9fdb64070c543ac29c435be332220d736c83429501ce8a874
7
+ data.tar.gz: b2f8db2f2bdaec0e20a065ce6de3493bf1ada4852450b20a86dcb2bc716493b9c6ebaa689b2091efec0d8ab28899b44d808d313bc3794f3d8e644adf65ec5b25
@@ -33,10 +33,9 @@
33
33
  {%- endif %}
34
34
  {%- endfor %}
35
35
  {%- endif %}
36
- {%- unless include.sort == false %}
37
- {%- assign allcontributors = allcontrstr | split: ", " | uniq | sort %}
38
- {%- else %}
39
36
  {%- assign allcontributors = allcontrstr | split: ", " | uniq %}
37
+ {%- unless include.sort == false %}
38
+ {%- assign allcontributors = allcontributors | sort %}
40
39
  {%- endunless %}
41
40
  <div id="contributors-carousel" class="carousel carousel-dark slide my-4" data-ride="carousel" data-bs-interval="7000">
42
41
  <div class="carousel-inner">
@@ -2,10 +2,9 @@
2
2
  <span class="d-block h2-like fs-2">Contributors</span>
3
3
  <div class="p-4 rounded mt-4 page-contributors d-flex flex-wrap gap-2">
4
4
  {%- assign contributors = site.data.CONTRIBUTORS %}
5
- {%- unless include.sort == false %}
6
- {%- assign page_contributors = page.contributors | sort %}
7
- {%- else %}
8
5
  {%- assign page_contributors = page.contributors %}
6
+ {%- unless include.sort == false %}
7
+ {%- assign page_contributors = page_contributors | sort %}
9
8
  {%- endunless %}
10
9
  {%- for contributor in page_contributors %}
11
10
  {%- assign id = contributors[contributor].git | default: 'no_github' %}
@@ -33,10 +33,9 @@
33
33
  {%- endif %}
34
34
  {%- endfor %}
35
35
  {%- endif %}
36
- {%- unless include.sort == false %}
37
- {%- assign allcontributors = allcontrstr | split: ", " | uniq | sort %}
38
- {%- else %}
39
36
  {%- assign allcontributors = allcontrstr | split: ", " | uniq %}
37
+ {%- unless include.sort == false %}
38
+ {%- assign allcontributors = allcontributors | sort %}
40
39
  {%- endunless %}
41
40
  <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-xl-{{nr}} g-4 contributor-cards">
42
41
  {%- for contributor in allcontributors %}
data/_includes/news.html CHANGED
@@ -8,7 +8,7 @@
8
8
  {%- for new in news reversed%}
9
9
  <li>
10
10
  <span class="title mb-1">{{ new.name | escape }}</span>
11
- <p class="text-muted"><i class="far fa-calendar me-2"></i><time>{{ new.date | date_to_long_string }}</time>{% if new.linked_pr %} - <i class="fa-solid fa-code-branch"></i><a href="{{ site.github.repository_url | append: '/pull/' | append: new.linked_pr }}">{{new.linked_pr }}</a>{% endif %}</p>
11
+ <p class="text-muted"><i class="far fa-calendar me-2"></i><time>{{ new.date | date_to_long_string }}</time>{% if new.linked_pr %} - <i class="fa-solid fa-code-branch me-2"></i><a href="{{ site.github.repository_url | append: '/pull/' | append: new.linked_pr }}">{{new.linked_pr }}</a>{% endif %}</p>
12
12
  {%- if new.description %}
13
13
  {%- assign word_count = new.description | split: " " | size %}
14
14
  {%- if include.truncate == true and word_count > 40 %}
@@ -95,7 +95,7 @@
95
95
  </tr>
96
96
  {%- endfor %}
97
97
  {%- unless total_county_tools == 0 or include.tag == nil %}
98
- <tr class="collapse multi-collapse bg-light" id="resource_title">
98
+ <tr class="collapse multi-collapse table-light" id="resource_title">
99
99
  <td colspan="4"><b>National resources</b></td>
100
100
  </tr>
101
101
  {%- endunless %}
@@ -47,11 +47,29 @@
47
47
  </div>
48
48
  {%- endunless %}
49
49
  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-{{ include.col | default: 2 }} g-4 mb-5 navigation-tiles">
50
- {%- for current_page in site.pages | sorted %}
50
+ {%- if include.custom %}
51
+ {%- assign related_pages = include.custom | split: ", " %}
52
+ {%- unless include.sort == false %}
53
+ {%- assign related_pages = related_pages | sort %}
54
+ {%- endunless %}
55
+ {%- elsif include.type %}
56
+ {%- assign related_pages = site.pages | where:"type", include.type %}
57
+ {%- else %}
58
+ {%- assign related_pages = site.pages %}
59
+ {%- endif %}
60
+ {%- unless include.sort == false %}
61
+ {%- assign related_pages = related_pages | sort: 'title'%}
62
+ {%- endunless %}
63
+ {%- for related_page in related_pages %}
64
+ {%- if include.custom %}
65
+ {%- assign current_page = site.pages | where:"page_id", related_page | first %}
66
+ {%- else %}
67
+ {%- assign current_page = related_page %}
68
+ {%- endif %}
51
69
  {%- assign affiliations_classes = "" %}
52
70
  {%- assign related_pages_classes = "" %}
53
71
  {%- assign except = include.except | split: ", " %}
54
- {%- if current_page.title and current_page.search_exclude != true and current_page.type == include.type %}
72
+ {%- if current_page.title and current_page.search_exclude != true %}
55
73
  {%- unless except contains current_page.name %}
56
74
  {%- if current_page.affiliations %}
57
75
  {%- capture affiliations_classes -%}
data/_includes/toc.html CHANGED
@@ -4,7 +4,7 @@
4
4
  $('#toc-contents').toc({ minimumHeaders: {{site.theme_variables.toc.min_headers | default: 2 }}, listType: 'ul', classes: { list: 'list-unstyled' }, noBackToTopLinks: true, showSpeed: 0, headers: '{{site.theme_variables.toc.headers | default: 'main h2' }}' , title: '<strong class="my-2">On this page</strong><hr class="my-2">' });
5
5
  });
6
6
  </script>
7
- <button id="btn-toc-hide" class="btn bg-light d-lg-none hover-primary mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#toc-contents" aria-expanded="true" aria-controls="toc-contents">
7
+ <button id="btn-toc-hide" class="btn bg-light d-xl-none hover-primary mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#toc-contents" aria-expanded="true" aria-controls="toc-contents">
8
8
  <i class="fa-solid fa-up-right-and-down-left-from-center me-2"></i>On this page
9
9
  </button>
10
10
  <nav id="toc-contents" class="collapse" aria-label="Table of contents"></nav>
@@ -1,7 +1,7 @@
1
1
  <!doctype html>
2
2
  <html lang="en">
3
3
  {% include head.html %}
4
- <body class="d-flex flex-column min-vh-100">
4
+ <body class="d-flex flex-column min-vh-100" data-bs-spy="scroll" data-bs-target="#toc-contents" data-bs-smooth-scroll="true" tabindex="0">
5
5
  {% if jekyll.environment == "development" %}{% include dev-info.html %}{% endif %}
6
6
  {% include topnav.html %}
7
7
  <!-- Page Content -->
@@ -17,7 +17,7 @@
17
17
  </div>
18
18
  </div>
19
19
  {%- if site.theme_variables.back_to_top or site.theme_variables.back_to_top == nil %}
20
- <button id="back-to-top" class="btn btn-primary" type="button" aria-hidden="true" onclick="topFunction()">
20
+ <button id="back-to-top" class="btn btn-primary rounded-3" type="button" aria-hidden="true" onclick="topFunction()">
21
21
  <i class="fa-solid fa-arrow-up"></i>
22
22
  </button>
23
23
  {%- endif %}
data/_layouts/page.html CHANGED
@@ -22,7 +22,7 @@ layout: default
22
22
  <div id="toc" class="text-muted sticky-lg-top">
23
23
  {%- include toc.html %}
24
24
  </div>
25
- <div id="content" class="mb-5" data-bs-spy="scroll" data-bs-target="#toc-contents" data-bs-smooth-scroll="true" tabindex="0">
25
+ <div id="content" class="mb-5">
26
26
  {{content}}
27
27
  {% include resource-table-page.html %}
28
28
  {% include related-pages.html %}
@@ -147,3 +147,12 @@
147
147
  }
148
148
  }
149
149
  }
150
+
151
+ @if $enable-dark-mode {
152
+ @include color-mode(dark) {
153
+ .accordion-button::after {
154
+ --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
155
+ --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
156
+ }
157
+ }
158
+ }
@@ -12,6 +12,7 @@
12
12
  --#{$prefix}alert-border-color: transparent;
13
13
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
14
14
  --#{$prefix}alert-border-radius: #{$alert-border-radius};
15
+ --#{$prefix}alert-link-color: inherit;
15
16
  // scss-docs-end alert-css-vars
16
17
 
17
18
  position: relative;
@@ -32,6 +33,7 @@
32
33
  // Provide class for links that match alerts
33
34
  .alert-link {
34
35
  font-weight: $alert-link-font-weight;
36
+ color: var(--#{$prefix}alert-link-color);
35
37
  }
36
38
 
37
39
 
@@ -54,18 +56,13 @@
54
56
 
55
57
 
56
58
  // scss-docs-start alert-modifiers
57
- // Generate contextual modifier classes for colorizing the alert.
58
-
59
- @each $state, $value in $theme-colors {
60
- $alert-background: shift-color($value, $alert-bg-scale);
61
- $alert-border: shift-color($value, $alert-border-scale);
62
- $alert-color: shift-color($value, $alert-color-scale);
63
-
64
- @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
65
- $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
66
- }
59
+ // Generate contextual modifier classes for colorizing the alert
60
+ @each $state in map-keys($theme-colors) {
67
61
  .alert-#{$state} {
68
- @include alert-variant($alert-background, $alert-border, $alert-color);
62
+ --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
63
+ --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
64
+ --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
65
+ --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
69
66
  }
70
67
  }
71
68
  // scss-docs-end alert-modifiers
@@ -39,7 +39,7 @@
39
39
  // Prevent double borders when buttons are next to each other
40
40
  > :not(.btn-check:first-child) + .btn,
41
41
  > .btn-group:not(:first-child) {
42
- margin-left: -$btn-border-width;
42
+ margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
43
43
  }
44
44
 
45
45
  // Reset rounded corners
@@ -126,7 +126,7 @@
126
126
 
127
127
  > .btn:not(:first-child),
128
128
  > .btn-group:not(:first-child) {
129
- margin-top: -$btn-border-width;
129
+ margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
130
130
  }
131
131
 
132
132
  // Reset rounded corners
@@ -10,7 +10,7 @@
10
10
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
11
11
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
12
12
  --#{$prefix}btn-line-height: #{$btn-line-height};
13
- --#{$prefix}btn-color: #{$body-color};
13
+ --#{$prefix}btn-color: #{$btn-color};
14
14
  --#{$prefix}btn-bg: transparent;
15
15
  --#{$prefix}btn-border-width: #{$btn-border-width};
16
16
  --#{$prefix}btn-border-color: transparent;
@@ -169,8 +169,8 @@
169
169
  --#{$prefix}btn-active-border-color: transparent;
170
170
  --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
171
171
  --#{$prefix}btn-disabled-border-color: transparent;
172
- --#{$prefix}btn-box-shadow: none;
173
- --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};
172
+ --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
173
+ --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($link-color), $link-color, 15%))};
174
174
 
175
175
  text-decoration: $link-decoration;
176
176
  @if $enable-gradients {
@@ -7,6 +7,8 @@
7
7
  --#{$prefix}card-spacer-y: #{$card-spacer-y};
8
8
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
9
9
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
10
+ --#{$prefix}card-title-color: #{$card-title-color};
11
+ --#{$prefix}card-subtitle-color: #{$card-subtitle-color};
10
12
  --#{$prefix}card-border-width: #{$card-border-width};
11
13
  --#{$prefix}card-border-color: #{$card-border-color};
12
14
  --#{$prefix}card-border-radius: #{$card-border-radius};
@@ -28,6 +30,7 @@
28
30
  flex-direction: column;
29
31
  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
30
32
  height: var(--#{$prefix}card-height);
33
+ color: var(--#{$prefix}body-color);
31
34
  word-wrap: break-word;
32
35
  background-color: var(--#{$prefix}card-bg);
33
36
  background-clip: border-box;
@@ -73,11 +76,13 @@
73
76
 
74
77
  .card-title {
75
78
  margin-bottom: var(--#{$prefix}card-title-spacer-y);
79
+ color: var(--#{$prefix}card-title-color);
76
80
  }
77
81
 
78
82
  .card-subtitle {
79
83
  margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
80
84
  margin-bottom: 0;
85
+ color: var(--#{$prefix}card-subtitle-color);
81
86
  }
82
87
 
83
88
  .card-text:last-child {
@@ -165,7 +165,6 @@
165
165
  margin-right: $carousel-control-width;
166
166
  margin-bottom: 1rem;
167
167
  margin-left: $carousel-control-width;
168
- list-style: none;
169
168
 
170
169
  [data-bs-target] {
171
170
  box-sizing: content-box;
@@ -210,7 +209,7 @@
210
209
 
211
210
  // Dark mode carousel
212
211
 
213
- .carousel-dark {
212
+ @mixin carousel-dark() {
214
213
  .carousel-control-prev-icon,
215
214
  .carousel-control-next-icon {
216
215
  filter: $carousel-dark-control-icon-filter;
@@ -224,3 +223,22 @@
224
223
  color: $carousel-dark-caption-color;
225
224
  }
226
225
  }
226
+
227
+ .carousel-dark {
228
+ @include carousel-dark();
229
+ }
230
+
231
+ @if $enable-dark-mode {
232
+ @include color-mode(dark) {
233
+ @if $color-mode-type == "media-query" {
234
+ .carousel {
235
+ @include carousel-dark();
236
+ }
237
+ } @else {
238
+ .carousel,
239
+ &.carousel {
240
+ @include carousel-dark();
241
+ }
242
+ }
243
+ }
244
+ }
@@ -4,37 +4,60 @@
4
4
  // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
5
5
 
6
6
  .btn-close {
7
+ // scss-docs-start close-css-vars
8
+ --#{$prefix}btn-close-color: #{$btn-close-color};
9
+ --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
10
+ --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
11
+ --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
12
+ --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
13
+ --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
14
+ --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
15
+ --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
16
+ // scss-docs-end close-css-vars
17
+
7
18
  box-sizing: content-box;
8
19
  width: $btn-close-width;
9
20
  height: $btn-close-height;
10
21
  padding: $btn-close-padding-y $btn-close-padding-x;
11
- color: $btn-close-color;
12
- background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
22
+ color: var(--#{$prefix}btn-close-color);
23
+ background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
13
24
  border: 0; // for button elements
14
25
  @include border-radius();
15
- opacity: $btn-close-opacity;
26
+ opacity: var(--#{$prefix}btn-close-opacity);
16
27
 
17
28
  // Override <a>'s hover style
18
29
  &:hover {
19
- color: $btn-close-color;
30
+ color: var(--#{$prefix}btn-close-color);
20
31
  text-decoration: none;
21
- opacity: $btn-close-hover-opacity;
32
+ opacity: var(--#{$prefix}btn-close-hover-opacity);
22
33
  }
23
34
 
24
35
  &:focus {
25
36
  outline: 0;
26
- box-shadow: $btn-close-focus-shadow;
27
- opacity: $btn-close-focus-opacity;
37
+ box-shadow: var(--#{$prefix}btn-close-focus-shadow);
38
+ opacity: var(--#{$prefix}btn-close-focus-opacity);
28
39
  }
29
40
 
30
41
  &:disabled,
31
42
  &.disabled {
32
43
  pointer-events: none;
33
44
  user-select: none;
34
- opacity: $btn-close-disabled-opacity;
45
+ opacity: var(--#{$prefix}btn-close-disabled-opacity);
35
46
  }
36
47
  }
37
48
 
49
+ @mixin btn-close-white() {
50
+ filter: var(--#{$prefix}btn-close-white-filter);
51
+ }
52
+
38
53
  .btn-close-white {
39
- filter: $btn-close-white-filter;
54
+ @include btn-close-white();
55
+ }
56
+
57
+ @if $enable-dark-mode {
58
+ @include color-mode(dark) {
59
+ .btn-close {
60
+ @include btn-close-white();
61
+ }
62
+ }
40
63
  }
@@ -184,6 +184,7 @@
184
184
  white-space: nowrap; // prevent links from randomly breaking onto new lines
185
185
  background-color: transparent; // For `<button>`s
186
186
  border: 0; // For `<button>`s
187
+ @include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
187
188
 
188
189
  &:hover,
189
190
  &:focus {
@@ -188,7 +188,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
188
188
  );
189
189
 
190
190
  @each $name, $value in $rgb {
191
- $value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
191
+ $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
192
192
  $rgb: map-merge($rgb, ($name: $value));
193
193
  }
194
194
 
@@ -2,6 +2,12 @@
2
2
  //
3
3
  // Rows contain your columns.
4
4
 
5
+ :root {
6
+ @each $name, $value in $grid-breakpoints {
7
+ --#{$prefix}breakpoint-#{$name}: #{$value};
8
+ }
9
+ }
10
+
5
11
  @if $enable-grid-classes {
6
12
  .row {
7
13
  @include make-row();
@@ -1,6 +1,8 @@
1
1
  @import "helpers/clearfix";
2
2
  @import "helpers/color-bg";
3
3
  @import "helpers/colored-links";
4
+ @import "helpers/focus-ring";
5
+ @import "helpers/icon-link";
4
6
  @import "helpers/ratio";
5
7
  @import "helpers/position";
6
8
  @import "helpers/stacks";
@@ -180,13 +180,18 @@
180
180
  // Add modifier classes to change text and background color on individual items.
181
181
  // Organizationally, this must come after the `:hover` states.
182
182
 
183
- @each $state, $value in $theme-colors {
184
- $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
185
- $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
186
- @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
187
- $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
183
+ @each $state in map-keys($theme-colors) {
184
+ .list-group-item-#{$state} {
185
+ --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
186
+ --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
187
+ --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
188
+ --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
189
+ --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
190
+ --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
191
+ --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
192
+ --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
193
+ --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
194
+ --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
188
195
  }
189
-
190
- @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
191
196
  }
192
197
  // scss-docs-end list-group-modifiers
@@ -6,6 +6,90 @@
6
6
  $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
7
7
  // scss-docs-end theme-colors-rgb
8
8
 
9
+ // scss-docs-start theme-text-map
10
+ $theme-colors-text: (
11
+ "primary": $primary-text-emphasis,
12
+ "secondary": $secondary-text-emphasis,
13
+ "success": $success-text-emphasis,
14
+ "info": $info-text-emphasis,
15
+ "warning": $warning-text-emphasis,
16
+ "danger": $danger-text-emphasis,
17
+ "light": $light-text-emphasis,
18
+ "dark": $dark-text-emphasis,
19
+ ) !default;
20
+ // scss-docs-end theme-text-map
21
+
22
+ // scss-docs-start theme-bg-subtle-map
23
+ $theme-colors-bg-subtle: (
24
+ "primary": $primary-bg-subtle,
25
+ "secondary": $secondary-bg-subtle,
26
+ "success": $success-bg-subtle,
27
+ "info": $info-bg-subtle,
28
+ "warning": $warning-bg-subtle,
29
+ "danger": $danger-bg-subtle,
30
+ "light": $light-bg-subtle,
31
+ "dark": $dark-bg-subtle,
32
+ ) !default;
33
+ // scss-docs-end theme-bg-subtle-map
34
+
35
+ // scss-docs-start theme-border-subtle-map
36
+ $theme-colors-border-subtle: (
37
+ "primary": $primary-border-subtle,
38
+ "secondary": $secondary-border-subtle,
39
+ "success": $success-border-subtle,
40
+ "info": $info-border-subtle,
41
+ "warning": $warning-border-subtle,
42
+ "danger": $danger-border-subtle,
43
+ "light": $light-border-subtle,
44
+ "dark": $dark-border-subtle,
45
+ ) !default;
46
+ // scss-docs-end theme-border-subtle-map
47
+
48
+ $theme-colors-text-dark: null !default;
49
+ $theme-colors-bg-subtle-dark: null !default;
50
+ $theme-colors-border-subtle-dark: null !default;
51
+
52
+ @if $enable-dark-mode {
53
+ // scss-docs-start theme-text-dark-map
54
+ $theme-colors-text-dark: (
55
+ "primary": $primary-text-emphasis-dark,
56
+ "secondary": $secondary-text-emphasis-dark,
57
+ "success": $success-text-emphasis-dark,
58
+ "info": $info-text-emphasis-dark,
59
+ "warning": $warning-text-emphasis-dark,
60
+ "danger": $danger-text-emphasis-dark,
61
+ "light": $light-text-emphasis-dark,
62
+ "dark": $dark-text-emphasis-dark,
63
+ ) !default;
64
+ // scss-docs-end theme-text-dark-map
65
+
66
+ // scss-docs-start theme-bg-subtle-dark-map
67
+ $theme-colors-bg-subtle-dark: (
68
+ "primary": $primary-bg-subtle-dark,
69
+ "secondary": $secondary-bg-subtle-dark,
70
+ "success": $success-bg-subtle-dark,
71
+ "info": $info-bg-subtle-dark,
72
+ "warning": $warning-bg-subtle-dark,
73
+ "danger": $danger-bg-subtle-dark,
74
+ "light": $light-bg-subtle-dark,
75
+ "dark": $dark-bg-subtle-dark,
76
+ ) !default;
77
+ // scss-docs-end theme-bg-subtle-dark-map
78
+
79
+ // scss-docs-start theme-border-subtle-dark-map
80
+ $theme-colors-border-subtle-dark: (
81
+ "primary": $primary-border-subtle-dark,
82
+ "secondary": $secondary-border-subtle-dark,
83
+ "success": $success-border-subtle-dark,
84
+ "info": $info-border-subtle-dark,
85
+ "warning": $warning-border-subtle-dark,
86
+ "danger": $danger-border-subtle-dark,
87
+ "light": $light-border-subtle-dark,
88
+ "dark": $dark-border-subtle-dark,
89
+ ) !default;
90
+ // scss-docs-end theme-border-subtle-dark-map
91
+ }
92
+
9
93
  // Utilities maps
10
94
  //
11
95
  // Extends the default `$theme-colors` maps to help create our utilities.
@@ -25,6 +109,17 @@ $utilities-text: map-merge(
25
109
  )
26
110
  ) !default;
27
111
  $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
112
+
113
+ $utilities-text-emphasis-colors: (
114
+ "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
115
+ "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
116
+ "success-emphasis": var(--#{$prefix}success-text-emphasis),
117
+ "info-emphasis": var(--#{$prefix}info-text-emphasis),
118
+ "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
119
+ "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
120
+ "light-emphasis": var(--#{$prefix}light-text-emphasis),
121
+ "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
122
+ ) !default;
28
123
  // scss-docs-end utilities-text-colors
29
124
 
30
125
  // scss-docs-start utilities-bg-colors
@@ -37,18 +132,43 @@ $utilities-bg: map-merge(
37
132
  )
38
133
  ) !default;
39
134
  $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
135
+
136
+ $utilities-bg-subtle: (
137
+ "primary-subtle": var(--#{$prefix}primary-bg-subtle),
138
+ "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
139
+ "success-subtle": var(--#{$prefix}success-bg-subtle),
140
+ "info-subtle": var(--#{$prefix}info-bg-subtle),
141
+ "warning-subtle": var(--#{$prefix}warning-bg-subtle),
142
+ "danger-subtle": var(--#{$prefix}danger-bg-subtle),
143
+ "light-subtle": var(--#{$prefix}light-bg-subtle),
144
+ "dark-subtle": var(--#{$prefix}dark-bg-subtle)
145
+ ) !default;
40
146
  // scss-docs-end utilities-bg-colors
41
147
 
42
148
  // scss-docs-start utilities-border-colors
43
149
  $utilities-border: map-merge(
44
150
  $utilities-colors,
45
151
  (
152
+ "black": to-rgb($black),
46
153
  "white": to-rgb($white)
47
154
  )
48
155
  ) !default;
49
156
  $utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
157
+
158
+ $utilities-border-subtle: (
159
+ "primary-subtle": var(--#{$prefix}primary-border-subtle),
160
+ "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
161
+ "success-subtle": var(--#{$prefix}success-border-subtle),
162
+ "info-subtle": var(--#{$prefix}info-border-subtle),
163
+ "warning-subtle": var(--#{$prefix}warning-border-subtle),
164
+ "danger-subtle": var(--#{$prefix}danger-border-subtle),
165
+ "light-subtle": var(--#{$prefix}light-border-subtle),
166
+ "dark-subtle": var(--#{$prefix}dark-border-subtle)
167
+ ) !default;
50
168
  // scss-docs-end utilities-border-colors
51
169
 
170
+ $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
171
+
52
172
  $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
53
173
 
54
174
  $gutters: $spacers !default;
@@ -10,6 +10,7 @@
10
10
 
11
11
  // Helpers
12
12
  @import "mixins/breakpoints";
13
+ @import "mixins/color-mode";
13
14
  @import "mixins/color-scheme";
14
15
  @import "mixins/image";
15
16
  @import "mixins/resize";
@@ -21,13 +22,11 @@
21
22
  @import "mixins/utilities";
22
23
 
23
24
  // Components
24
- @import "mixins/alert";
25
25
  @import "mixins/backdrop";
26
26
  @import "mixins/buttons";
27
27
  @import "mixins/caret";
28
28
  @import "mixins/pagination";
29
29
  @import "mixins/lists";
30
- @import "mixins/list-group";
31
30
  @import "mixins/forms";
32
31
  @import "mixins/table-variants";
33
32