@tacc/core-styles 2.35.1 → 2.37.0

package/src/lib/_imports/components/c-card/c-card--images.hbs

@@ -1,107 +1,181 @@
+<h2>Table of Contents</h2>
+<nav class="c-nav">
+  <ul>
+    <li><a href="#section--null">Section (Default)</a></li>
+    <li><a href="#section--light">Section - Light</a></li>
+    <li><a href="#section--muted">Section - Muted</a></li>
+    <li><a href="#section--dark">Section - Dark</a></li>
+  </ul>
+</nav>
+
 <h2 id="section--null">Section (Default a.k.a Unstyled a.k.a Transparent)</h2>
 <section class="o-section">
-    <h3>Transparent Card Image</h3>
+    <h3 id="card-image-transparent-default">Transparent Card Image</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" }}
         {{> @c-card--image position="bottom" wide=true variant="transparent" }}
         {{> @c-card--image position="right" tall=true variant="transparent" }}
         {{> @c-card--image position="left" tall=true variant="transparent" }}
     </section>
-    <h3>Contact Card with Image - Transparent</h3>
+    <h3 id="card-image-transparent-default-link">Transparent Card Image with Link</h3>
+    <section class="o-section s-image-grid">
+        {{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
+    </section>
+    <h3 id="card-image-transparent-default-contact">Contact Card with Image - Transparent</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
+        {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
     </section>
 
-    <h3>Plain Card Image</h3>
+    <h3 id="card-image-plain-default">Plain Card Image</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" }}
         {{> @c-card--image position="bottom" wide=true variant="plain" }}
         {{> @c-card--image position="right" tall=true variant="plain" }}
         {{> @c-card--image position="left" tall=true variant="plain" }}
     </section>
-    <h3>Contact Card with Image - Plain</h3>
+    <h3 id="card-image-plain-default-link">Plain Card Image with Link</h3>
+    <section class="o-section s-image-grid">
+        {{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="bottom" wide=true variant="plain" image-link="#"}}
+        {{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
+    </section>
+    <h3 id="card-image-plain-default-contact">Contact Card with Image - Plain</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
+        {{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
     </section>
 </section>
 <hr>
-<h2 id="section--null">Section - Light</h2>
+<h2 id="section--light">Section - Light</h2>
 <section class="o-section o-section--style-light">
-    <h3>Transparent Card Image</h3>
+    <h3 id="card-image-transparent-light">Transparent Card Image</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" }}
         {{> @c-card--image position="bottom" wide=true variant="transparent" }}
         {{> @c-card--image position="right" tall=true variant="transparent" }}
         {{> @c-card--image position="left" tall=true variant="transparent" }}
     </section>
-    <h3>Contact Card with Image - Transparent</h3>
+    <h3 id="card-image-transparent-light-link">Transparent Card Image with Link</h3>
+    <section class="o-section s-image-grid">
+        {{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
+    </section>
+    <h3 id="card-image-transparent-light-contact">Contact Card with Image - Transparent</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
+        {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
     </section>
 
-    <h3>Plain Card Image</h3>
+    <h3 id="card-image-plain-light">Plain Card Image</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" }}
         {{> @c-card--image position="bottom" wide=true variant="plain" }}
         {{> @c-card--image position="right" tall=true variant="plain" }}
         {{> @c-card--image position="left" tall=true variant="plain" }}
     </section>
-    <h3>Contact Card with Image - Plain</h3>
+    <h3 id="card-image-plain-light-link">Plain Card Image with Link</h3>
+    <section class="o-section s-image-grid">
+        {{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="bottom" wide=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
+    </section>
+    <h3 id="card-image-plain-light-contact">Contact Card with Image - Plain</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
+        {{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
     </section>
 </section>
 <hr>
-<h2 id="section--null">Section - Muted</h2>
+<h2 id="section--muted">Section - Muted</h2>
 <section class="o-section o-section--style-muted">
-    <h3>Transparent Card Image</h3>
+    <h3 id="card-image-transparent-muted">Transparent Card Image</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" }}
         {{> @c-card--image position="bottom" wide=true variant="transparent" }}
         {{> @c-card--image position="right" tall=true variant="transparent" }}
         {{> @c-card--image position="left" tall=true variant="transparent" }}
     </section>
-    <h3>Contact Card with Image - Transparent</h3>
+    <h3 id="card-image-transparent-muted-link">Transparent Card Image with Link</h3>
+    <section class="o-section s-image-grid">
+        {{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
+    </section>
+    <h3 id="card-image-transparent-muted-contact">Contact Card with Image - Transparent</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
+        {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
     </section>
 
-    <h3>Plain Card Image</h3>
+    <h3 id="card-image-plain-muted">Plain Card Image</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" }}
         {{> @c-card--image position="bottom" wide=true variant="plain" }}
         {{> @c-card--image position="right" tall=true variant="plain" }}
         {{> @c-card--image position="left" tall=true variant="plain" }}
     </section>
-    <h3>Contact Card with Image - Plain</h3>
+    <h3 id="card-image-plain-muted-link">Plain Card Image with Link</h3>
+    <section class="o-section s-image-grid">
+        {{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="bottom" wide=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
+    </section>
+    <h3 id="card-image-plain-muted-contact">Contact Card with Image - Plain</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
+        {{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
     </section>
 </section>
 <hr>
-<h2 id="section--null">Section - Dark</h2>
+<h2 id="section--dark">Section - Dark</h2>
 <section class="o-section o-section--style-dark">
-    <h3>Transparent Card Image</h3>
+    <h3 id="card-image-transparent-dark">Transparent Card Image</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" }}
         {{> @c-card--image position="bottom" wide=true variant="transparent" }}
         {{> @c-card--image position="right" tall=true variant="transparent" }}
         {{> @c-card--image position="left" tall=true variant="transparent" }}
     </section>
-    <h3>Contact Card with Image - Transparent</h3>
+    <h3 id="card-image-transparent-dark-link">Transparent Card Image with Link</h3>
+    <section class="o-section s-image-grid">
+        {{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
+    </section>
+    <h3 id="card-image-transparent-dark-contact">Contact Card with Image - Transparent</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
+        {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
     </section>
 
-    <h3>Plain Card Image</h3>
+    <h3 id="card-image-plain-dark">Plain Card Image</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" }}
         {{> @c-card--image position="bottom" wide=true variant="plain" }}
         {{> @c-card--image position="right" tall=true variant="plain" }}
         {{> @c-card--image position="left" tall=true variant="plain" }}
     </section>
-    <h3>Contact Card with Image - Plain</h3>
+    <h3 id="card-image-plain-dark-link">Plain Card Image with Link</h3>
+    <section class="o-section s-image-grid">
+        {{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="bottom" wide=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
+    </section>
+    <h3 id="card-image-plain-dark-contact">Contact Card with Image - Plain</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
+        {{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
     </section>
 </section>

package/src/lib/_imports/components/c-card/c-card.hbs

@@ -5,6 +5,8 @@
     <li><a href="#section--light">Section - Light</a></li>
     <li><a href="#section--muted">Section - Muted</a></li>
     <li><a href="#section--dark">Section - Dark</a></li>
+    <li><a href="#col--muted">Column - Muted</a></li>
+    <li><a href="#col--dark">Column - Dark</a></li>
   </ul>
 </nav>
 <h2 id="section--null">Section (Default a.k.a Unstyled a.k.a Transparent)</h2>
@@ -34,3 +36,16 @@
   {{> @c-card--one-with-grid }}
   {{> @c-card--one-with-grid only-standard=true}}
 </section>
+<hr />
+<h2 id="col--muted">Column - Muted</h2>
+<div class="col col-muted o-grid o-grid--col-min-width">
+  {{> @c-card--many-variable }}
+  {{> @c-card--one-with-grid }}
+  {{> @c-card--one-with-grid only-standard=true}}
+</div>
+<h2 id="col--dark">Column - Dark</h2>
+<div class="col col-dark o-grid o-grid--col-min-width">
+  {{> @c-card--many-variable }}
+  {{> @c-card--one-with-grid }}
+  {{> @c-card--one-with-grid only-standard=true}}
+</div>

package/src/lib/_imports/components/c-card/config.yml

@@ -2,6 +2,7 @@ status: ready
 context:
   shouldLoadCMS: true
   📝 shouldLoadCMS: this pattern is not intended nor expected for use beyond CMS
+  shouldLoadBootstrap: true
 variants:
   - name: default
     label: Default (Transparent)

package/src/lib/_imports/components/c-card.css

@@ -1,5 +1,6 @@
 @import url("../objects/o-section.selectors.css");
 @import url("../tools/selectors.css");
+@import url("../tools/x-link.css");
 
 @import url("./c-button.selectors.css");
 @import url("./c-card.selectors.css");
@@ -64,12 +65,15 @@
 :--c-card--standard-2,
 :--o-section--muted :--c-card--standard,
 :--o-section--muted :--c-card--plain,
+.col-muted :--c-card--standard,
+.col-muted :--c-card--plain,
 :--c-card :--c-card--standard,
 :--c-card :--c-card--plain {
     background-color: var(--global-color-primary--xx-light);
 }
 :--c-card--standard-2,
 :--o-section--muted :--c-card--standard,
+.col-muted :--c-card--standard,
 :--c-card :--c-card--standard {
     border-top-color: var(--global-color-accent--tertiary);
 }
@@ -77,22 +81,31 @@
 /* On Muted + Within Card & On Dark + Within Card */
 :--o-section--muted :--c-card :--c-card--plain,
 :--o-section--muted :--c-card :--c-card--standard,
+.col-muted :--c-card :--c-card--plain,
+.col-muted :--c-card :--c-card--standard,
 :--o-section--dark :--c-card :--c-card--plain,
-:--o-section--dark :--c-card :--c-card--standard {
+:--o-section--dark :--c-card :--c-card--standard,
+.col-dark :--c-card :--c-card--plain,
+.col-dark :--c-card :--c-card--standard {
     background-color: var(--global-color-primary--x-light);
 }
 
 /* On Dark */
 :--c-card--standard-3,
 :--o-section--dark :--c-card--standard,
-:--o-section--dark :--c-card--plain {
+:--o-section--dark :--c-card--plain,
+.col-dark :--c-card--standard,
+.col-dark :--c-card--plain {
     background-color: var(--global-color-primary--xx-light);
     border-top-color: var(--global-color-accent--secondary);
 }
 /* To color text with greater specificity than .o-section does */
 :--o-section--dark :--c-card--plain > *:not(a, button),
 :--o-section--dark :--c-card--standard > *:not(a, button),
-:--o-section--dark :--c-card--standard-N > *:not(a, button) {
+:--o-section--dark :--c-card--standard-N > *:not(a, button),
+.col-dark :--c-card--plain > *:not(a, button),
+.col-dark :--c-card--standard > *:not(a, button),
+.col-dark :--c-card--standard-N > *:not(a, button) {
     color: var(--global-color-primary--xx-dark);
 }
 
@@ -116,7 +129,7 @@
 :--c-card > p > a:not(:--c-button):has(.icon):not(:last-child) {
     margin-right: 1rem;
 }
-:--c-card > :is(:--action) {
+:--c-card > :--action:not(:--c-card__image) {
     vertical-align: middle;
 
     margin-bottom: 2rem; /* mimic <p> `margin-bottom` */
@@ -243,8 +256,8 @@
     /* Repeat many times, because element count is unknown */
     grid-template-rows: repeat(10, min-content);
 }
-:--c-card--image-left > img,
-:--c-card--image-right > img {
+:--c-card--image-left > :--c-card__image,
+:--c-card--image-right > :--c-card__image {
     grid-row-start: 1;
     grid-row-end: -1;
 
@@ -255,7 +268,7 @@
 :--c-card--image-left {
     grid-template-columns: var(--image-width) 1fr; /* to overwrite `.c-card` */
 }
-:--c-card--image-left > img {
+:--c-card--image-left > :--c-card__image {
     grid-column-start: 1;
     grid-column-end: span 1;
 }
@@ -263,7 +276,7 @@
 :--c-card--image-right {
     grid-template-columns: 1fr var(--image-width); /* to overwrite `.c-card` */
 }
-:--c-card--image-right > img {
+:--c-card--image-right > :--c-card__image {
     grid-column-start: 2;
     grid-column-end: span 1;
 }
@@ -283,20 +296,20 @@
     grid-template-columns: var(--global-space--pattern-pad) 1fr var(--global-space--pattern-pad);
     padding-inline: unset;
 }
-:--c-card--image-top > :not(img),
-:--c-card--image-bottom > :not(img) {
+:--c-card--image-top > :not(:--c-card__image),
+:--c-card--image-bottom > :not(:--c-card__image) {
     /* Span only columns for content */
     grid-column-start: 2;
     grid-column-end: -2;
 }
-:--c-card--image-top > img,
-:--c-card--image-bottom > img {
+:--c-card--image-top > :--c-card__image,
+:--c-card--image-bottom > :--c-card__image {
     /* Span all columns, padding and content */
     grid-column-start: 1;
     grid-column-end: -1;
 }
 
-:--c-card--image-top > img {
+:--c-card--image-top > :--c-card__image {
     grid-row-start: 1;
     margin-bottom: var(--global-space--pattern-pad);
 }
@@ -304,7 +317,7 @@
     margin-top: unset; /* to avoid combining margin with image */
 }
 
-:--c-card--image-bottom > img {
+:--c-card--image-bottom > :--c-card__image {
     grid-row-end: -1;
     margin-top: var(--global-space--pattern-pad);
 }
@@ -312,6 +325,21 @@
     margin-bottom: unset; /* to avoid combining margin with image */
 }
 
+/* Image: Link */
+
+:--c-card__image-link {
+    @mixin block-link;
+}
+:--c-card__image-link:not([href]) {
+    @mixin block-link--disabled;
+}
+:--c-card__image-link:hover {
+    @mixin block-link--hover;
+}
+:--c-card__image-link:active {
+    @mixin block-link--active;
+}
+
 /* Image: Contact Card */
 
 :--c-card--image-top h4 {

package/src/lib/_imports/components/c-card.selectors.css

@@ -50,3 +50,10 @@
 @custom-selector :--c-card--image-right
     .c-card--image-right,
     .card--image-right;
+
+@custom-selector :--c-card__image
+    img,
+    :--c-card__image-link;
+
+@custom-selector :--c-card__image-link
+    a:has(> img);

package/src/lib/_imports/settings/color--cms.css

@@ -14,6 +14,7 @@
 @custom-selector :--dark-context
   .c-recognition--style-dark,
   :--o-section--dark,
+  .col-dark,
   .s-footer;
 
 @custom-selector :--light-context-safe

package/src/lib/_imports/tools/x-link.css

@@ -1,3 +1,5 @@
+/* Regular Links */
+
 @define-mixin link {
   color: var(--global-color-accent--normal);
 
@@ -41,6 +43,10 @@
   @mixin link--active;
 }
 
+
+
+/* Irregular Links */
+
 @define-mixin link--irregular {
   @mixin link;
 
@@ -59,7 +65,6 @@
   @mixin link--irregular--disabled;
 }
 
-
 @define-mixin link--irregular--hover {
   @mixin link--hover;
 
@@ -79,3 +84,27 @@
 .x-link--irregular--active {
   @mixin link--irregular--active;
 }
+
+
+
+/* Block Links */
+
+@define-mixin block-link {
+  --border-width: var(--global-border-width--thick);
+
+  outline-color: var(--global-color-accent--normal);
+
+  outline-width: var(--border-width);
+}
+
+@define-mixin block-link--disabled {
+  @mixin link--disabled;
+}
+
+@define-mixin block-link--hover {
+  outline-style: solid;
+}
+
+@define-mixin block-link--active {
+  outline-style: dotted;
+}