bootsteam-theme 5.3.0 → 5.3.1

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.
package/docs/forms.html CHANGED
@@ -294,7 +294,7 @@
294
294
  <hr />
295
295
 
296
296
  <fieldset>
297
- <legend>ASP andjQuery Validation Classes</legend>
297
+ <legend>ASP and jQuery Validation Classes</legend>
298
298
 
299
299
  <div class="validation-summary-errors">
300
300
  <ul>
package/docs/plugins.html CHANGED
@@ -88,7 +88,7 @@
88
88
  <hr />
89
89
  <p>TowerSoft</p>
90
90
  </footer>
91
- <script src="https://unpkg.com/slim-select@latest/dist/slimselect.min.js"></script>
91
+ <script src="https://unpkg.com/slim-select@latest/dist/slimselect.js"></script>
92
92
 
93
93
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
94
94
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
@@ -35,12 +35,6 @@
35
35
  $('#summernote-test').summernote();
36
36
  }
37
37
 
38
- if ($.fn.select2) {
39
- $('.select2-test').select2({
40
- width: '100%'
41
- });
42
- }
43
-
44
38
  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
45
39
  $('#not-supported-warning').show();
46
40
  }
package/docs/tables.html CHANGED
@@ -83,6 +83,47 @@
83
83
  </tr>
84
84
  </tbody>
85
85
  </table>
86
+
87
+ <h4>Custom Background Color</h4>
88
+ <p>
89
+ The class <code>table-bg-tertiary</code> is a custom class that
90
+ uses a background color that is slightly darker than the normal
91
+ and auto adjusts with the light and dark.
92
+ </p>
93
+
94
+ <table class="table table-bordered">
95
+ <thead class="table-bg-tertiary">
96
+ <tr>
97
+ <th scope="col">#</th>
98
+ <th scope="col">First</th>
99
+ <th scope="col">Last</th>
100
+ <th scope="col">Handle</th>
101
+ </tr>
102
+ </thead>
103
+ <tbody>
104
+ <tr>
105
+ <th scope="row">1</th>
106
+ <td>Mark</td>
107
+ <td>Otto</td>
108
+ <td>@mdo</td>
109
+ </tr>
110
+ <tr>
111
+ <th scope="row">2</th>
112
+ <td>Jacob</td>
113
+ <td>Thornton</td>
114
+ <td>@fat</td>
115
+ </tr>
116
+ <tr>
117
+ <th scope="row">3</th>
118
+ <td>Larry</td>
119
+ <td>the Bird</td>
120
+ <td>@twitter</td>
121
+ </tr>
122
+ </tbody>
123
+ </table>
124
+
125
+
126
+
86
127
  <h4>Dark</h4>
87
128
  <table class="table table-dark">
88
129
  <thead>
@@ -114,9 +155,42 @@
114
155
  </tr>
115
156
  </tbody>
116
157
  </table>
158
+
159
+
117
160
  <h4>Header Options</h4>
118
161
  <table class="table">
119
- <thead class="thead-dark">
162
+ <thead class="table-dark">
163
+ <tr>
164
+ <th scope="col">#</th>
165
+ <th scope="col">First</th>
166
+ <th scope="col">Last</th>
167
+ <th scope="col">Handle</th>
168
+ </tr>
169
+ </thead>
170
+ <tbody>
171
+ <tr>
172
+ <th scope="row">1</th>
173
+ <td>Mark</td>
174
+ <td>Otto</td>
175
+ <td>@mdo</td>
176
+ </tr>
177
+ <tr>
178
+ <th scope="row">2</th>
179
+ <td>Jacob</td>
180
+ <td>Thornton</td>
181
+ <td>@fat</td>
182
+ </tr>
183
+ <tr>
184
+ <th scope="row">3</th>
185
+ <td>Larry</td>
186
+ <td>the Bird</td>
187
+ <td>@twitter</td>
188
+ </tr>
189
+ </tbody>
190
+ </table>
191
+
192
+ <table class="table">
193
+ <thead class="table-light">
120
194
  <tr>
121
195
  <th scope="col">#</th>
122
196
  <th scope="col">First</th>
@@ -147,7 +221,7 @@
147
221
  </table>
148
222
 
149
223
  <table class="table">
150
- <thead class="thead-light">
224
+ <thead class="bg-body-tertiary">
151
225
  <tr>
152
226
  <th scope="col">#</th>
153
227
  <th scope="col">First</th>
@@ -176,6 +250,8 @@
176
250
  </tr>
177
251
  </tbody>
178
252
  </table>
253
+
254
+
179
255
  <h4>Striped Light</h4>
180
256
  <table class="table table-striped">
181
257
  <thead>
@@ -79,8 +79,8 @@
79
79
  <p><em>This line rendered as italicized text.</em></p>
80
80
  </div>
81
81
 
82
- <div class="col-12 col-sm-4">
83
- <h4>Emphasis classes</h4>
82
+ <div class="col-12 col-sm-4 mb-3">
83
+ <h4>Text Colors</h4>
84
84
  <p class="text-primary">text-primary - Lorem ipsum dolor sit amet</p>
85
85
  <p class="text-secondary">text-secondary - Lorem ipsum dolor sit amet</p>
86
86
  <p class="text-success">text-success - Lorem ipsum dolor sit amet</p>
@@ -93,7 +93,7 @@
93
93
  <p class="text-faded">text-faded - Custom class that uses opacity instead of changing the font color</p>
94
94
  </div>
95
95
 
96
- <div class="col-12 col-sm-4">
96
+ <div class="col-12 col-sm-4 mb-3">
97
97
  <h4>Display Headings</h4>
98
98
  <div class="display-1">Display 1</div>
99
99
  <div class="display-2">Display 2</div>
@@ -101,8 +101,19 @@
101
101
  <div class="display-4">Display 4</div>
102
102
  <div class="display-5">Display 5</div>
103
103
  <div class="display-6">Display 6</div>
104
+ </div>
104
105
 
105
- <em class="mt-2 d-block small">display-5 and display-6 are custom classes and are not normally in Bootstrap</em>
106
+ <div class="col-12 col-sm-4 mb-3">
107
+ <h4>Link Colors</h4>
108
+ <p><a href="#" class="link-primary">link-primary</a></p>
109
+ <p><a href="#" class="link-secondary">link-secondary</a></p>
110
+ <p><a href="#" class="link-success">link-success</a></p>
111
+ <p><a href="#" class="link-info">link-info</a></p>
112
+ <p><a href="#" class="link-warning">link-warning</a></p>
113
+ <p><a href="#" class="link-danger">link-danger</a></p>
114
+ <p><a href="#" class="link-light">link-light</a></p>
115
+ <p><a href="#" class="link-dark">link-dark</a></p>
116
+ <p><a href="#" class="link-body-emphasis">link-body-emphasis</a></p>
106
117
  </div>
107
118
 
108
119
  <div class="col-12 col-sm-4">
@@ -80,6 +80,21 @@
80
80
  </div>
81
81
  </div>
82
82
 
83
+ <h4>Backgrounds</h4>
84
+ <div class="row mb-3">
85
+ <div class="col">
86
+ <div class="bg-body-secondary p-3 mb-2">
87
+ bg-body-secondary
88
+ </div>
89
+ <div class="bg-body-tertiary p-3 mb-2">
90
+ bg-body-tertiary
91
+ </div>
92
+ <div class="bg-gradient p-3 mb-2">
93
+ bg-gradient
94
+ </div>
95
+ </div>
96
+ </div>
97
+
83
98
  <h4>Cards</h4>
84
99
  <div class="row">
85
100
  <div class="col-12 col-sm-4">
@@ -260,7 +260,7 @@
260
260
  <hr />
261
261
 
262
262
  <fieldset>
263
- <legend>ASP andjQuery Validation Classes</legend>
263
+ <legend>ASP and jQuery Validation Classes</legend>
264
264
 
265
265
  <div class="validation-summary-errors">
266
266
  <ul>
@@ -51,7 +51,7 @@
51
51
  </main>
52
52
 
53
53
  @@include('./partials/_footer.html')
54
- <script src="https://unpkg.com/slim-select@latest/dist/slimselect.min.js"></script>
54
+ <script src="https://unpkg.com/slim-select@latest/dist/slimselect.js"></script>
55
55
  @@include('./partials/_scripts.html')
56
56
  </body>
57
57
  </html>
@@ -49,6 +49,47 @@
49
49
  </tr>
50
50
  </tbody>
51
51
  </table>
52
+
53
+ <h4>Custom Background Color</h4>
54
+ <p>
55
+ The class <code>table-bg-tertiary</code> is a custom class that
56
+ uses a background color that is slightly darker than the normal
57
+ and auto adjusts with the light and dark.
58
+ </p>
59
+
60
+ <table class="table table-bordered">
61
+ <thead class="table-bg-tertiary">
62
+ <tr>
63
+ <th scope="col">#</th>
64
+ <th scope="col">First</th>
65
+ <th scope="col">Last</th>
66
+ <th scope="col">Handle</th>
67
+ </tr>
68
+ </thead>
69
+ <tbody>
70
+ <tr>
71
+ <th scope="row">1</th>
72
+ <td>Mark</td>
73
+ <td>Otto</td>
74
+ <td>@mdo</td>
75
+ </tr>
76
+ <tr>
77
+ <th scope="row">2</th>
78
+ <td>Jacob</td>
79
+ <td>Thornton</td>
80
+ <td>@fat</td>
81
+ </tr>
82
+ <tr>
83
+ <th scope="row">3</th>
84
+ <td>Larry</td>
85
+ <td>the Bird</td>
86
+ <td>@twitter</td>
87
+ </tr>
88
+ </tbody>
89
+ </table>
90
+
91
+
92
+
52
93
  <h4>Dark</h4>
53
94
  <table class="table table-dark">
54
95
  <thead>
@@ -80,9 +121,42 @@
80
121
  </tr>
81
122
  </tbody>
82
123
  </table>
124
+
125
+
83
126
  <h4>Header Options</h4>
84
127
  <table class="table">
85
- <thead class="thead-dark">
128
+ <thead class="table-dark">
129
+ <tr>
130
+ <th scope="col">#</th>
131
+ <th scope="col">First</th>
132
+ <th scope="col">Last</th>
133
+ <th scope="col">Handle</th>
134
+ </tr>
135
+ </thead>
136
+ <tbody>
137
+ <tr>
138
+ <th scope="row">1</th>
139
+ <td>Mark</td>
140
+ <td>Otto</td>
141
+ <td>@mdo</td>
142
+ </tr>
143
+ <tr>
144
+ <th scope="row">2</th>
145
+ <td>Jacob</td>
146
+ <td>Thornton</td>
147
+ <td>@fat</td>
148
+ </tr>
149
+ <tr>
150
+ <th scope="row">3</th>
151
+ <td>Larry</td>
152
+ <td>the Bird</td>
153
+ <td>@twitter</td>
154
+ </tr>
155
+ </tbody>
156
+ </table>
157
+
158
+ <table class="table">
159
+ <thead class="table-light">
86
160
  <tr>
87
161
  <th scope="col">#</th>
88
162
  <th scope="col">First</th>
@@ -113,7 +187,7 @@
113
187
  </table>
114
188
 
115
189
  <table class="table">
116
- <thead class="thead-light">
190
+ <thead class="bg-body-tertiary">
117
191
  <tr>
118
192
  <th scope="col">#</th>
119
193
  <th scope="col">First</th>
@@ -142,6 +216,8 @@
142
216
  </tr>
143
217
  </tbody>
144
218
  </table>
219
+
220
+
145
221
  <h4>Striped Light</h4>
146
222
  <table class="table table-striped">
147
223
  <thead>
@@ -2,7 +2,7 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  @@include('./partials/_head.html', {
5
- "title": "Typography | Tower Bootstrap Theme"
5
+ "title": "Typography | Tower Bootstrap Theme"
6
6
  })
7
7
  </head>
8
8
  <body>
@@ -45,8 +45,8 @@
45
45
  <p><em>This line rendered as italicized text.</em></p>
46
46
  </div>
47
47
 
48
- <div class="col-12 col-sm-4">
49
- <h4>Emphasis classes</h4>
48
+ <div class="col-12 col-sm-4 mb-3">
49
+ <h4>Text Colors</h4>
50
50
  <p class="text-primary">text-primary - Lorem ipsum dolor sit amet</p>
51
51
  <p class="text-secondary">text-secondary - Lorem ipsum dolor sit amet</p>
52
52
  <p class="text-success">text-success - Lorem ipsum dolor sit amet</p>
@@ -59,7 +59,7 @@
59
59
  <p class="text-faded">text-faded - Custom class that uses opacity instead of changing the font color</p>
60
60
  </div>
61
61
 
62
- <div class="col-12 col-sm-4">
62
+ <div class="col-12 col-sm-4 mb-3">
63
63
  <h4>Display Headings</h4>
64
64
  <div class="display-1">Display 1</div>
65
65
  <div class="display-2">Display 2</div>
@@ -67,8 +67,19 @@
67
67
  <div class="display-4">Display 4</div>
68
68
  <div class="display-5">Display 5</div>
69
69
  <div class="display-6">Display 6</div>
70
+ </div>
70
71
 
71
- <em class="mt-2 d-block small">display-5 and display-6 are custom classes and are not normally in Bootstrap</em>
72
+ <div class="col-12 col-sm-4 mb-3">
73
+ <h4>Link Colors</h4>
74
+ <p><a href="#" class="link-primary">link-primary</a></p>
75
+ <p><a href="#" class="link-secondary">link-secondary</a></p>
76
+ <p><a href="#" class="link-success">link-success</a></p>
77
+ <p><a href="#" class="link-info">link-info</a></p>
78
+ <p><a href="#" class="link-warning">link-warning</a></p>
79
+ <p><a href="#" class="link-danger">link-danger</a></p>
80
+ <p><a href="#" class="link-light">link-light</a></p>
81
+ <p><a href="#" class="link-dark">link-dark</a></p>
82
+ <p><a href="#" class="link-body-emphasis">link-body-emphasis</a></p>
72
83
  </div>
73
84
 
74
85
  <div class="col-12 col-sm-4">
package/gulpfile.js CHANGED
@@ -24,7 +24,11 @@ var options = {
24
24
 
25
25
  gulp.task('build-css', function () {
26
26
  return gulp.src(options.css.sassMainFile)
27
- .pipe(sass({ errLogToConsole: true }).on('error', sass.logError))
27
+ .pipe(sass({
28
+ errLogToConsole: true,
29
+ quietDeps: true,
30
+ silenceDeprecations: ['legacy-js-api', 'color-functions', 'global-builtin', 'import']
31
+ }).on('error', sass.logError))
28
32
  .pipe(concat(options.css.output))
29
33
  .pipe(gulp.dest(options.css.dest))
30
34
  .pipe(cleancss())
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
- "version": "5.3.0",
2
+ "version": "5.3.1",
3
3
  "name": "bootsteam-theme",
4
4
  "private": false,
5
5
  "dependencies": {
6
- "bootstrap": "5.3.2"
6
+ "bootstrap": "5.3.8"
7
7
  },
8
8
  "devDependencies": {
9
9
  "gulp": "4.0.2",
@@ -2,15 +2,20 @@
2
2
  ///<reference path="twr-variables-dark.scss" />
3
3
  ///<reference path="../node_modules/bootstrap/scss/variables.scss" />
4
4
 
5
+ $input-border-color-dark: lighten($body-bg-dark, 10);
6
+ $input-bg-dark: lighten($body-bg-dark, 3);
7
+
5
8
  @include color-mode(dark) {
9
+
10
+ kbd {
11
+ color: #c6d4df;
12
+ background-color: #000;
13
+ }
14
+
6
15
  strong, .font-weight-bold {
7
16
  color: white;
8
17
  }
9
18
 
10
- kbd {
11
- color: $body-color-dark;
12
- background-color: black;
13
- }
14
19
 
15
20
  .form-control, .form-select {
16
21
  background-color: $input-bg-dark;
@@ -46,6 +51,11 @@
46
51
  background: darken($body-bg-dark, 3);
47
52
  }
48
53
 
54
+ .input-group-text {
55
+ border-color: $input-border-color-dark;
56
+ }
57
+ /*
58
+
49
59
  .input-group > .form-control, .input-group > .form-select {
50
60
  border-right-color: $input-border-color-dark;
51
61
  border-left-color: $input-border-color-dark;
@@ -71,4 +81,5 @@
71
81
  .blockquote-footer {
72
82
  color: $text-muted;
73
83
  }
84
+ */
74
85
  }
@@ -1,6 +1,7 @@
1
1
  ///<reference path="twr-variables.scss" />
2
2
  ///<reference path="twr-variables-dark.scss" />
3
3
  ///<reference path="../node_modules/bootstrap/scss/variables.scss" />
4
+ ///<reference path="../node_modules/bootstrap/scss/variables-dark.scss" />
4
5
 
5
6
  fieldset {
6
7
  border: 1px solid $input-border-color;
package/src/_forms.scss CHANGED
@@ -22,8 +22,9 @@
22
22
  border-color: var(--bs-form-invalid-color);
23
23
  }
24
24
 
25
+
25
26
  /* input type=color fixes */
26
- input[type="color"].form-control {
27
+ /*input[type="color"].form-control {
27
28
  padding: .3rem .5rem
28
29
  }
29
30
 
@@ -32,10 +33,10 @@ input[type="color"]:not(.form-control) {
32
33
  border: none;
33
34
  display: block;
34
35
  height: 1.8rem;
35
- }
36
+ }*/
36
37
 
37
38
  /* custom label styles */
38
- label {
39
+ /*label {
39
40
  font-size: 0.7em;
40
41
  text-transform: uppercase;
41
42
  margin-bottom: 0;
@@ -66,9 +67,9 @@ label.form-check-label {
66
67
  background-color: transparent;
67
68
  }
68
69
 
69
-
70
+ */
70
71
  /* form-select fixes */
71
- .form-select {
72
+ /*.form-select {
72
73
  -moz-padding-start: $input-padding-x;
73
74
 
74
75
  optgroup {
@@ -131,4 +132,4 @@ label.form-check, label.form-check-inline {
131
132
  &:focus[readonly] {
132
133
  border-color: darken($input-border-color, 15);
133
134
  }
134
- }
135
+ }*/
package/src/_tables.scss CHANGED
@@ -2,76 +2,87 @@
2
2
  ///<reference path="twr-variables-dark.scss" />
3
3
  ///<reference path="../node_modules/bootstrap/scss/variables.scss" />
4
4
 
5
+ ///<reference path="../node_modules/bootstrap/scss/variables.scss" />
6
+
7
+ .table-bg-tertiary {
8
+ --bs-table-bg: #{darken($body-bg, 10)};
9
+ }
10
+
5
11
  [data-bs-theme="dark"] {
12
+
13
+ .table-bg-tertiary {
14
+ --bs-table-bg: #{darken($body-bg-dark, 5)};
15
+ }
16
+
6
17
  .table-primary {
7
18
  --bs-table-color: var(--bs-primary-text-emphasis);
8
19
  --bs-table-bg: var(--bs-primary-bg-subtle);
9
- --bs-table-hover-color: var(--bs-primary-text-emphasis);
10
- --bs-table-hover-bg: #{lighten(shade-color($primary, 80%), 6)};
20
+ --bs-table-border-color: var(--bs-primary-border-subtle);
21
+ --bs-table-striped-bg: hsl(from var(--bs-primary-bg-subtle) h s calc(l + 2));
11
22
  --bs-table-striped-color: var(--bs-primary-text-emphasis);
12
- --bs-table-striped-bg: #{lighten(shade-color($primary, 80%), 3)};
13
- --bs-table-active-color: #{saturate($primary-text-emphasis-dark, 30)};
14
- --bs-table-active-bg: #{saturate(lighten(shade-color($primary, 80%), 6),60)};
15
- border-color: var(--bs-primary-border-subtle);
23
+ --bs-table-active-bg: hsl(from var(--bs-primary-bg-subtle) h s calc(l + 10));
24
+ --bs-table-active-color: #{$white};
25
+ --bs-table-hover-bg: hsl(from var(--bs-primary-bg-subtle) h s calc(l + 5));
26
+ --bs-table-hover-color: #{$white};
16
27
  }
17
28
 
18
29
  .table-secondary {
19
30
  --bs-table-color: var(--bs-secondary-text-emphasis);
20
31
  --bs-table-bg: var(--bs-secondary-bg-subtle);
21
- --bs-table-hover-color: var(--bs-secondary-text-emphasis);
22
- --bs-table-hover-bg: #{lighten(shade-color($secondary, 80%), 5)};
32
+ --bs-table-border-color: var(--bs-secondary-border-subtle);
33
+ --bs-table-striped-bg: hsl(from var(--bs-secondary-bg-subtle) h s calc(l + 2));
23
34
  --bs-table-striped-color: var(--bs-secondary-text-emphasis);
24
- --bs-table-striped-bg: #{lighten(shade-color($secondary, 80%), 3)};
25
- --bs-table-active-color: #{saturate($secondary-text-emphasis-dark, 20)};
26
- --bs-table-active-bg: #{lighten(shade-color($secondary, 80%), 5)};
27
- border-color: var(--bs-secondary-border-subtle);
35
+ --bs-table-active-bg: hsl(from var(--bs-secondary-bg-subtle) h s calc(l + 7));
36
+ --bs-table-active-color: #{$white};
37
+ --bs-table-hover-bg: hsl(from var(--bs-secondary-bg-subtle) h s calc(l + 4));
38
+ --bs-table-hover-color: #{$white};
28
39
  }
29
40
 
30
41
  .table-success {
31
42
  --bs-table-color: var(--bs-success-text-emphasis);
32
43
  --bs-table-bg: var(--bs-success-bg-subtle);
33
- --bs-table-hover-color: var(--bs-success-text-emphasis);
34
- --bs-table-hover-bg: #{lighten(shade-color($success, 80%), 5)};
44
+ --bs-table-border-color: var(--bs-success-border-subtle);
45
+ --bs-table-striped-bg: hsl(from var(--bs-success-bg-subtle) h s calc(l + 2));
35
46
  --bs-table-striped-color: var(--bs-success-text-emphasis);
36
- --bs-table-striped-bg: #{lighten(shade-color($success, 80%), 3)};
37
- --bs-table-active-color: #{saturate($success-text-emphasis-dark, 30)};
38
- --bs-table-active-bg: #{saturate(lighten(shade-color($success, 80%), 6),60)};
39
- border-color: var(--bs-success-border-subtle);
40
- }
41
-
42
- .table-danger {
43
- --bs-table-color: var(--bs-danger-text-emphasis);
44
- --bs-table-bg: var(--bs-danger-bg-subtle);
45
- --bs-table-hover-color: var(--bs-danger-text-emphasis);
46
- --bs-table-hover-bg: #{lighten(shade-color($danger, 80%), 5)};
47
- --bs-table-striped-color: var(--bs-danger-text-emphasis);
48
- --bs-table-striped-bg: #{lighten(shade-color($danger, 80%), 3)};
49
- --bs-table-active-color: #{saturate($danger-text-emphasis-dark, 30)};
50
- --bs-table-active-bg: #{saturate(lighten(shade-color($danger, 80%), 6),60)};
51
- border-color: var(--bs-danger-border-subtle);
47
+ --bs-table-active-bg: hsl(from var(--bs-success-bg-subtle) h s calc(l + 10));
48
+ --bs-table-active-color: #{$white};
49
+ --bs-table-hover-bg: hsl(from var(--bs-success-bg-subtle) h s calc(l + 5));
50
+ --bs-table-hover-color: #{$white};
52
51
  }
53
52
 
54
53
  .table-warning {
55
54
  --bs-table-color: var(--bs-warning-text-emphasis);
56
55
  --bs-table-bg: var(--bs-warning-bg-subtle);
57
- --bs-table-hover-color: var(--bs-warning-text-emphasis);
58
- --bs-table-hover-bg: #{lighten(shade-color($warning, 80%), 5)};
56
+ --bs-table-border-color: var(--bs-warning-border-subtle);
57
+ --bs-table-striped-bg: hsl(from var(--bs-warning-bg-subtle) h s calc(l + 2));
59
58
  --bs-table-striped-color: var(--bs-warning-text-emphasis);
60
- --bs-table-striped-bg: #{lighten(shade-color($warning, 80%), 3)};
61
- --bs-table-active-color: #{saturate($warning-text-emphasis-dark, 30)};
62
- --bs-table-active-bg: #{saturate(lighten(shade-color($warning, 80%), 6),60)};
63
- border-color: var(--bs-warning-border-subtle);
59
+ --bs-table-active-bg: hsl(from var(--bs-warning-bg-subtle) h s calc(l + 10));
60
+ --bs-table-active-color: #{$white};
61
+ --bs-table-hover-bg: hsl(from var(--bs-warning-bg-subtle) h s calc(l + 5));
62
+ --bs-table-hover-color: #{$white};
63
+ }
64
+
65
+ .table-danger {
66
+ --bs-table-color: var(--bs-danger-text-emphasis);
67
+ --bs-table-bg: var(--bs-danger-bg-subtle);
68
+ --bs-table-border-color: var(--bs-danger-border-subtle);
69
+ --bs-table-striped-bg: hsl(from var(--bs-danger-bg-subtle) h s calc(l + 2));
70
+ --bs-table-striped-color: var(--bs-danger-text-emphasis);
71
+ --bs-table-active-bg: hsl(from var(--bs-danger-bg-subtle) h s calc(l + 10));
72
+ --bs-table-active-color: #{$white};
73
+ --bs-table-hover-bg: hsl(from var(--bs-danger-bg-subtle) h s calc(l + 5));
74
+ --bs-table-hover-color: #{$white};
64
75
  }
65
76
 
66
77
  .table-info {
67
78
  --bs-table-color: var(--bs-info-text-emphasis);
68
79
  --bs-table-bg: var(--bs-info-bg-subtle);
69
- --bs-table-hover-color: var(--bs-info-text-emphasis);
70
- --bs-table-hover-bg: #{lighten(shade-color($info, 80%), 5)};
80
+ --bs-table-border-color: var(--bs-info-border-subtle);
81
+ --bs-table-striped-bg: hsl(from var(--bs-info-bg-subtle) h s calc(l + 2));
71
82
  --bs-table-striped-color: var(--bs-info-text-emphasis);
72
- --bs-table-striped-bg: #{lighten(shade-color($info, 80%), 3)};
73
- --bs-table-active-color: #{saturate($info-text-emphasis-dark, 30)};
74
- --bs-table-active-bg: #{saturate(lighten(shade-color($info, 80%), 6),60)};
75
- border-color: var(--bs-info-border-subtle);
83
+ --bs-table-active-bg: hsl(from var(--bs-info-bg-subtle) h s calc(l + 10));
84
+ --bs-table-active-color: #{$white};
85
+ --bs-table-hover-bg: hsl(from var(--bs-info-bg-subtle) h s calc(l + 5));
86
+ --bs-table-hover-color: #{$white};
76
87
  }
77
88
  }