@tacc/core-styles 2.6.1 → 2.7.0

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

@@ -14,6 +14,12 @@ variants:
     status: backup
   # - name: image
   #   status: prototype
+  - name: docs
+    status: ready
+    context:
+      shouldLoadDocs: true
+      supportStyles:
+        - ../../assets/objects/o-grid.css
   - name: frontera
     status: deprecated
     📝 name: using "frontera-about-page" breaks the demo

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

@@ -0,0 +1,34 @@
+@import url("./c-card.selectors.css");
+
+
+
+/* To make card paragraphs match those in Core CMS */
+:--c-card p {
+  margin-top: 0; /* mimics Bootstrap _reboot.scss */
+}
+
+
+
+/* To style a linked card */
+:--c-card:not(:--c-card--image) {
+  display: block;
+}
+:--c-card,
+:--c-card:hover /* overwrite core-styles.base.css */ {
+  color: inherit;
+}
+:--c-card:hover {
+  text-decoration: none;
+}
+:--c-card:hover :is( h1, h2, h3, h4, h5, h6 ) {
+  /* To mimic TACC/Core-Styles .x-link */
+  text-underline-offset: 0.2em;
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-thickness: var(--global-border-width--normal);
+}
+:--c-card:active :is( h1, h2, h3, h4, h5, h6 ) {
+  /* To mimic TACC/Core-Styles .x-link */
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+}

package/src/lib/_imports/components/c-card--from-tup-cms.css

@@ -0,0 +1,135 @@
+@import url("./c-card.selectors.css");
+
+/* FIX CARD */
+
+/* XXX: When migrated:
+        2. Prevent these styles in apps/tup-ui TicketHistory CSS */
+:--c-card p:last-child {
+    margin-bottom: 2rem; /* restore <p> `margin-bottom `*/
+}
+
+/* To more specifically control c-card link font weight */
+/* XXX: When migrated:
+        2. Prevent these styles in apps/tup-ui TicketHistory CSS */
+:--c-card a.c-button {
+    font-weight: var(--bold);
+}
+
+:--c-card h4 {
+    margin-bottom: 1em;
+}
+
+
+
+
+
+/* ADD CARD--IMAGE */
+
+/* Image */
+
+:--c-card--image {
+    display: grid;
+}
+
+:--c-card--image-top {
+    padding-top: 0;
+}
+:--c-card--image-left {
+    padding-left: 0;
+    padding-bottom: var(--global-space--pattern-pad);
+}
+:--c-card--image-right {
+    padding-right: 0;
+    padding-bottom: var(--global-space--pattern-pad);
+}
+:--c-card--image-bottom {
+    padding-bottom: 0;
+}
+
+
+
+/* Image: Left & Right */
+
+:--c-card--image-left,
+:--c-card--image-right {
+    --image-width: 50%;
+
+    grid-column-gap: var(--global-space--pattern-pad);
+
+    /* 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 {
+    grid-row-start: 1;
+    grid-row-end: -1;
+
+    /* To remove card padding */
+    margin-block: calc( -1 * var(--global-space--pattern-pad) );
+}
+
+:--c-card--image-left {
+    grid-template-columns: var(--image-width) 1fr; /* to overwrite `.c-card` */
+}
+:--c-card--image-left > img {
+    grid-column-start: 1;
+    grid-column-end: span 1;
+}
+
+:--c-card--image-right {
+    grid-template-columns: 1fr var(--image-width); /* to overwrite `.c-card` */
+}
+:--c-card--image-right > img {
+    grid-column-start: 2;
+    grid-column-end: span 1;
+}
+
+
+
+/* Image: Top & Bottom */
+
+:--c-card--image-top,
+:--c-card--image-bottom {
+    --image-height: auto;
+    --global-space--pattern-pad: 15px;
+
+    /* Use extra columns to add horizontal padding */
+    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) {
+    /* Span only columns for content */
+    grid-column-start: 2;
+    grid-column-end: -2;
+}
+:--c-card--image-top > img,
+:--c-card--image-bottom > img {
+    /* Span all columns, padding and content */
+    grid-column-start: 1;
+    grid-column-end: -1;
+}
+
+:--c-card--image-top {
+    /* Repeat many times, because element count is unknown */
+    grid-template-rows: repeat(10, min-content) var(--image-height);
+}
+:--c-card--image-top > img {
+    grid-row-start: 1;
+    margin-bottom: var(--global-space--pattern-pad);
+}
+:--c-card--image-bottom > :is(h1, h2, h3, h4, h5):first-of-type {
+    margin-top: unset; /* to avoid combining margin with image */
+}
+
+:--c-card--image-bottom {
+    /* Repeat many times, because element count is unknown */
+    grid-template-rows: var(--image-height) repeat(10, min-content);
+}
+:--c-card--image-bottom > img {
+    grid-row-end: -1;
+    margin-top: var(--global-space--pattern-pad);
+}
+:--c-card--image-bottom > p:last-of-type {
+    margin-bottom: unset; /* to avoid combining margin with image */
+}

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

@@ -7,6 +7,7 @@
     /* 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;
@@ -23,6 +24,7 @@
     .c-card--standard-1,
     .c-card--standard-2,
     .c-card--standard-3;
+
 @custom-selector :--c-card--plain
     .c-card--plain,
     .card--plain,
@@ -33,6 +35,18 @@
 @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;
+    [class*="card--image-"];
+@custom-selector :--c-card--image-top
+    .c-card--image-top,
+    .card--image-top;
+@custom-selector :--c-card--image-bottom
+    .c-card--image-bottom,
+    .card--image-bottom;
+@custom-selector :--c-card--image-left
+    .c-card--image-left,
+    .card--image-left;
+@custom-selector :--c-card--image-right
+    .c-card--image-right,
+    .card--image-right;

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

@@ -1,7 +1,5 @@
 {{#warning}}
-<p class="c-message c-message--scope-global">
-  {{{ this }}}
-</p>
+{{> @message tag="p" content=this }}
 {{/warning}}
 
 <form action="" method="POST" enctype="multipart/form-data" class="c-form">

package/src/lib/_imports/components/c-message/_c-message--single.hbs

@@ -1,3 +1,7 @@
-<div class="c-message c-message--type-{{ type }} c-message--scope-{{ scope }}">
-  <p><strong>{{ title }}:</strong> {{{ content }}} <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.</p>
-</div>
+{{> @message
+    type=this.type
+    scope=this.scope
+    title=this.title
+    content=this.content
+    extra_content='<a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.'
+}}

package/src/lib/_imports/components/django-cms-forms/django-cms-forms.hbs

@@ -1,6 +1,7 @@
-<p class="c-message c-message--scope-global">
-  This component is maintained simuiltaneously with <a href="{{path '../detail/c-form' }}" target="_parent">C Form</code></a> and should look identical. Eventually, the two should have a single source of truth. To learn more, read <a href="https://confluence.tacc.utexas.edu/x/vJd9E" target="_blank">(Confluence) APCD - Form Markup &amp; Styles</a>.
-</p>
+{{> @message
+    tag="p"
+    content='This component is maintained simuiltaneously with <a href="../detail/c-form" target="_parent">C Form</code></a> and should look identical. Eventually, the two should have a single source of truth. To learn more, read <a href="https://confluence.tacc.utexas.edu/x/vJd9E" target="_blank">(Confluence) APCD - Form Markup &amp; Styles</a>.'
+}}
 <div class="forms">
 
   <h3 class="title">Title of Form</h3>

package/src/lib/_imports/core-styles.base.css

@@ -10,7 +10,6 @@
 /* GENERICS */
 /* Mostly from Bootstrap */
 /* https://confluence.tacc.utexas.edu/x/b53tDg */
-@import url("./generics/color.css");
 @import url('./generics/fonts.css');
 @import url("./generics/pseudo-elements.css");
 
@@ -41,7 +40,6 @@
 @import url("./components/c-island.css");
 @import url("./components/c-nav.css");
 @import url("./components/c-page.css");
-@import url("./components/c-recognition.css");
 @import url("./components/c-see-all-link.css");
 @import url("./components/c-tag.css");
 

package/src/lib/_imports/core-styles.cms.css

@@ -11,6 +11,7 @@
 /* GENERICS */
 /* Mostly from Bootstrap */
 /* https://confluence.tacc.utexas.edu/x/b53tDg */
+@import url("./generics/color--cms.css");
 
 /* ELEMENTS */
 @import url("./elements/root--cms.css");
@@ -28,11 +29,13 @@
 @import url("./objects/o-section.css");
 
 /* COMPONENTS */
+@import url("./components/bootstrap.modal--cms.css");
 @import url("./components/cortal.icon.css");
 @import url("./components/c-card.css");
 @import url("./components/c-form--cms.css");
 @import url("./components/c-message.css");
 @import url("./components/c-message--expanded.css");
+@import url("./components/c-recognition.css");
 /* TODO: Move to TACC/Core-CMS-Resources:/frontera-cms
         or — alternatively — TACC/Core-CMS */
 @import url("./components/c-card--frontera-about-page.css");

package/src/lib/_imports/core-styles.demo.css

@@ -8,7 +8,7 @@
 @import url("./settings/demo.css");
 
 /* GENERICS */
-/* (none) */
+@import url("./generics/color--demo.css");
 
 /* ELEMENTS */
 @import url("./elements/root--demo.css");
@@ -18,6 +18,7 @@
 /* (none) */
 
 /* COMPONENTS */
+@import url("./components/c-message.css");
 @import url("./components/demo.css");
 
 /* TRUMPS */

package/src/lib/_imports/core-styles.docs.css

@@ -7,6 +7,7 @@
 /* SETTINGS */
 /* To get most settings, client should load `./base.css` first */
 @import url("./settings/font--docs.css");
+@import url("./settings/color--docs.css");
 
 /* GENERICS */
 /* (none) */
@@ -21,12 +22,16 @@
 @import url("./elements/table.docs.css");
 
 /* OBJECTS */
-/* (none) */
+@import url("./objects/o-section.css");
+@import url("./objects/o-section--docs.css");
 
 /* COMPONENTS */
 @import url("./components/pymdownx--tabbed.css");
 @import url("./components/admonition.css");
 @import url("./components/align.css");
+@import url("./components/c-card.css");
+@import url("./components/c-card--from-tup-cms.css");
+@import url("./components/c-card--docs.css");
 @import url("./components/tacc-docs.css");
 
 /* TRUMPS */

package/src/lib/_imports/core-styles.portal.css

@@ -21,6 +21,7 @@
 @import url("./objects/o-flex-item-table-wrap.css");
 
 /* COMPONENTS */
+@import url("./components/bootstrap.modal--portal.css");
 @import url("./components/cortal.icon.css");
 @import url("./components/mui.tabs.css");
 @import url("./components/c-form--portal.css");

package/src/lib/_imports/elements/demo.css

@@ -69,8 +69,10 @@ body:has(main > section) {
 }
 
 /* To give equal block spacing to rulers */
-section + hr {
-  --global-space--hr-buffer-above: var(--global-space--hr-buffer-below);
+hr {
+  margin-top: var(--global-space--hr-buffer-above);
+
+  margin-bottom: var(--global-space--hr-buffer-below);
 }
 
 

package/src/lib/_imports/elements/form.cms.css

@@ -59,19 +59,14 @@ input[type="time"],
 input[type="date"] {
   font-family: var(--global-font-family--mono);
 }
-
-/* To prevent super-long fields */
-input:not(
-  /* FAQ: These types of fields should not grow to a max */
-  [type=time],
-  [type=date],
-  [type=checkbox],
-  [type=radio]
-),
-select,
-textarea {
-  max-width: 50ch;
+input[type="search"] {
+  outline-offset: revert; /* undo Bootstrap _reboot */
 }
+
+/* FAQ: If tempted to set max-width for inputs, change client layout not CSS
+        (for APCD, a max-width: 50ch was added here by developer)
+        (on TUP-CMS, that max-width was ordered killed by designer) */
+
 input:where( /* Use `:where` so rules are easier to override */
   [type=time],
   [type=date],

package/src/lib/_imports/elements/html-elements.cms.css

@@ -23,10 +23,6 @@ Reference:
 Styleguide Elements.ContentSectioning
 */
 
-&:is(body > *) {
-  margin-bottom: var(--global-space--section-gap);
-}
-
 /* Headings */
 
 /* SEE: ./headings--cms.css */
@@ -103,8 +99,16 @@ Styleguide Elements.TextContent
 
 & hr {
   margin-top: var(--global-space--hr-buffer-above); /* overwrite Bootstrap */
-  border-top: 1px solid var(--global-color-primary--light);
+
+  border-top-width: var(--global-border-width--normal);
+  border-top-style: solid;
+  border-top-clolor: var(--global-color-primary--dark);
+
   margin-bottom: var(--global-space--hr-buffer-below); /* overwrite Bootstrap */
+
+  /* To fix widthless-ness when <hr> is a grid or flex item */
+  /* https://dev.to/alvaromontoro/the-disappearing-line-a-css-mystery-3e35 */
+  width: 100%;
 }
 
 

package/src/lib/_imports/elements/html-elements.docs.css

@@ -1,6 +1,9 @@
 @import url("../tools/selectors.css");
+@import url("../tools/x-figure.css");
+@import url("../tools/x-blockquote.css");
 
-/* To scope these styles to main content (i.e. not header, not navbar) */
-:--main-content {
-  font-size: var(--global-font-size--medium);
-}
+/* To style elements that have captions */
+figure { @extend .x-figure; }
+figcaption { @extend .x-figure-caption; }
+blockquote { @extend .x-blockquote; }
+blockquote footer { @extend .x-blockquote-caption; }

package/src/lib/_imports/elements/monospace.css

@@ -13,6 +13,11 @@
   color: inherit;
 }
 
+/* So client can render preformatted text without assuming Bootstrap color */
+pre {
+  color: unset; /* override Bootstrap */
+}
+
 
 
 /* To scope these styles to main content (i.e. not header, not navbar) */

package/src/lib/_imports/generics/color/_blue.css

@@ -0,0 +1,42 @@
+@import url("../../objects/o-section.selectors.css");
+@import url("../../components/c-card.selectors.css");
+
+@custom-selector :--light-context
+  .c-recognition--style-light,
+  :--o-section--muted,
+  :--o-section--light,
+  :--c-card--standard,
+  :--c-card--standard-N,
+  :--c-card--plain;
+@custom-selector :--dark-context
+  .c-recognition--style-dark,
+  :--o-section--dark;
+
+@custom-selector :--light-context-safe
+  :where(:--dark-context :--light-context);
+@custom-selector :--dark-context-safe
+  :where(:--dark-context:not(:--light-context *));
+
+:--dark-context-safe {
+  --global-color-accent--xxx-light: #f3f7fe;
+  --global-color-accent--xx-light: #dfeafe;
+  --global-color-accent--x-light: #caddfe;
+  --global-color-accent--light: #AAC7FF;
+  --global-color-accent--normal: #86aeff;
+  --global-color-accent--dark: #003399;
+  --global-color-accent--x-dark: #002266;
+  --global-color-accent--xx-dark: #001133;
+  --global-color-accent--xxx-dark: #021230;
+}
+
+:--light-context-safe {
+  --global-color-accent--xxx-light: #dfeafe;
+  --global-color-accent--xx-light: #caddfe;
+  --global-color-accent--x-light: #AAC7FF;
+  --global-color-accent--light: #86aeff;
+  --global-color-accent--normal: #003399;
+  --global-color-accent--dark: #002266;
+  --global-color-accent--x-dark: #001133;
+  --global-color-accent--xx-dark: #021230;
+  --global-color-accent--xxx-dark: #000a22;
+}

package/src/lib/_imports/generics/{color.css → color/_purple.css}

@@ -1,12 +1,5 @@
-/*
-Colors (by Context)
-
-Change global colors depending on context.
-
-Styleguide Generics.Colors
-*/
-@import url("../objects/o-section.selectors.css");
-@import url("../components/c-card.selectors.css");
+@import url("../../objects/o-section.selectors.css");
+@import url("../../components/c-card.selectors.css");
 
 @custom-selector :--light-context
   .c-recognition--style-light,

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

@@ -0,0 +1 @@
+@import url("./color/_blue.css");

package/src/lib/_imports/generics/color--demo.css

@@ -0,0 +1 @@
+@import url("./color/_blue.css");

package/src/lib/_imports/objects/o-offset-content.css

@@ -11,7 +11,7 @@ Styleguide Objects.OffsetContent
 
 .o-offset-content--left,
 .o-offset-content--right {
-  	--offset-distance: min(15vw, 410px);
+  	--offset-distance: 12vw;
 	--buffer: calc( 2 * var(--global-space--grid-gap) );
 
     max-width: 85%;

package/src/lib/_imports/objects/o-section/config.yml

@@ -16,3 +16,7 @@ variants:
     label: (Style) Dark
     context:
       modifier: style-dark
+  - name: docs
+    status: ready
+    context:
+      shouldLoadDocs: true

package/src/lib/_imports/objects/o-section/o-section--docs.hbs

@@ -0,0 +1,20 @@
+{{> @message
+    tag="p"
+    content="The <code>o-section--has-border</code> feature will be made available for all clients in the future."
+}}
+<section class="o-section o-section--style-light o-section--has-border">
+    <h2>Section (Style Light, Has Border)</h2>
+    <p>{{> @text-of-one-paragraph-with-actions }}</p>
+</section>
+<section class="o-section o-section--style-muted o-section--has-border">
+    <h2>Section (Style Muted, Has Border)</h2>
+    <p>{{> @text-of-one-paragraph-with-actions }}</p>
+</section>
+<section class="o-section o-section--style-light o-section--has-border">
+    <h2>Section (Style Light, Has Border)</h2>
+    <p>{{> @text-of-one-paragraph-with-actions }}</p>
+</section>
+<section class="o-section o-section--style-muted o-section--has-border">
+    <h2>Section (Style Muted, Has Border)</h2>
+    <p>{{> @text-of-one-paragraph-with-actions }}</p>
+</section>

package/src/lib/_imports/objects/o-section/o-section.readme.md

@@ -0,0 +1,8 @@
+Adds one fix and one feature to [default sections]({{path './o-section' }}):
+
+- Ensures section background is wide enough on "god-wide" viewports.
+- Adds border modifier:
+
+  | Class (Std.)              | Class (Alt.)     | Description
+  | - | - | - |
+  | `.o-section--has-border`  | `.section--border`  | add top and bottom border

package/src/lib/_imports/objects/o-section--docs.css

@@ -0,0 +1,45 @@
+@import url("./o-section.selectors.css");
+
+
+
+/* To fix section background on god-wide screens */
+/* CAVEAT: This just pushes the problem to even wider screens */
+:--o-section--muted {
+  /* FAQ: Mimics Core-Styles except changes any "50" to "25" */
+  --box-shadow--fake-bkgd:
+    25vw 0 var(--color--bkgd), -25vw 0 var(--color--bkgd);
+}
+
+
+
+/* To add border to .o-section's */
+:--o-section--border {
+  --border-width: var(--global-border-width--normal);
+  --border-width-neg: calc( -1 * var(--border-width) );
+  --border-color: var(--global-color-primary--dark);
+
+  --line-top:
+    0 var(--border-width-neg) var(--border-color);
+  --line-top-left:
+    -25vw var(--border-width-neg) var(--border-color);
+  --line-top-right:
+    25vw var(--border-width-neg) var(--border-color);
+
+  --line-bottom:
+    0 var(--border-width) var(--border-color);
+  --line-bottom-left:
+    -25vw var(--border-width) var(--border-color);
+  --line-bottom-right:
+    25vw var(--border-width) var(--border-color);
+
+  --fake-bkgd: var(--box-shadow--fake-bkgd); /* from core-styles o-section */
+
+  box-shadow:
+    var(--fake-bkgd),
+    var(--line-top),
+    var(--line-top-left),
+    var(--line-top-right),
+    var(--line-bottom),
+    var(--line-bottom-left),
+    var(--line-bottom-right);
+}

package/src/lib/_imports/objects/o-section.selectors.css

@@ -18,3 +18,6 @@
 @custom-selector :--o-section--dark
     .o-section--style-dark,
     .section--dark;
+@custom-selector :--o-section--border
+    .o-section--has-border,
+    .section--border;

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap.hbs

@@ -3,7 +3,12 @@
 </div>
 {{#> @partial-block}}
 <div>
-  <p class="c-message c-message--type-info c-message--scope-section">To render a table, choose a modifier class from the navigation panel.</p>
+  {{> @message
+      tag="p"
+      type="info"
+      scope="section"
+      content="To render a table, choose a modifier class from the navigation panel."
+  }}
 </div>
 {{/@partial-block}}
 <div>

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

@@ -0,0 +1,11 @@
+:root {
+  --global-color-accent--xxx-light: #faf4ff;
+  --global-color-accent--xx-light: #f1ebfd;
+  --global-color-accent--x-light: #e3d7fd;
+  --global-color-accent--light: #a387ed;
+  --global-color-accent--normal: #784fe8;
+  --global-color-accent--dark: #6039cc;
+  --global-color-accent--x-dark: #3d189b;
+  --global-color-accent--xx-dark: #281066;
+  --global-color-accent--xxx-dark: #1E0C4C;
+}

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

@@ -5,6 +5,16 @@
   --global-color-info--dark: var(--global-color-primary--x-dark);
   --global-color-info--x-dark: var(--global-color-primary--xx-dark);
 
+  --global-color-accent--xxx-light: #faf4ff;
+  --global-color-accent--xx-light: #f1ebfd;
+  --global-color-accent--x-light: #e3d7fd;
+  --global-color-accent--light: #a387ed;
+  --global-color-accent--normal: #784fe8;
+  --global-color-accent--dark: #6039cc;
+  --global-color-accent--x-dark: #3d189b;
+  --global-color-accent--xx-dark: #281066;
+  --global-color-accent--xxx-dark: #1E0C4C;
+
   /* DEPRECATED */
   /* TODO: Update clients to use --global-color-accent--xx-light instead */
   --global-color-accent--alt: #d2cce7;