@tacc/core-styles 0.11.0 → 2.0.0

package/src/lib/_imports/components/c-card/_c-card--many-variable.hbs

@@ -0,0 +1,107 @@
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>{{> @text-of-one-paragraph-short }}</p>
+
+    <a href="#"><i class="icon icon-push-right">&gt;</i> Learn more</a>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>{{> @text-of-one-paragraph-short }}</p>
+
+    <a href="#" class="c-button c-button--primary">Action</a>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>{{> @text-of-one-paragraph-short }}</p>
+
+    <a href="#"><i class="icon icon-push-right">&gt;</i> Learn more</a>
+    <a href="#" class="c-button c-button--primary">Action</a>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>{{> @text-of-one-paragraph-short }}</p>
+
+    <a href="#" class="c-button c-button--primary">Action</a>
+    <a href="#" class="c-button c-button--primary">
+        <i class="icon icon-user">&gt;</i>
+        Action + Icon
+    </a>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>Any <button class="c-button c-button--as-link">button--as-link</button> and any <a href="#">link</a> are <em>not</em> considered card actions and should <em>not</em> be affected by card styles.</p>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>{{> @text-of-one-paragraph-short }}</p>
+
+    <a href="#"><i class="icon icon-push-left">&gt;</i> Learn less</a>
+    <a href="#"><i class="icon icon-push-right">&gt;</i> Learn more</a>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>{{> @text-of-one-paragraph-short }}</p>
+
+    <a href="#" class="c-button c-button--primary">Action 1</a>
+    <a href="#" class="c-button c-button--primary">Action 2</a>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>{{> @text-of-one-paragraph-short }}</p>
+
+    <a href="#" class="c-button c-button--primary">Action 1</a>
+    <a href="#" class="c-button c-button--primary">Action 2</a>
+    <a href="#"><i class="icon icon-push-right">&gt;</i> Learn more</a>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>If actions are wrapped in a <kbd>&lt;p&gt;</kbd> tag, automatic layout is abandoned.</p>
+
+    <p>
+        <a href="#" class="c-button c-button--primary">Action 1</a>
+        <a href="#" class="c-button c-button--primary">Action 2</a>
+    </p>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>If actions are wrapped in a <kbd>&lt;p&gt;</kbd> tag, automatic layout is abandoned.</p>
+
+    <p>
+        <a href="#"><i class="icon icon-push-left">&gt;</i> Learn less</a>
+        <a href="#"><i class="icon icon-push-right">&gt;</i> Learn more</a>
+    </p>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>If you wrap actions in a <kbd>&lt;p&gt;</kbd> tag, vertical spacing will be slightly off.*</p>
+
+    <a href="#" class="c-button c-button--primary">Action 1</a>
+    <a href="#" class="c-button c-button--primary">Action 2</a>
+    <p>
+        <a href="#"><i class="icon icon-push-right">&gt;</i> Learn more</a>
+    </p>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>If you wrap actions in a <kbd>&lt;p&gt;</kbd> tag, vertical spacing will be slightly off.*</p>
+
+    <p>
+        <a href="#" class="c-button c-button--primary">Action 1</a>
+        <a href="#" class="c-button c-button--primary">Action 2</a>
+    </p>
+    <a href="#"><i class="icon icon-push-right">&gt;</i> Learn more</a>
+</article>
+
+<p style="grid-column: 1/-1;">* Wrapping in a <kbd>&lt;p&gt;</kbd> tag was a fix in early 2023-01, but is now non-standard.</p>

package/src/lib/_imports/components/c-card/_c-card--one-image.hbs

@@ -0,0 +1,6 @@
+<article class="c-card c-card--image">
+  <h3>Card - Image</h3>
+  <!--<p>{{> @text-of-one-paragraph-short }}</p>-->
+  <p class="c-message c-message--scope-inline c-message--type-warning">Styles not in Core yet. See <a href="https://dev.tup.tacc.utexas.edu/design-system/pattern-library-manual/c-card/">TUP Demo</a> instead.</p>
+  <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" />
+</article>

package/src/lib/_imports/components/c-card/_c-card--one-plain.hbs

@@ -0,0 +1,4 @@
+<article class="c-card c-card--plain">
+  <h3>Card - Plain</h3>
+  <p>{{> @text-of-one-paragraph-short }}</p>
+</article>

package/src/lib/_imports/components/c-card/_c-card--one-standard.hbs

@@ -0,0 +1,15 @@
+{{#if variant}}
+
+<article class="c-card c-card--standard-{{variant}}">
+  <h3>Card - Standard {{variant}}</h3>
+  <p>This is a backup variant. <span class="c-message--scope-inline c-message--type-warning">Only use if <code>c-card--standard</code> fails.</span></p>
+</article>
+
+{{else}}
+
+<article class="c-card c-card--standard">
+  <h3>Card - Standard</h3>
+  <p>{{> @text-of-one-paragraph-short }}</p>
+</article>
+
+{{/if}}

package/src/lib/_imports/components/c-card/_c-card--one-transparent.hbs

@@ -0,0 +1,4 @@
+<article class="c-card">
+  <h3>Card - Default (Transparent)</h3>
+  <p>{{> @text-of-one-paragraph-short }}</p>
+</article>

package/src/lib/_imports/components/c-card/_c-card--one-with-grid.hbs

@@ -0,0 +1,26 @@
+{{#if only-standard}}
+
+<article class="c-card c-card--{{this._self.name}}">
+  <h3>Card - {{this._self.label}}</h3>
+  <p>Standard card and its explicit variations. <span class="c-message--scope-inline c-message--type-warning">The explicit variations are only if <code>c-card--standard</code> automatic variation fails and cannot be fixed fast enough.</span></p>
+  <div class="o-grid o-grid--col-min-width">
+    {{> @c-card--one-standard }}
+    {{> @c-card--one-standard variant=1 }}
+    {{> @c-card--one-standard variant=2 }}
+    {{> @c-card--one-standard variant=3 }}
+  </div>
+</article>
+
+{{else}}
+
+<article class="c-card c-card--{{this._self.name}}">
+  <h3>Card - {{this._self.label}}</h3>
+  <div class="o-grid o-grid--col-min-width">
+    {{> @c-card--one-transparent }}
+    {{> @c-card--one-plain }}
+    {{> @c-card--one-standard }}
+    {{> @c-card--one-image }}
+  </div>
+</article>
+
+{{/if}}

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

@@ -0,0 +1,5 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+.o-grid--col-min-width {
+  --width: 320px;
+}

package/src/lib/_imports/components/{c-card.html → c-card/c-card--frontera.hbs}

@@ -1,5 +1,6 @@
-<div class="o-grid o-grid--col-min-width" style="--width: 320px">
-  <a href="./" class="c-card {{modifier_class}}">
+<!-- FAQ: Not using {{this._self.name}} because class is frontera-about-page -->
+<div class="o-grid o-grid--col-min-width">
+  <a href="#" class="c-card c-card--frontera-about-page">
     <figure>
       <img
         src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
@@ -9,7 +10,7 @@
     </figure>
   </a>
 
-  <a href="./" class="c-card {{modifier_class}}">
+  <a href="#" class="c-card c-card--frontera-about-page">
     <figure>
       <img
         src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
@@ -19,7 +20,7 @@
     </figure>
   </a>
 
-  <a href="./" class="c-card {{modifier_class}}">
+  <a href="#" class="c-card c-card--frontera-about-page">
     <img
       src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
       alt=""
@@ -27,7 +28,7 @@
     <h3>Link ▸ Image + Text</h3>
   </a>
 
-  <div class="c-card {{modifier_class}}" style="display: inline-block">
+  <div class="c-card c-card--frontera-about-page">
     <figure>
       <img
         src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
@@ -37,7 +38,7 @@
     </figure>
   </div>
 
-  <div class="c-card {{modifier_class}}" style="display: inline-block">
+  <div class="c-card c-card--frontera-about-page">
     <img
       src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
       alt=""

package/src/lib/_imports/components/c-card/c-card--frontera.readme.md

@@ -0,0 +1,5 @@
+A container (that may be a link) with an image and a large heading beneath it.
+
+> **ⓧ Deprecated**
+>
+> This was created for an incomplete About page on [Frontera (dev) website](https://dev.fronteraweb.tacc.utexas.edu/). It is not intended to be used further. It is replaced by other card types or patterns.

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

@@ -0,0 +1,11 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+/* To make a card with a grid inside span all columns */
+.o-section > .c-card:has(.o-grid) {
+  grid-column: 1/-1
+}
+
+/* To prevent cards from stretching to match grid's equal row height */
+.o-grid--col-min-width {
+  grid-auto-rows: unset;
+}

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

@@ -0,0 +1,36 @@
+<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  o-grid o-grid--col-min-width">
+  {{> @c-card--many-variable }}
+  {{> @c-card--one-with-grid }}
+  {{> @c-card--one-with-grid only-standard=true}}
+</section>
+<hr />
+<h2 id="section--light">Section - Light</h2>
+<section class="o-section o-section--style-light  o-grid o-grid--col-min-width">
+  {{> @c-card--many-variable }}
+  {{> @c-card--one-with-grid }}
+  {{> @c-card--one-with-grid only-standard=true}}
+</section>
+<hr />
+<h2 id="section--muted">Section - Muted</h2>
+<section class="o-section o-section--style-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}}
+</section>
+<hr />
+<h2 id="section--dark">Section - Dark</h2>
+<section class="o-section o-section--style-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}}
+</section>

package/src/lib/_imports/components/c-card/c-card.readme.md

@@ -0,0 +1,33 @@
+Container with content and action(s) about a single subject.
+
+| Class (Std.)               | Class (Alt.)             | Description
+| - | - | - |
+| `.c-card`                  | `.card`                  | add padding to content
+| `.c-card--plain`           | `.card--plain`           | add background*
+| `.c-card--plain-hr-top`    | `.card--plain-hr-top`    | prepend an `<hr>`
+| `.c-card--plain-hr-bottom` | `.card--plain-hr-bottom` | append an `<hr>`
+| `.c-card--standard`        | `.card--standard`        | add background + border*
+
+<small>* Colors depend on card context/parent.</small>
+
+---
+
+Future features that will be added when client testing is complete:
+
+| Class (Std.)               | Class (Alt.)             | Description
+| - | - | - |
+| `.c-card--image-...`       | `.card--image-...`       | position a single image
+| `.c-card--image-top`       | `.card--image-top`       | position image to top
+| `.c-card--image-bottom`    | `.card--image-bottom`    | position image to bottom
+| `.c-card--image-left`      | `.card--image-left`      | position image to left
+| `.c-card--image-right`     | `.card--image-right`     | position image to right
+
+---
+
+Backup classes if `c-card--standard` automatic styles fail:
+
+| Class (Std.)          | Class (Alt.)        | Description
+| - | - | - |
+| `.c-card--standard-1` | `.card--standard-1` | teal border, gray background
+| `.c-card--standard-2` | `.card--standard-2` | teal border, white background
+| `.c-card--standard-3` | `.card--standard-3` | brown border, white background

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

@@ -0,0 +1,23 @@
+context:
+  shouldLoadCMS: true
+  📝 shouldLoadCMS: this pattern is not intended nor expected for use beyond CMS
+variants:
+  - name: default
+    label: Default (Transparent)
+  - name: plain
+  - name: standard
+  - name: standard-1
+    status: backup
+  - name: standard-2
+    status: backup
+  - name: standard-3
+    status: backup
+  # - name: image
+  #   status: prototype
+  - name: frontera
+    status: deprecated
+    📝 name: using "frontera-about-page" breaks the demo
+    label: Frontera About Page
+    context:
+      supportStyles:
+        - ../../assets/components/c-card--frontera-about-page.css

package/src/lib/_imports/components/c-card--frontera-about-page.css

@@ -0,0 +1,48 @@
+@import url("../tools/x-article-link.css");
+
+.c-card--frontera-about-page {
+  width: fit-content;
+
+  border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+  margin-bottom: 4.6rem;
+}
+
+
+
+/* Plugins */
+
+/* Plugins: Link / Image with Link */
+a.c-card--frontera-about-page {
+  display: inline-block;
+}
+a.c-card--frontera-about-page /* FAQ: Links may be underlined by default */,
+a.c-card--frontera-about-page:hover {
+  text-decoration: none;
+}
+a.c-card--frontera-about-page:hover { @extend %x-article-link-hover; }
+a.c-card--frontera-about-page:active { @extend %x-article-link-active; }
+
+/* Plugins: * > Image + Text */
+.c-card--frontera-about-page img + h3 {
+  color: var(--global-color-primary--xx-dark);
+  font-size: var(--global-font-size--x-large);
+  font-weight: var(--bold);
+
+  margin-top: 1.6rem;
+}
+.c-card--frontera-about-page img ~ :last-child {
+  margin-bottom: 1.25rem;
+}
+
+/* Plugins: * > Image with Caption */
+.c-card--frontera-about-page figure {
+  margin: 0;
+}
+.c-card--frontera-about-page figcaption {
+  color: var(--global-color-primary--xx-dark);
+  font-size: var(--global-font-size--x-large);
+  font-weight: var(--bold);
+
+  margin-top: 1.6rem;
+  margin-bottom: 1.25rem;
+}

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

@@ -1,57 +1,188 @@
-/*
-Card
+@import url("../objects/o-section.selectors.css");
+@import url("../tools/selectors.css");
 
-Container with content and action(s) about a single subject.
+@import url("./c-card.selectors.css");
 
-> __ℹ️ Notice__: No default styling.
 
-.c-card--frontera-about-page - Container/Link with image and large heading below
 
-Markup: c-card.html
 
-Styleguide Components.Card
-*/
-@import url("../tools/x-article-link.css");
+
+/* Settings */
+
+:root {
+    --global-space--bootstrap-gap: 30px;
+    --global-space--pattern-pad: 30px;
+    --global-space--unnamed: 50px;
+    --global-border-width--xx-thick: 5px;
+}
+
+
+
+
+
+/* Skin */
+/* NOTE: Design text color discrepency… text color should match that of body */
+
+
 
 /* Modifiers */
 
+/* Modifiers: Plain  */
+
+:--c-card--plain-hr-top {
+    border-top: 1px solid var(--global-color-primary--dark); /* mimic <hr> */
+    margin-top: var(--global-space--hr-buffer-below); /* mimic <hr> */
+}
+:--c-card--plain-hr-bottom {
+    border-bottom: 1px solid var(--global-color-primary--dark); /* mimic <hr> */
+    margin-bottom: var(--global-space--hr-buffer-below); /* mimic <hr> */
+}
+
+/* Modifiers: Standard  */
+
+:--c-card--standard-N,
+:--c-card--standard {
+    border-top-style: solid;
+    border-top-width: var(--global-border-width--xx-thick);
+}
+
+/* Modifiers: Plain & Standard & within Section */
+
+/* Default (On Light) */
+:--c-card--standard-1,
+:--c-card--standard,
+:--c-card--plain {
+    background-color: var(--global-color-primary--x-light);
+    border-top-color: var(--global-color-accent--tertiary);
+}
+:--c-card--standard-N,
+:--c-card--standard,
+:--c-card--plain {
+    box-shadow: 0px 3px 6px #0003;
+}
+
+/* On Muted & Within Card */
+:--c-card--standard-2,
+:--o-section--muted :--c-card--standard,
+:--o-section--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,
+:--c-card :--c-card--standard {
+    border-top-color: var(--global-color-accent--tertiary);
+}
+
+/* On Muted + Within Card & On Dark + Within Card */
+:--o-section--muted :--c-card :--c-card--plain,
+:--o-section--muted :--c-card :--c-card--standard,
+:--o-section--dark :--c-card :--c-card--plain,
+:--o-section--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 {
+    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) {
+    color: var(--global-color-primary--xx-dark);
+}
+
 
 
-/* Modifiers: Frontera About Page */
 
-.c-card--frontera-about-page {
-  width: fit-content;
 
-  border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark);
-  margin-bottom: 4.6rem;
+/* Structure */
+
+/* Elements */
+:--c-card > a:not(.c-button) {
+    display: inline-block; /* FAQ: for actions that do not yet have this */
+}
+:--c-card > :is(:--action) {
+    vertical-align: middle;
+
+    margin-bottom: 2rem; /* mimic <p> `margin-bottom` */
+    margin-right: var(--global-space--pattern-pad);
 }
 
-/* Plugins: Link / Image with Link */
-a.c-card--frontera-about-page {
-  display: inline-block;
+/* Block */
+:--c-card {
+    padding-inline: var(--global-space--pattern-pad);
+    padding-top: var(--global-space--pattern-pad);
+    /* FAQ: Let child elements' margin-bottom be the padding bottom */
+    padding-bottom: 0.1px; /* to remove padding, but retain child margin */
 
-  text-decoration: none;
+    margin-bottom: var(--global-space--bootstrap-gap);
 }
-a.c-card--frontera-about-page:hover { @extend %x-article-link-hover; }
-a.c-card--frontera-about-page:active { @extend %x-article-link-active; }
 
-/* Plugins: * > Image + Text */
-.c-card--frontera-about-page img + h3 {
-  margin-top: 1.6rem;
+
+
+/* XXX: Commented out cuz it seems like an exception or the wrong solution */
+/*
+/* To tweak full-width children *//*
+/* - To add space  *//*
+.col:nth-child(4):last-child :--c-card--standard,
+.col:nth-child(4):last-child :--c-card--standard-N {
+    margin-top: var(--global-space--unnamed);
+}
+/* - To remove border *//*
+.col:nth-child(4):last-child > :--c-card--standard,
+.col:nth-child(4):last-child > :--c-card--standard-N {
+    border-top: none;
 }
-.c-card--frontera-about-page img ~ :last-child {
-  margin-bottom: 1.25rem;
+*/
+
+
+
+/* To add space between rows of boxes */
+/* XXX: Commented out until we know whether we want context-based spacing */
+/*
+:--c-card--standard:not( .col:only-child > * )
+:--c-card--standard-N:not( .col:only-child > * ) {
+    margin-bottom: var(--global-space--bootstrap-gap);
+}
+/* To eat the margin-bottom of bottom row of blocks so padding is consistent *\/
+:--c-card--standard:has( .row:last-child:not(:first-child) ),
+:--c-card--standard-N:has( .row:last-child:not(:first-child) ) {
+    padding-bottom: calc(
+       var(--global-space--pattern-pad) - var(--global-space--bootstrap-gap)
+    );
+}
+*/
+
+
+
+
+
+/* Elements */
+
+/* To remove undesired space */
+:--c-card :is(h1, h2, h3, h4, h5, h6) {
+    margin-top: unset;
+}
+
+/* To make buttons bold */
+/* TODO: Determine whether this should apply to all CMS buttons */
+:--c-card a.c-button {
+    font-weight: var(--bold);
 }
 
-/* Plugins: * > Image with Caption */
-.c-card--frontera-about-page figure {
-  margin: 0;
+/* To reduce font size of mailto link */
+:--c-card a[data-user][data-domain]::before {
+    font-size: var(--global-font-size--medium);
 }
-.c-card--frontera-about-page figcaption {
-  color: var(--global-color-primary--xx-dark);
-  font-size: var(--global-font-size--x-large);
-  font-weight: var(--bold);
 
-  margin-top: 1.6rem;
-  margin-bottom: 1.25rem;
+/* Miscellaneous */
+:--c-card > address {
+    line-height: 1.7;
+    margin-bottom: 2rem; /* to mimic <p> */
 }

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

@@ -0,0 +1,38 @@
+@import url("../tools/selectors.css");
+
+@custom-selector :--c-card
+    .c-card,
+    /* So Portal nor its modals loads TACC card styles */
+    /* CAVEAT: CMS can not load cards in modals (but it would not anyway) */
+    /* TODO: When Portal does not load core-styles.cms.css remove the :not(…) */
+    .card:not(:is(:--portal-content, .modal) *),
+    [class*="card--"];
+@custom-selector :--c-card--standard
+    .c-card--standard,
+    .card--standard;
+@custom-selector :--c-card--standard-1
+    .c-card--standard-1,
+    .card--standard-1;
+@custom-selector :--c-card--standard-2
+    .c-card--standard-2,
+    .card--standard-2;
+@custom-selector :--c-card--standard-3
+    .c-card--standard-3,
+    .card--standard-3;
+@custom-selector :--c-card--standard-N
+    .c-card--standard-1,
+    .c-card--standard-2,
+    .c-card--standard-3;
+@custom-selector :--c-card--plain
+    .c-card--plain,
+    .card--plain,
+    [class*="card--plain-"];
+@custom-selector :--c-card--plain-hr-top
+    .c-card--plain-hr-top,
+    .card--plain-hr-top;
+@custom-selector :--c-card--plain-hr-bottom
+    .c-card--plain-hr-bottom,
+    .card--plain-hr-bottom;
+@custom-selector :--c-card--image
+    .c-card--image,
+    .card--image;

package/src/lib/_imports/components/c-data-list/config.yml

@@ -0,0 +1,9 @@
+context:
+  data:
+    key-value-pairs:
+      - key: System Processor
+        value: 560 GB
+      - key: Types of Antimatter
+        value: 3 theorized, 1 actual
+      - key: Quantum Nodes
+        value: Several