@tacc/core-styles 2.6.2 → 2.8.0

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.cms.css

@@ -46,8 +46,8 @@
 /* FAQ: Commented out because Core-CMS doc pages load these directly */
 /* IMPORTANT: If CMS docs are moved to TACC-Docs, then kill these stylesheets */
 /*
-@import url("_imports/trumps/s-document.css");
-@import url("_imports/trumps/s-guide-doc.css");
-@import url("_imports/trumps/s-inline-dl.css");
-@import url("_imports/trumps/u-nested-text-content.css");
+@import url("./trumps/s-document.css");
+@import url("./trumps/s-guide-doc.css");
+@import url("./trumps/s-inline-dl.css");
+@import url("./trumps/u-nested-text-content.css");
 */

package/src/lib/_imports/core-styles.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

@@ -22,19 +22,23 @@
 @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 */
 /* These styles from Core-CMS doc pages might be useful */
 /*
-@import url("_imports/trumps/s-document.css");
-@import url("_imports/trumps/s-guide-doc.css");
-@import url("_imports/trumps/s-inline-dl.css");
-@import url("_imports/trumps/u-nested-text-content.css");
+@import url("./trumps/s-document.css");
+@import url("./trumps/s-guide-doc.css");
+@import url("./trumps/s-inline-dl.css");
+@import url("./trumps/u-nested-text-content.css");
 */

package/src/lib/_imports/core-styles.theme.default.css

@@ -0,0 +1,11 @@
+:root {
+  --header-text-color: var(--global-color-primary--xx-light);
+  --header-bkgd-color: var(--global-color-primary--xx-dark);
+  --header-minor-border-color: var(--global-color-primary--normal);
+  /* To "hide" border by setting its color to match background color */
+  --header-major-border-color: var(--header-bkgd-color);
+  --header-search-brdr-color: var(--global-color-primary--dark);
+  --header-search-bkgd-color: #313131;
+  /* To set the Bootstrap navbar-toggler-icon svg color for current theme */
+  --menu-toggle-icon: none;
+}

package/src/lib/_imports/core-styles.theme.has-dark-logo.css

@@ -0,0 +1,11 @@
+:root {
+  --header-text-color: var(--global-color-primary--x-dark);
+  --header-bkgd-color: var(--global-color-primary--x-light);
+  --header-minor-border-color: var(--global-color-primary--normal);
+  /* To "show" border between only the light header and content below it */
+  --header-major-border-color: var(--global-color-primary--normal);
+  --header-search-brdr-color: #D8D8D8;
+  --header-search-bkgd-color: var(--global-color-primary--xx-light);
+  /* To set the Bootstrap navbar-toggler-icon svg color for current theme */
+  --menu-toggle-icon: invert(100%);
+}

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

@@ -2,11 +2,6 @@
 @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; }

package/src/lib/_imports/elements/table--basic.css

@@ -62,7 +62,9 @@ tr:nth-child(even) :is(th, td),
   line-height: var(--cell-line-height);
 }
 /* To pin first column to left of table even during scroll */
-/* WARNING: Design has not reviewed this (but not designed responsive table) */
+/* WARNING: Design does NOT approve this */
+/* TODO: Replace with APCD-CMS "responsive-data-tables" solution */
+/* SEE: https://github.com/TACC/Core-CMS-Custom/blob/3bec84b/apcd-cms/src/apps/view_users/static/view_users_table/css/table.css#L65-L129 */
 :is(th, td):first-child {
   position: sticky;
   left: 0;

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/font/font.hbs

@@ -1,7 +1,8 @@
 {{#if shouldShowSizeMessage}}
-<p class="c-message c-message--scope-global">
-  There are currently <em><strong>no</strong> default font sizes <strong>nor</strong> default font families</em>. A client must load <strong>CMS</strong> styles or <strong>Portal</strong> styles or their own custom font sizes.
-</p>
+{{> @message
+    tag="p"
+    content='There are currently <em><strong>no</strong> default font sizes <strong>nor</strong> default font families</em>. A client must load <strong>CMS</strong> styles or <strong>Portal</strong> styles or their own custom font sizes.'
+}}
 {{/if}}
 <dl>
   <dt>Family</dt>

package/src/lib/_imports/trumps/s-header.css

@@ -36,7 +36,7 @@ Styleguide Trumps.Scopes.Header
   -moz-osx-font-smoothing: grayscale;
 
   /* To hide border, set this in theme to match `--header-bkgd-color` value */
-  border-bottom: 1px solid env(--header-major-border-color);
+  border-bottom: 1px solid var(--header-major-border-color);
 }
 
 /* Affiliation */
@@ -52,7 +52,7 @@ Styleguide Trumps.Scopes.Header
   margin-right: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.navbar-brand`) */
   padding: 0;
 
-  color: env(--header-text-color);
+  color: var(--header-text-color);
   /* text-decoration: none; */ /* already provided by Bootstrap */
 }
 
@@ -74,7 +74,7 @@ Styleguide Trumps.Scopes.Header
   --nav-padding-vert: 5px;
   --nav-padding-horz: calc(16px + 20px);
 
-  background-color: env(--header-bkgd-color);
+  background-color: var(--header-bkgd-color);
   padding: var(--nav-padding-vert) var(--nav-padding-horz);
 }
 
@@ -109,7 +109,7 @@ Styleguide Trumps.Scopes.Header
 #s-header .nav-link,
 /* HACK: Support `span.nav-link` having children `a` and `a.dropdown-toggle-split` */
 #s-header .nav-link > a {
-  color: env(--header-text-color);
+  color: var(--header-text-color);
   /* text-decoration: none; */ /* already provided by Bootstrap */
 }
 
@@ -129,7 +129,7 @@ Styleguide Trumps.Scopes.Header
 /* Create a line between search bar and login */
 /* FAQ: The line should only exist if both elements are present */
 .s-header .s-search-bar ~ .s-portal-nav {
-  border-left: 1px solid env(--header-minor-border-color);
+  border-left: 1px solid var(--header-minor-border-color);
 
   margin-left: 12px;
 }
@@ -154,29 +154,44 @@ Styleguide Trumps.Scopes.Header
 /* This will eventually be superceded by GH-101. */
 
 /* For black icons:
-  - create a selector definition in s-header.css:
+  - create a rule set like this in s-header.css
+    (where `--custom-property` is a relevant name):
+
+    ```css
     .selector-target {
-      filter: env(--targeted-selector);
+      filter: var(--custom-property);
     };
-  - set the environment_variables value in theme.*.json to inverted value:
-    "environment-variables": {
+    ```
+  - reset the custom property value in a project stylesheet to inverted value:
+
+    ```css
+    .selector-target {
       ...
-      "--targeted-selector": "invert(100%)"
+      "--custom-property": "invert(100%)"
     }
+    ```
 */
 
 /* For themed icons using a color:
-  - create a selector definition in s-header.css:
+  - create a rule set like this in s-header.css
+    (where `--custom-property` is a relevant name):
+
+    ```css
     .selector-target {
       mix-blend-mode: "overlay";
-      filter: env(--selector-theme-color);
+      filter: var(--custom-property);
     };
-  - set the environment_variables value in theme.*.json to the desired color value:
-    "environment-variables": {
+    ```
+  - reset the custom property value in a project stylesheet to desired color:
+
+    ```css
+    .selector-target {
       ...
-      "--selector-theme-color": "#ABCDEF"
-    } */
+      "--custom-property": "#ABCDEF"
+    }
+    ```
+*/
 
 .navbar-toggler-icon  {
-  filter: env(--menu-toggle-icon);
+  filter: var(--menu-toggle-icon);
 }

package/src/lib/_imports/trumps/tacc-search-bar.css

@@ -72,7 +72,7 @@ Styleguide Scopes.SearchBar
   background-color: transparent;
   border: none;
 
-  color: env(--header-text-color);
+  color: var(--header-text-color);
   font-size: var(--button-font-size);
 }
 
@@ -95,14 +95,14 @@ Styleguide Scopes.SearchBar
   );
   padding-right: var(--input-horz-pad);
 
-  background-color: env(--header-search-bkgd-color);
-  border: var(--global-border-width--normal) solid env(--header-search-brdr-color);
+  background-color: var(--header-search-bkgd-color);
+  border: var(--global-border-width--normal) solid var(--header-search-brdr-color);
   border-radius: 5px;
 
-  color: env(--header-text-color);
+  color: var(--header-text-color);
   font-size: var(--input-font-size);
 }
 :host [part="input"]::placeholder {
-  color: env(--header-text-color);
+  color: var(--header-text-color);
   opacity: 0.5;
 }

package/src/lib/_themes/README.md

@@ -1,5 +0,0 @@
-# TACC Styles - Themes
-
-These values are imported by PostCSS configuration.
-
-See [`postcss-preset-env`'s `importFrom` example](https://github.com/csstools/postcss-preset-env#importfrom).

package/src/lib/_themes/TODO.md

@@ -1,4 +0,0 @@
-# TACC Core Styles - Library - Themes
-
-- Migrate `src/lib/_imports/settings/*` to theme data.
-- Support one theme extending another theme (default theme or another theme).

package/src/lib/_themes/default.json

@@ -1,21 +0,0 @@
-{
-  "//": "Metadata for humans",
-  "format": "https://github.com/csstools/postcss-preset-env#importfrom",
-  "name": "default",
-
-  "environment-variables": {
-    "// CMS": "",
-    "--cms-toolbar-height": "46px",
-
-    "// HEADER": "",
-    "--header-text-color": "var(--global-color-primary--xx-light)",
-    "--header-bkgd-color": "var(--global-color-primary--xx-dark)",
-    "--header-minor-border-color": "var(--global-color-primary--normal)",
-    "// To 'hide' border by setting its color to match background color": "",
-    "--header-major-border-color": "var(--global-color-primary--xx-dark)",
-    "--header-search-brdr-color": "var(--global-color-primary--dark)",
-    "--header-search-bkgd-color": "#313131",
-    "// To set the bootstrap navbar-toggler-icon svg color for current theme": "",
-    "--menu-toggle-icon": "none"
-  }
-}

package/src/lib/_themes/has-dark-logo.json

@@ -1,21 +0,0 @@
-{
-  "//": "Metadata for humans",
-  "format": "https://github.com/csstools/postcss-preset-env#importfrom",
-  "name": "has-dark-logo",
-
-  "environment-variables": {
-    "// CMS": "",
-    "--cms-toolbar-height": "46px",
-
-    "// HEADER": "",
-    "--header-text-color": "var(--global-color-primary--x-dark)",
-    "--header-bkgd-color": "var(--global-color-primary--x-light)",
-    "--header-minor-border-color": "var(--global-color-primary--normal)",
-    "// To show border between only the light header and content below it": "",
-    "--header-major-border-color": "var(--global-color-primary--normal)",
-    "--header-search-brdr-color": "#D8D8D8",
-    "--header-search-bkgd-color": "var(--global-color-primary--xx-light)",
-    "// To set the bootstrap navbar-toggler-icon svg color for current theme": "",
-    "--menu-toggle-icon": "invert(100%)"
-  }
-}