@tacc/core-styles 1.0.0 → 2.0.0

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

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

@@ -0,0 +1,68 @@
+collated: true
+name: c-data-list--list
+label: '<dl> Description List'
+# NOTE: Variant config is mirrored on `../list/config` and `../table/config`
+# NOTE: Can `../list/config` and `../table/config` have source of truth?
+variants:
+  - name: default
+    hidden: True
+  - name: horz-wide
+    label: Horz. & Wide
+    context:
+      class: |-
+        c-data-list
+        c-data-list--is-horz
+        c-data-list--is-wide
+  - name: horz-wide
+    label: Horz. & Wide (Values Truncated)
+    context:
+      class: |-
+        c-data-list
+        c-data-list--is-horz
+        c-data-list--is-wide
+        c-data-list--should-truncate-values
+  - name: horz-narrow
+    label: Horz. & Narrow
+    context:
+      class: |-
+        c-data-list
+        c-data-list--is-horz
+        c-data-list--is-narrow
+  - name: horz-narrow
+    label: Horz. & Narrow (Values Truncated)
+    context:
+      class: |-
+        c-data-list
+        c-data-list--is-horz
+        c-data-list--is-narrow
+        c-data-list--should-truncate-values
+  - name: vert-wide
+    label: Vert. & Wide
+    context:
+      class: |-
+        c-data-list
+        c-data-list--is-vert
+        c-data-list--is-wide
+  - name: vert-wide
+    label: Vert. & Wide (Values Truncated)
+    context:
+      class: |-
+        c-data-list
+        c-data-list--is-vert
+        c-data-list--is-wide
+        c-data-list--should-truncate-values
+  - name: vert-narrow
+    label: Vert. & Narrow
+    context:
+      class: |-
+        c-data-list
+        c-data-list--is-vert
+        c-data-list--is-narrow
+  - name: vert-narrow
+    label: Vert. & Narrow (Values Truncated)
+    context:
+      class: |-
+        c-data-list
+        c-data-list--is-vert
+        c-data-list--is-narrow
+        c-data-list--should-truncate-values

package/src/lib/_imports/components/c-data-list/description-list/description-list.hbs

@@ -0,0 +1,4 @@
+<dl>
+    <dt><pre><code>{{ class }}</code></pre></dt>
+    <dd>{{> @dl data=data class=class}}</dd>
+</dl>

package/src/lib/_imports/components/c-data-list/description-list/readme.md

@@ -0,0 +1,8 @@
+Use [a Description List](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl).
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/components/c-data-list/readme.md

@@ -0,0 +1,8 @@
+Suitable markup is [Table elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#table_content) and [Description Lists](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl).
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

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

@@ -0,0 +1,68 @@
+collated: true
+name: c-data-list--table
+label: '<table> Table'
+# NOTE: Variant config is mirrored on `../list/config` and `../table/config`
+# NOTE: Can `../list/config` and `../table/config` have source of truth?
+variants:
+  - name: default
+    hidden: True
+  - name: horz-wide
+    label: Horz. & Wide
+    context:
+      class: |-
+        c-data-list
+        c-data-list--is-horz
+        c-data-list--is-wide
+  - name: horz-wide
+    label: Horz. & Wide (Values Truncated)
+    context:
+      class: |-
+        c-data-list
+        c-data-list--is-horz
+        c-data-list--is-wide
+        c-data-list--should-truncate-values
+  - name: horz-narrow
+    label: Horz. & Narrow
+    context:
+      class: |-
+        c-data-list
+        c-data-list--is-horz
+        c-data-list--is-narrow
+  - name: horz-narrow
+    label: Horz. & Narrow (Values Truncated)
+    context:
+      class: |-
+        c-data-list
+        c-data-list--is-horz
+        c-data-list--is-narrow
+        c-data-list--should-truncate-values
+  - name: vert-wide
+    label: Vert. & Wide
+    context:
+      class: |-
+        c-data-list
+        c-data-list--is-vert
+        c-data-list--is-wide
+  - name: vert-wide
+    label: Vert. & Wide (Values Truncated)
+    context:
+      class: |-
+        c-data-list
+        c-data-list--is-vert
+        c-data-list--is-wide
+        c-data-list--should-truncate-values
+  - name: vert-narrow
+    label: Vert. & Narrow
+    context:
+      class: |-
+        c-data-list
+        c-data-list--is-vert
+        c-data-list--is-narrow
+  - name: vert-narrow
+    label: Vert. & Narrow (Values Truncated)
+    context:
+      class: |-
+        c-data-list
+        c-data-list--is-vert
+        c-data-list--is-narrow
+        c-data-list--should-truncate-values

package/src/lib/_imports/components/c-data-list/table/readme.md

@@ -0,0 +1,12 @@
+Use [Table elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#table_content).
+
+> **✓ Hint**
+>
+> Narrow the viewport to see truncation of values.
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/components/c-data-list/table/table.hbs

@@ -0,0 +1,4 @@
+<dl>
+    <dt><pre><code>{{ class }}</code></pre></dt>
+    <dd>{{> @table data=data class=class}}</dd>
+</dl>