fix(bootstrap): .col-dark not registered as dark context (#415)

* feat(bootstrap4): columns `-dark` and `-muted` * fix(bootstrap4): .col-dark not registered as dark context
TACC · Oct 25, 2024 · a31f321 · a31f321
1 parent 609ce63
commit a31f321
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 10 deletions.
diff --git a/dist/components/bootstrap/bootstrap--col.demo.css b/dist/components/bootstrap/bootstrap--col.demo.css
diff --git a/dist/components/bootstrap/demo.css b/dist/components/bootstrap/demo.css
diff --git a/dist/core-styles.cms.css b/dist/core-styles.cms.css
diff --git a/dist/core-styles.demo.css b/dist/core-styles.demo.css
diff --git a/dist/settings/color--cms.css b/dist/settings/color--cms.css
diff --git a/dist/settings/color--demo.css b/dist/settings/color--demo.css
diff --git a/src/lib/_imports/components/bootstrap/bootstrap--col.demo.css b/src/lib/_imports/components/bootstrap/bootstrap--col.demo.css
@@ -3,3 +3,9 @@
 .col > p {
   margin-block: 1rem
 }
+
+.demo-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
diff --git a/src/lib/_imports/components/bootstrap/bootstrap--col.hbs b/src/lib/_imports/components/bootstrap/bootstrap--col.hbs
@@ -23,9 +23,11 @@
       <div class="col">
         <article class="c-card c-card--plain">
           <h3>Regular</h3>
-          <p>{{> @text-of-one-paragraph-short }}</p>
+          <p>{{> @text-of-one-sentence }}</p>
         </article>
         <p>Regular columns support many direct children.</p>
+        <p>Buttons can change color per section.</p>
+        <div class="demo-buttons">{{> @button-samples }}</div>
       </div>
       <div class="col">
         <article class="c-card c-card--plain">
@@ -51,9 +53,11 @@
       <div class="col col-muted">
         <article class="c-card c-card--plain">
           <h3>Regular</h3>
-          <p>{{> @text-of-one-paragraph-short }}</p>
+          <p>{{> @text-of-one-sentence }}</p>
         </article>
         <p>Regular columns support many direct children.</p>
+        <p>Buttons can change color per section.</p>
+        <div class="demo-buttons">{{> @button-samples }}</div>
       </div>
       <div class="col col-muted">
         <article class="c-card c-card--plain">
@@ -79,9 +83,11 @@
       <div class="col col-dark">
         <article class="c-card c-card--plain">
           <h3>(Regular)</h3>
-          <p>{{> @text-of-one-paragraph-short }}</p>
+          <p>{{> @text-of-one-sentence }}</p>
         </article>
         <p>Regular columns support many direct children.</p>
+        <p>Buttons can change color per section.</p>
+        <div class="demo-buttons">{{> @button-samples }}</div>
       </div>
       <div class="col col-dark">
         <article class="c-card c-card--plain">

diff --git a/src/lib/_imports/settings/color--cms.css b/src/lib/_imports/settings/color--cms.css
@@ -14,7 +14,7 @@
 @custom-selector :--dark-context
   .c-recognition--style-dark,
   :--o-section--dark,
-  .col-dark
+  .col-dark,
   .s-footer;
 
 @custom-selector :--light-context-safe