bootsteam-theme 5.3.1 → 5.3.2

package/docs-templates/tables.html

@@ -49,47 +49,6 @@
                 </tr>
             </tbody>
         </table>
-
-        <h4>Custom Background Color</h4>
-        <p>
-            The class <code>table-bg-tertiary</code> is a custom class that
-            uses a background color that is slightly darker than the normal
-            and auto adjusts with the light and dark.
-        </p>
-
-        <table class="table table-bordered">
-            <thead class="table-bg-tertiary">
-                <tr>
-                    <th scope="col">#</th>
-                    <th scope="col">First</th>
-                    <th scope="col">Last</th>
-                    <th scope="col">Handle</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <th scope="row">1</th>
-                    <td>Mark</td>
-                    <td>Otto</td>
-                    <td>@mdo</td>
-                </tr>
-                <tr>
-                    <th scope="row">2</th>
-                    <td>Jacob</td>
-                    <td>Thornton</td>
-                    <td>@fat</td>
-                </tr>
-                <tr>
-                    <th scope="row">3</th>
-                    <td>Larry</td>
-                    <td>the Bird</td>
-                    <td>@twitter</td>
-                </tr>
-            </tbody>
-        </table>
-
-
-
         <h4>Dark</h4>
         <table class="table table-dark">
             <thead>
@@ -121,11 +80,9 @@
                 </tr>
             </tbody>
         </table>
-
-
         <h4>Header Options</h4>
         <table class="table">
-            <thead class="table-dark">
+            <thead class="thead-dark">
                 <tr>
                     <th scope="col">#</th>
                     <th scope="col">First</th>
@@ -156,7 +113,7 @@
         </table>
 
         <table class="table">
-            <thead class="table-light">
+            <thead class="thead-light">
                 <tr>
                     <th scope="col">#</th>
                     <th scope="col">First</th>
@@ -185,39 +142,6 @@
                 </tr>
             </tbody>
         </table>
-
-        <table class="table">
-            <thead class="bg-body-tertiary">
-                <tr>
-                    <th scope="col">#</th>
-                    <th scope="col">First</th>
-                    <th scope="col">Last</th>
-                    <th scope="col">Handle</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <th scope="row">1</th>
-                    <td>Mark</td>
-                    <td>Otto</td>
-                    <td>@mdo</td>
-                </tr>
-                <tr>
-                    <th scope="row">2</th>
-                    <td>Jacob</td>
-                    <td>Thornton</td>
-                    <td>@fat</td>
-                </tr>
-                <tr>
-                    <th scope="row">3</th>
-                    <td>Larry</td>
-                    <td>the Bird</td>
-                    <td>@twitter</td>
-                </tr>
-            </tbody>
-        </table>
-
-
         <h4>Striped Light</h4>
         <table class="table table-striped">
             <thead>
@@ -400,7 +324,7 @@
             </tbody>
         </table>
         <h4>Theme Colors</h4>
-        <table class="table table-hover table-bordered">
+        <table class="table table-hover">
             <thead>
                 <tr>
                     <th scope="col">Type</th>
@@ -461,7 +385,7 @@
                 </tr>
             </tbody>
         </table>
-        <table class="table table-hover table-bordered table-striped">
+        <table class="table table-hover table-dark">
             <thead>
                 <tr>
                     <th scope="col">Type</th>
@@ -475,16 +399,6 @@
                     <td>Cell</td>
                     <td>Cell</td>
                 </tr>
-                <tr class="table-active">
-                    <th scope="row">Active</th>
-                    <td>Cell</td>
-                    <td>Cell</td>
-                </tr>
-                <tr>
-                    <th scope="row">Default</th>
-                    <td>Cell</td>
-                    <td>Cell</td>
-                </tr>
                 <tr>
                     <th scope="row">Default</th>
                     <td>Cell</td>
@@ -495,125 +409,45 @@
                     <td>Cell</td>
                     <td>Cell</td>
                 </tr>
-                <tr class="table-primary">
-                    <th scope="row">Primary</th>
-                    <td>Cell</td>
-                    <td>Cell</td>
-                </tr>
-                <tr class="table-primary table-active">
-                    <th scope="row">Primary</th>
-                    <td>Cell</td>
-                    <td>Cell</td>
-                </tr>
-                <tr class="table-secondary">
-                    <th scope="row">Secondary</th>
-                    <td>Cell</td>
-                    <td>Cell</td>
-                </tr>
                 <tr class="table-secondary">
                     <th scope="row">Secondary</th>
                     <td>Cell</td>
                     <td>Cell</td>
                 </tr>
-                <tr class="table-secondary table-active">
-                    <th scope="row">Secondary</th>
-                    <td>Cell</td>
-                    <td>Cell</td>
-                </tr>
-                <tr class="table-success">
-                    <th scope="row">Success</th>
-                    <td>Cell</td>
-                    <td>Cell</td>
-                </tr>
                 <tr class="table-success">
                     <th scope="row">Success</th>
                     <td>Cell</td>
                     <td>Cell</td>
                 </tr>
-                <tr class="table-success table-active">
-                    <th scope="row">Success</th>
-                    <td>Cell</td>
-                    <td>Cell</td>
-                </tr>
-                <tr class="table-danger">
-                    <th scope="row">Danger</th>
-                    <td>Cell</td>
-                    <td>Cell</td>
-                </tr>
                 <tr class="table-danger">
                     <th scope="row">Danger</th>
                     <td>Cell</td>
                     <td>Cell</td>
                 </tr>
-                <tr class="table-danger table-active">
-                    <th scope="row">Danger</th>
-                    <td>Cell</td>
-                    <td>Cell</td>
-                </tr>
-                <tr class="table-warning">
-                    <th scope="row">Warning</th>
-                    <td>Cell</td>
-                    <td>Cell</td>
-                </tr>
                 <tr class="table-warning">
                     <th scope="row">Warning</th>
                     <td>Cell</td>
                     <td>Cell</td>
                 </tr>
-                <tr class="table-warning table-active">
-                    <th scope="row">Warning</th>
-                    <td>Cell</td>
-                    <td>Cell</td>
-                </tr>
-                <tr class="table-info">
-                    <th scope="row">Info</th>
-                    <td>Cell</td>
-                    <td>Cell</td>
-                </tr>
                 <tr class="table-info">
                     <th scope="row">Info</th>
                     <td>Cell</td>
                     <td>Cell</td>
                 </tr>
-                <tr class="table-info table-active">
-                    <th scope="row">Info</th>
-                    <td>Cell</td>
-                    <td>Cell</td>
-                </tr>
                 <tr class="table-light">
                     <th scope="row">Light</th>
                     <td>Cell</td>
                     <td>Cell</td>
                 </tr>
-                <tr class="table-light">
-                    <th scope="row">Light</th>
-                    <td>Cell</td>
-                    <td>Cell</td>
-                </tr>
-                <tr class="table-light table-active">
-                    <th scope="row">Light</th>
-                    <td>Cell</td>
-                    <td>Cell</td>
-                </tr>
                 <tr class="table-dark">
                     <th scope="row">Dark</th>
                     <td>Cell</td>
                     <td>Cell</td>
                 </tr>
-                <tr class="table-dark">
-                    <th scope="row">Dark</th>
-                    <td>Cell</td>
-                    <td>Cell</td>
-                </tr>
-                <tr class="table-dark table-active">
-                    <th scope="row">Dark</th>
-                    <td>Cell</td>
-                    <td>Cell</td>
-                </tr>
             </tbody>
         </table>
 
-        <table class="table table-striped table-primary">
+        <table class="table table-striped table-success table-hover">
             <thead>
                 <tr>
                     <th scope="col">Type</th>
@@ -622,6 +456,21 @@
                 </tr>
             </thead>
             <tbody>
+                <tr class="table-active">
+                    <td>Active Row</td>
+                    <td>2</td>
+                    <td>3</td>
+                </tr>
+                <tr class="table-active">
+                    <td>Active Row 2</td>
+                    <td>2</td>
+                    <td>3</td>
+                </tr>
+                <tr>
+                    <td>1</td>
+                    <td>2</td>
+                    <td>3</td>
+                </tr>
                 <tr>
                     <td>1</td>
                     <td>2</td>

package/docs-templates/themes.html

@@ -30,8 +30,8 @@
 
         <h5>ThemeHandler Javascript</h5>
         <div class="card mb-3">
-            <div class="card-body bg-dark text-light">
-                <pre><code>@@include('../docs/scripts/themeHandler.js')</code></pre>
+            <div class="card-body bg-body-tertiary">
+                <pre><code id="javascript-code"></code></pre>
             </div>
         </div>
 
@@ -46,7 +46,7 @@
 
         <h5>Navbar Theme Selector HTML</h5>
         <div class="card mb-3">
-            <div class="card-body bg-dark text-light">
+            <div class="card-body bg-body-tertiary">
                 <pre><code>&lt;li class=&quot;nav-item dropdown&quot;&gt;
     &lt;button type=&quot;button&quot; class=&quot;nav-link dropdown-toggle&quot; data-bs-toggle=&quot;dropdown&quot;&gt;
         &lt;span id=&quot;current-theme&quot;&gt;&lt;/span&gt; &lt;span class=&quot;d-md-none&quot;&gt;Switch Themes&lt;/span&gt;
@@ -64,5 +64,14 @@
 
     @@include('./partials/_footer.html')
     @@include('./partials/_scripts.html')
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            fetch('themeHandler.js')
+                .then(response => response.text())
+                .then(data => {
+                    document.getElementById('javascript-code').innerHTML = data;
+                });
+        });
+    </script>
 </body>
 </html>

package/docs-templates/toasts.html

@@ -41,10 +41,10 @@
                 </div>
             </div>
             <div class="col-md-6 mb-4">
-                <button type="button" class="btn btn-primary mb-2" onclick="toast('Default')">Toast Test</button>
-                <button type="button" class="btn btn-success mb-2" onclick="toast('bg-success', 'bg-success')">Toast Test</button>
-                <button type="button" class="btn btn-info mb-2" onclick="toast('bg-into', 'bg-info')">Toast Test</button>
-                <button type="button" class="btn btn-danger mb-2" onclick="toast('bg-danger', 'bg-danger')">Toast Test</button>
+                <button type="button" class="btn btn-primary" onclick="toast('Default')">Toast Test</button>
+                <button type="button" class="btn btn-success" onclick="toast('bg-success', 'bg-success')">Toast Test</button>
+                <button type="button" class="btn btn-info" onclick="toast('bg-into', 'bg-info')">Toast Test</button>
+                <button type="button" class="btn btn-danger" onclick="toast('bg-danger', 'bg-danger')">Toast Test</button>
             </div>
         </div>
         <br />

package/docs-templates/typography.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     @@include('./partials/_head.html', {
-    "title": "Typography | Tower Bootstrap Theme"
+        "title": "Typography | Tower Bootstrap Theme"
     })
 </head>
 <body>
@@ -32,7 +32,7 @@
                 <p class="lead">Lead Paragraph. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
             </div>
 
-            <div class="col-12 col-sm-4">
+            <div class="col-12 col-sm-4 mb-4">
                 <h4>Inline text elements</h4>
                 <p>You can use the mark tag to <mark>highlight</mark> text.</p>
                 <p><del>This line of text is meant to be treated as deleted text.</del></p>
@@ -45,8 +45,8 @@
                 <p><em>This line rendered as italicized text.</em></p>
             </div>
 
-            <div class="col-12 col-sm-4 mb-3">
-                <h4>Text Colors</h4>
+            <div class="col-12 col-sm-4 mb-4">
+                <h4>Emphasis classes</h4>
                 <p class="text-primary">text-primary - Lorem ipsum dolor sit amet</p>
                 <p class="text-secondary">text-secondary - Lorem ipsum dolor sit amet</p>
                 <p class="text-success">text-success - Lorem ipsum dolor sit amet</p>
@@ -59,7 +59,7 @@
                 <p class="text-faded">text-faded - Custom class that uses opacity instead of changing the font color</p>
             </div>
 
-            <div class="col-12 col-sm-4 mb-3">
+            <div class="col-12 col-sm-4">
                 <h4>Display Headings</h4>
                 <div class="display-1">Display 1</div>
                 <div class="display-2">Display 2</div>
@@ -67,22 +67,19 @@
                 <div class="display-4">Display 4</div>
                 <div class="display-5">Display 5</div>
                 <div class="display-6">Display 6</div>
-            </div>
 
-            <div class="col-12 col-sm-4 mb-3">
-                <h4>Link Colors</h4>
-                <p><a href="#" class="link-primary">link-primary</a></p>
-                <p><a href="#" class="link-secondary">link-secondary</a></p>
-                <p><a href="#" class="link-success">link-success</a></p>
-                <p><a href="#" class="link-info">link-info</a></p>
-                <p><a href="#" class="link-warning">link-warning</a></p>
-                <p><a href="#" class="link-danger">link-danger</a></p>
-                <p><a href="#" class="link-light">link-light</a></p>
-                <p><a href="#" class="link-dark">link-dark</a></p>
-                <p><a href="#" class="link-body-emphasis">link-body-emphasis</a></p>
+                <!--<em class="mt-2 d-block small">display-5 and display-6 are custom classes and are not normally in Bootstrap</em>-->
             </div>
 
             <div class="col-12 col-sm-4">
+
+                <div class="mb-5">
+                    <h4>Abbreviations</h4>
+                    <p><abbr title="attribute">attr</abbr></p>
+                    <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
+
+                </div>
+
                 <h4>Lead</h4>
                 <p class="lead">
                     Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
@@ -90,30 +87,38 @@
             </div>
 
             <div class="col-12 col-sm-4">
-                <h4>Blockquote</h4>
-                <figure>
-                    <blockquote class="blockquote">
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-                    </blockquote>
-                    <figcaption class="blockquote-footer">
-                        Someone famous in <cite title="Source Title">Source Title</cite>
-                    </figcaption>
-                </figure>
+                <div class="mb-5">
+                    <h4>Blockquote</h4>
+                    <figure>
+                        <blockquote class="blockquote">
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                        </blockquote>
+                        <figcaption class="blockquote-footer">
+                            Someone famous in <cite title="Source Title">Source Title</cite>
+                        </figcaption>
+                    </figure>
+                </div>
+
+                <div>
+                    <h4>Definition List</h4>
+
+                    <dl>
+                        <dt>Beast of Bodmin</dt>
+                        <dd>A large feline inhabiting Bodmin Moor.</dd>
+
+                        <dt>Morgawr</dt>
+                        <dd>A sea serpent.</dd>
+
+                        <dt>Owlman</dt>
+                        <dd>A giant owl-like creature.</dd>
+                    </dl>
+
+                </div>
             </div>
         </div>
 
         <hr />
 
-
-        <h4>Fieldset</h4>
-        <fieldset>
-            <legend>Legend</legend>
-            <p>Content</p>
-            <div>More Content</div>
-        </fieldset>
-
-        <hr />
-
         <h4>Code Elements</h4>
         <h5>Inline Code</h5>
         <p>

package/package.json

@@ -1,12 +1,12 @@
 {
-  "version": "5.3.1",
+  "version": "5.3.2",
   "name": "bootsteam-theme",
   "private": false,
   "dependencies": {
     "bootstrap": "5.3.8"
   },
   "devDependencies": {
-    "gulp": "4.0.2",
+    "gulp": "5.0.1",
     "gulp-clean-css": "4.3.0",
     "gulp-dart-sass": "1.1.0",
     "gulp-concat": "2.6.1",

package/src/_alerts.scss

@@ -28,21 +28,21 @@
     }
 }
 
-[data-bs-theme="dark"] {
+@include color-mode(dark) {
     .alert {
         &.alert-success a {
-            color: darken($success, 5);
+            color: lighten($success, 5);
 
             &:hover {
-                color: darken($success, 10);
+                color: lighten($success, 10);
             }
         }
 
         &.alert-danger a {
-            color: darken($danger, 5);
+            color: lighten($danger, 10);
 
             &:hover {
-                color: darken($danger, 10);
+                color: lighten($danger, 15);
             }
         }
 
@@ -55,10 +55,10 @@
         }
 
         &.alert-info a {
-            color: $info;
+            color: lighten($info, 5);
 
             &:hover {
-                color: darken($info, 10);
+                color: lighten($info, 10);
             }
         }
     }

package/src/_buttons.scss

@@ -0,0 +1,93 @@
+///<reference path="../node_modules/bootstrap/scss/variables.scss" />
+
+@property --accent-gradient-percentage {
+    syntax: "<length-percentage>";
+    inherits: false;
+    initial-value: 0%;
+}
+
+.btn:focus-visible {
+    outline: 1px solid white;
+}
+
+.btn-accent {
+    --accent-gradient-percentage: 0%;
+    transition: --accent-gradient-percentage 0.2s;
+    color: white;
+    font-weight: bold;
+    background: linear-gradient(90deg, #05b1ed var(--accent-gradient-percentage), #2D73FF 100%);
+
+
+    &:hover, &:focus {
+        --accent-gradient-percentage: 40%;
+        color: white;
+    }
+
+    &.disabled, &:disabled {
+        color: #ddd;
+    }
+}
+
+.btn-primary:hover {
+    background: lighten($primary, 5);
+}
+
+.btn-secondary {
+    background: #2b475e;
+
+    &:hover {
+        background: linear-gradient(135deg, #67c1f5 0%,#417a9b 100%);
+    }
+
+    &.disabled, &:disabled {
+        background: darken(#2b475e, 5);
+    }
+}
+
+.btn-success:hover {
+    background: #6c9018;
+}
+
+.btn-warning {
+    color: $black;
+
+    &:hover {
+        color: $black;
+        background: darken($warning, 5);
+    }
+
+    &.disabled, &:disabled {
+        color: $black;
+    }
+}
+
+.btn.btn-outline-primary,
+.btn.btn-outline-secondary,
+.btn.btn-outline-success,
+.btn.btn-outline-info,
+.btn.btn-outline-danger,
+.btn.btn-outline-dark {
+    color: light-dark($body-color, $body-color-dark);
+    border-width: 1px;
+
+    &:hover {
+        color: $white;
+    }
+}
+
+.btn.btn-outline-warning,
+.btn.btn-outline-light {
+    color: light-dark($body-color, $body-color-dark);
+    border-width: 1px;
+
+    &:hover {
+        color: $black;
+    }
+}
+
+
+@media screen and (prefers-reduced-motion: reduce) {
+    .btn-accent {
+        transition: --accent-gradient-percentage 0.001ms;
+    }
+}

package/src/_darkThemeOverrides.scss

@@ -54,6 +54,14 @@ $input-bg-dark: lighten($body-bg-dark, 3);
     .input-group-text {
         border-color: $input-border-color-dark;
     }
+
+    .blockquote-footer {
+        color: $text-muted;
+    }
+
+    .breadcrumb-item.active {
+        color: rgba(198, 212, 223, 0.75);
+    }
     /*
 
     .input-group > .form-control, .input-group > .form-select {
@@ -78,8 +86,6 @@ $input-bg-dark: lighten($body-bg-dark, 3);
         border-color: $input-border-color-dark;
     }
 
-    .blockquote-footer {
-        color: $text-muted;
-    }
+    
 */
 }