@tacc/core-styles 2.7.0 → 2.9.0

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

@@ -13,6 +13,7 @@ Reference:
 %x-grid--layout-rows-equal-set-height - Same height rows, default var. height (custom properties: `--height`)
 %x-grid--layout-cols-equal-set-count  - Same width columns, auto. column count (custom properties: `--count`)
 %x-grid--layout-cols-equal-min-width  - Same width columns, default min. width (custom properties: `--width`)
+%x-grid--layout-cols-equal-min-width-max-count  - Same width columns, default min. width, max. column count (custom properties: `--min-width`, `--max-cols`, `--row-height`, `--gap`)
 %x-grid--content-align-center         - Align content vert.ly and horz.ly center
 
 Styleguide Tools.ExtendsAndMixins.Grid
@@ -30,7 +31,8 @@ Styleguide Tools.ExtendsAndMixins.Grid
 
 /* Layout: Columns: Same Width, Preset Col. Count */
 
-%x-grid--layout-cols-equal-set-count {
+%x-grid--layout-cols-equal-set-count, /* DEPRECATED */
+.x-grid--layout-cols-equal-set-count {
   /* --count */
 
   grid-template-columns: repeat(var(--count), auto);
@@ -38,16 +40,48 @@ Styleguide Tools.ExtendsAndMixins.Grid
 
 /* Layout: Columns: Same Width, Preset Min. Width */
 
-%x-grid--layout-cols-equal-min-width {
+%x-grid--layout-cols-equal-min-width, /* DEPRECATED */
+.x-grid--layout-cols-equal-min-width {
   /* --width */
 
   grid-template-columns: repeat(auto-fit, minmax(var(--width), 1fr));
 }
-/* Suggestion for User: Prevent content overflow */
+/* Suggestion for User: Avoid content overflow */
 /*
 .x-grid--layout-cols-equal-min-width > * {
-  max-width: 100%; \/* used if cell width is smaller than content *\/
-  max-height: 100%; \/* used if cell height is smaller than content *\/
+  max-width: 100%; \/* effectual if cell width is smaller than content *\/
+  max-height: 100%; \/* effectual if cell height is smaller than content *\/
+}
+*/
+
+/* Layout: Columns: Same Width, Preset Col. Count, Preset Min. Width */
+/* https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/ */
+/* TODO: Replace `x-grid--layout-cols-equal-min-width` with this */
+
+.x-grid--layout-cols-equal-min-width-max-count {
+  /* input */
+  --gap: var(--global-space--grid-gap);
+  --max-cols: 7;
+  --min-width: 250px;
+  --row-height: auto;
+    /* auto (row height match tallest content in only that row) */
+    /* 1fr (row height match tallest content of entire grid) */
+
+  /* calculated */
+  --gap-count: calc(var(--max-cols) - 1);
+  --total-gap-width: calc(var(--gap-count) * var(--gap));
+  --max-width: calc( ( 100% - var(--total-gap-width) ) / var(--max-cols));
+
+  display: grid;
+  gap: var(--gap);
+  grid-template-columns: repeat(auto-fill, minmax(max(var(--min-width), var(--max-width)), 1fr));
+  grid-auto-rows: var(--row-height);
+}
+/* Suggestion for User: Avoid content overflow */
+/*
+.x-grid--layout-cols-equal-min-width-max-count > * {
+  max-width: 100%; \/* effectual if cell width is smaller than content *\/
+  max-height: 100%; \/* effectual if cell height is smaller than content *\/
 }
 */
 
@@ -57,13 +91,15 @@ Styleguide Tools.ExtendsAndMixins.Grid
 
 /* Layout: Rows: Same Height (equal to height of tallest content in grid) */
 
-%x-grid--layout-rows-equal-max-height {
+%x-grid--layout-rows-equal-max-height, /* DEPRECATED */
+.x-grid--layout-rows-equal-max-height {
   grid-auto-rows: 1fr;
 }
 
 /* Layout: Rows: Same Height (equal to default, variable value) */
 
-%x-grid--layout-rows-equal-set-height {
+%x-grid--layout-rows-equal-set-height, /* DEPRECATED */
+.x-grid--layout-rows-equal-set-height {
   /* --height */
 
   grid-auto-rows: var(--height);
@@ -79,7 +115,8 @@ Styleguide Tools.ExtendsAndMixins.Grid
 
 /* Content: Align Vert/Horz Center */
 
-%x-grid--content-align-center {
+%x-grid--content-align-center, /* DEPRECATED */
+.x-grid--content-align-center {
   justify-items: center;
   align-items: center;
 }
@@ -99,17 +136,12 @@ Styleguide Tools.ExtendsAndMixins.Grid
 }
 
 .user-block--modifier {
-  @extend %x-grid--...;
-}
-
-\/* Hide content that does exceed cell size *\/
-.user-block > * {
-  overflow: hidden;
+  @extend .x-grid--...;
 }
 
-\/* Avoid leting image size exceed cell size *\/
+\/* Avoid leting content size (e.g. image) exceed cell size *\/
 \/* FAQ: An intentionally loose limitation (so user can choose to ignore it) *\/
-.user-block img {
+.user-block * {
   max-height: 100%;
   max-width: 100%;
 }

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

@@ -14,8 +14,8 @@ Styleguide Tools.ExtendsAndMixins.Truncate
 /* Many Lines */
 /* WARNING: Relies on proprietary and undocumented rules (that work well) */
 
-.x-truncate--many-lines, /* DEPRECATED */
-%x-truncate--many-lines {
+.x-truncate--many-lines,
+%x-truncate--many-lines /* DEPRECATED */ {
   --lines: 2;
 
   display: -webkit-box;
@@ -24,23 +24,23 @@ Styleguide Tools.ExtendsAndMixins.Truncate
   overflow: hidden;
   -webkit-line-clamp: var(--lines);
 }
-.x-untruncate--many-lines, /* DEPRECATED */
-%x-untruncate--many-lines {
+.x-untruncate--many-lines,
+%x-untruncate--many-lines /* DEPRECATED */ {
   overflow: visible;
   -webkit-line-clamp: inherit;
 }
 
 /* One Line */
 
-.x-truncate--one-line, /* DEPRECATED */
-%x-truncate--one-line {
+.x-truncate--one-line,
+%x-truncate--one-line /* DEPRECATED */ {
 	text-overflow: var(--text-overflow, ellipsis);
 
 	overflow: hidden;
 	white-space: nowrap;
 }
-.x-untruncate--one-line, /* DEPRECATED */
-%x-untruncate--one-line {
+.x-untruncate--one-line,
+%x-untruncate--one-line /* DEPRECATED */ {
   overflow: visible;
 	white-space: normal;
 }

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/s-image-grid/config.yml

@@ -0,0 +1,4 @@
+status: ready
+context:
+  shouldSkipPattern: false
+  📝 shouldSkipPattern: because core-styles.….css does not import this

package/src/lib/_imports/trumps/s-image-grid/readme.md

@@ -0,0 +1,12 @@
+A block or list of links that each have an image.
+
+The grid supports, without change to layout:
+
+- large and small images
+- markup with or without `<ul>` and `<li>`'s
+
+The grid supports user input to change layout:
+
+- `--row-height`: row height (hint: `1fr` gives equal-height rows)
+- `--min-width`: minimum width (the smallest width for an image)
+- `--max-cols`: maximum columns (the maximum number of columns)

package/src/lib/_imports/trumps/s-image-grid/s-image-grid.hbs

@@ -0,0 +1,145 @@
+<dl>
+  <dt>
+    Images Use Full-Size URLs<br />
+    <small><ul>
+      <li>images are larger, so (by default) row height will be taller</li>
+      <li>link <code>href</code> matches image </code>src</code> (not sensible, but usage via a cms plugin create such markup if a user does not add links)</li>
+    </ul></small>
+  </dt>
+  <dd>
+    <div class="s-image-grid s-image-grid--links-are-automatic">
+      <a href="{{> @img-url large=true }}" target="_blank">
+        {{> @img large=true }}
+      </a>
+      <a href="{{> @img-url large=true wide=true }}" target="_blank">
+        {{> @img large=true wide=true }}
+      </a>
+      <a href="{{> @img-url large=true tall=true }}" target="_blank">
+        {{> @img large=true tall=true }}
+      </a>
+      <a href="{{> @img-url large=true }}" target="_blank">
+        {{> @img large=true }}
+      </a>
+      <a href="{{> @img-url large=true wide=true }}" target="_blank">
+        {{> @img large=true wide=true }}
+      </a>
+      <a href="{{> @img-url large=true }}" target="_blank">
+        {{> @img large=true }}
+      </a>
+      <a href="{{> @img-url large=true wide=true }}" target="_blank">
+        {{> @img large=true wide=true }}
+      </a>
+      <a href="{{> @img-url large=true }}" target="_blank">
+        {{> @img large=true }}
+      </a>
+      <a href="{{> @img-url large=true wide=true }}" target="_blank">
+        {{> @img large=true wide=true }}
+      </a>
+      <a href="{{> @img-url large=true tall=true }}" target="_blank">
+        {{> @img large=true tall=true }}
+      </a>
+    </div>
+  </dd>
+  <dt>
+    Images Use Thumbnail URLs<br />
+    <small><ul>
+      <li>images are smaller, so (by default) row height will be shorter</li>
+      <li>link <code>href</code> is to a larger-size image than the image </code>src</code> (expected markup)</li>
+    </ul></small>
+  </dt>
+  <dd>
+    <div class="s-image-grid s-image-grid--links-are-manual">
+      <a href="{{> @img-url large=true }}" target="_blank">
+        {{> @img }}
+      </a>
+      <a href="{{> @img-url large=true wide=true }}" target="_blank">
+        {{> @img wide=true }}
+      </a>
+      <a href="{{> @img-url large=true tall=true }}" target="_blank">
+        {{> @img tall=true }}
+      </a>
+      <a href="{{> @img-url large=true }}" target="_blank">
+        {{> @img }}
+      </a>
+      <a href="{{> @img-url large=true wide=true }}" target="_blank">
+        {{> @img wide=true }}
+      </a>
+      <a href="{{> @img-url large=true }}" target="_blank">
+        {{> @img }}
+      </a>
+      <a href="{{> @img-url large=true wide=true }}" target="_blank">
+        {{> @img wide=true }}
+      </a>
+      <a href="{{> @img-url large=true }}" target="_blank">
+        {{> @img }}
+      </a>
+      <a href="{{> @img-url large=true wide=true }}" target="_blank">
+        {{> @img wide=true }}
+      </a>
+      <a href="{{> @img-url large=true tall=true }}" target="_blank">
+        {{> @img tall=true }}
+      </a>
+    </div>
+  </dd>
+  <dt>
+    Grid is a List<br />
+    <small><ul>
+      <li>this grid should look identical to "Images Use Thumbnail URLs"</li>
+      <li>the markup is different, though (this uses &lt;ul&gt; and &lt;li&gt;'s)</li>
+    </ul></small>
+  </dt>
+  <dd>
+    <ul class="s-image-grid s-image-grid--links-are-manual">
+      <li>
+        <a href="{{> @img-url large=true }}" target="_blank">
+          {{> @img }}
+        </a>
+      </li>
+      <li>
+        <a href="{{> @img-url large=true wide=true }}" target="_blank">
+          {{> @img wide=true }}
+        </a>
+      </li>
+      <li>
+        <a href="{{> @img-url large=true tall=true }}" target="_blank">
+          {{> @img tall=true }}
+        </a>
+      </li>
+      <li>
+        <a href="{{> @img-url large=true }}" target="_blank">
+          {{> @img }}
+        </a>
+      </li>
+      <li>
+        <a href="{{> @img-url large=true wide=true }}" target="_blank">
+          {{> @img large=true wide=true }}
+        </a>
+      </li>
+      <li>
+        <a href="{{> @img-url large=true }}" target="_blank">
+          {{> @img }}
+        </a>
+      </li>
+      <li>
+        <a href="{{> @img-url large=true wide=true }}" target="_blank">
+          {{> @img wide=true }}
+        </a>
+      </li>
+      <li>
+        <a href="{{> @img-url large=true }}" target="_blank">
+          {{> @img }}
+        </a>
+      </li>
+      <li>
+        <a href="{{> @img-url large=true wide=true }}" target="_blank">
+          {{> @img wide=true }}
+        </a>
+      </li>
+      <li>
+        <a href="{{> @img-url large=true tall=true }}" target="_blank">
+          {{> @img tall=true }}
+        </a>
+      </li>
+    </ul>
+  </dd>
+</dl>

package/src/lib/_imports/trumps/s-image-grid.css

@@ -0,0 +1,45 @@
+@import url("../tools/x-grid.css");
+
+
+
+/* Grid Layout */
+
+.s-image-grid {
+  @extend .x-grid--layout-cols-equal-min-width-max-count;
+
+  /*
+  --gap: var(--global-space--grid-gap);
+  --max-cols: 7;
+  --min-width: 250px;
+  --row-height: auto;
+  */
+}
+.s-image-grid * {
+  max-width: 100%; /* effectual if cell width is smaller than content */
+  max-height: 100%; /* effectual if cell height is smaller than content */
+}
+
+
+
+/* List Layout */
+
+ul.s-image-grid {
+  padding-inline-start: unset; /* undo browser styles */
+  margin-bottom: unset; /* undo core-styles.base.css */
+}
+ul.s-image-grid > li {
+  list-style: none;
+}
+
+
+
+/* Image Layout */
+
+.s-image-grid > a,
+.s-image-grid > li,
+.s-image-grid > li > a {
+  /* So image is horizontally centered */
+  align-items: center;
+  display: flex; /* FAQ: `grid` would allow overflow; `flex` does not */
+  justify-content: center;
+}

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%)"
-  }
-}