@tacc/core-styles 2.7.0 → 2.8.0

package/dist/trumps/s-style-guide.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.7.0+ | MIT | github.com/TACC/Core-Styles */.s-style-guide section:not(.o-section)>h1:first-child,.s-style-guide section:not(.o-section)>h2:first-child,.s-style-guide section:not(.o-section)>h3:first-child,.s-style-guide section:not(.o-section)>h4:first-child,.s-style-guide section:not(.o-section)>h5:first-child,.s-style-guide section:not(.o-section)>h6:first-child,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h1,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h2,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h3,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h4,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h5,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h6{margin-top:var(--global-space--x-large)}.s-style-guide section>h1,.s-style-guide section>h2,.s-style-guide section>h3,.s-style-guide section>h4,.s-style-guide section>h5,.s-style-guide section>h6{margin-bottom:var(--global-space--normal)}
+/*! @tacc/core-styles 2.8.0+ | MIT | github.com/TACC/Core-Styles */.s-style-guide section:not(.o-section)>h1:first-child,.s-style-guide section:not(.o-section)>h2:first-child,.s-style-guide section:not(.o-section)>h3:first-child,.s-style-guide section:not(.o-section)>h4:first-child,.s-style-guide section:not(.o-section)>h5:first-child,.s-style-guide section:not(.o-section)>h6:first-child,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h1,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h2,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h3,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h4,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h5,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h6{margin-top:var(--global-space--x-large)}.s-style-guide section>h1,.s-style-guide section>h2,.s-style-guide section>h3,.s-style-guide section>h4,.s-style-guide section>h5,.s-style-guide section>h6{margin-bottom:var(--global-space--normal)}

package/dist/trumps/s-system-specs.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.7.0+ | MIT | github.com/TACC/Core-Styles */.s-system-specs{font-size:var(--global-font-size--small);font-weight:var(--global-font-weight--medium)}@media only screen and (min-width:768px){.s-system-specs{display:flow-root}.s-system-specs>*{display:inline-block}.s-system-specs>figure{float:left}}.s-system-specs{--row-height:32px}.s-system-specs>aside{margin-top:var(--row-height)}@media only screen and (max-width:991px){.s-system-specs>figure{margin-bottom:var(--row-height)}}@media only screen and (min-width:992px){.s-system-specs{--col-width--thin:42%;--col-width--wide:48%;--col-gutter:10%;--col-padding:40px;padding-inline:var(--col-padding)}.s-system-specs>aside,.s-system-specs>div{padding-inline:var(--col-padding)}.s-system-specs>div{width:var(--col-width--thin)}.s-system-specs>figure{margin-right:var(--col-gutter);width:var(--col-width--wide)}}@media only screen and (min-width:1200px){.s-system-specs>aside{width:var(--col-width--thin)}}.s-system-specs>figure>img{display:block;width:100%}.s-system-specs>figure>figcaption{margin-top:-40px;position:relative}@media only screen and (max-width:991px){.s-system-specs>figure>img{margin-left:auto;margin-right:auto;width:60%}}@media only screen and (min-width:992px){.s-system-specs>figure>figcaption{margin-left:auto;margin-right:auto;width:80%}}.s-system-specs .c-data-list__key a{font-weight:var(--medium)}
+/*! @tacc/core-styles 2.8.0+ | MIT | github.com/TACC/Core-Styles */.s-system-specs{font-size:var(--global-font-size--small);font-weight:var(--global-font-weight--medium)}@media only screen and (min-width:768px){.s-system-specs{display:flow-root}.s-system-specs>*{display:inline-block}.s-system-specs>figure{float:left}}.s-system-specs{--row-height:32px}.s-system-specs>aside{margin-top:var(--row-height)}@media only screen and (max-width:991px){.s-system-specs>figure{margin-bottom:var(--row-height)}}@media only screen and (min-width:992px){.s-system-specs{--col-width--thin:42%;--col-width--wide:48%;--col-gutter:10%;--col-padding:40px;padding-inline:var(--col-padding)}.s-system-specs>aside,.s-system-specs>div{padding-inline:var(--col-padding)}.s-system-specs>div{width:var(--col-width--thin)}.s-system-specs>figure{margin-right:var(--col-gutter);width:var(--col-width--wide)}}@media only screen and (min-width:1200px){.s-system-specs>aside{width:var(--col-width--thin)}}.s-system-specs>figure>img{display:block;width:100%}.s-system-specs>figure>figcaption{margin-top:-40px;position:relative}@media only screen and (max-width:991px){.s-system-specs>figure>img{margin-left:auto;margin-right:auto;width:60%}}@media only screen and (min-width:992px){.s-system-specs>figure>figcaption{margin-left:auto;margin-right:auto;width:80%}}.s-system-specs .c-data-list__key a{font-weight:var(--medium)}

package/dist/trumps/tacc-search-bar.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.7.0+ | MIT | github.com/TACC/Core-Styles */:host{--button-horz-pad:10px;--input-horz-pad:0.125em;--input-height:26px;--button-font-size:18px;--input-font-size:14px}:host{font-size:0}:host [part=form]{align-items:center;display:flex;font-family:Roboto;position:relative}:host [part=button]{align-items:center;background-color:transparent;border:none;box-sizing:content-box;color:var(--global-color-primary--xx-light);font-size:16px;font-size:var(--button-font-size);height:var(--input-height,38px);left:0;margin:0;padding:0 var(--button-horz-pad);position:absolute;top:50%;transform:translateY(-50%)}:host [part=input]{background-color:#313131;border:var(--global-border-width--normal) solid var(--global-color-primary--dark);border-radius:5px;color:var(--global-color-primary--xx-light);display:block;font-size:var(--input-font-size);height:var(--input-height);margin:0;padding-bottom:0;padding-left:calc(var(--button-horz-pad) + var(--button-font-size) + var(--button-horz-pad) + var(--input-horz-pad));padding-right:var(--input-horz-pad);padding-top:0;width:100%}:host [part=input]::-moz-placeholder{color:var(--global-color-primary--xx-light);opacity:.5}:host [part=input]::placeholder{color:var(--global-color-primary--xx-light);opacity:.5}
+/*! @tacc/core-styles 2.8.0+ | MIT | github.com/TACC/Core-Styles */:host{--button-horz-pad:10px;--input-horz-pad:0.125em;--input-height:26px;--button-font-size:18px;--input-font-size:14px}:host{font-size:0}:host [part=form]{align-items:center;display:flex;font-family:Roboto;position:relative}:host [part=button]{align-items:center;background-color:transparent;border:none;box-sizing:content-box;color:var(--header-text-color);font-size:16px;font-size:var(--button-font-size);height:var(--input-height,38px);left:0;margin:0;padding:0 var(--button-horz-pad);position:absolute;top:50%;transform:translateY(-50%)}:host [part=input]{background-color:var(--header-search-bkgd-color);border:var(--global-border-width--normal) solid var(--header-search-brdr-color);border-radius:5px;color:var(--header-text-color);display:block;font-size:var(--input-font-size);height:var(--input-height);margin:0;padding-bottom:0;padding-left:calc(var(--button-horz-pad) + var(--button-font-size) + var(--button-horz-pad) + var(--input-horz-pad));padding-right:var(--input-horz-pad);padding-top:0;width:100%}:host [part=input]::-moz-placeholder{color:var(--header-text-color);opacity:.5}:host [part=input]::placeholder{color:var(--header-text-color);opacity:.5}

package/dist/trumps/u-empty.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.7.0+ | MIT | github.com/TACC/Core-Styles */
+/*! @tacc/core-styles 2.8.0+ | MIT | github.com/TACC/Core-Styles */

package/dist/trumps/u-hide.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.7.0+ | MIT | github.com/TACC/Core-Styles */.u-hide--visually:not(:focus,:active){clip:rect(0 0 0 0);border:none;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
+/*! @tacc/core-styles 2.8.0+ | MIT | github.com/TACC/Core-Styles */.u-hide--visually:not(:focus,:active){clip:rect(0 0 0 0);border:none;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

package/dist/trumps/u-mailto-text-replace.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.7.0+ | MIT | github.com/TACC/Core-Styles */.u-mailto-text-replace[data-user][data-domain]{font-size:0;visibility:hidden}.u-mailto-text-replace[data-user][data-domain]:before{content:attr(data-user) "@" attr(data-domain);display:inline;font-size:medium;visibility:visible}
+/*! @tacc/core-styles 2.8.0+ | MIT | github.com/TACC/Core-Styles */.u-mailto-text-replace[data-user][data-domain]{font-size:0;visibility:hidden}.u-mailto-text-replace[data-user][data-domain]:before{content:attr(data-user) "@" attr(data-domain);display:inline;font-size:medium;visibility:visible}

package/dist/trumps/u-nested-text-content.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.7.0+ | MIT | github.com/TACC/Core-Styles */.u-nested-text-content{padding-left:var(--global-space--list-indent)}
+/*! @tacc/core-styles 2.8.0+ | MIT | github.com/TACC/Core-Styles */.u-nested-text-content{padding-left:var(--global-space--list-indent)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tacc/core-styles",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "license": "MIT",
   "author": "TACC ACI WMA <wma-portals@gmail.com>",
   "description": "CSS source and processor for TACC Core-CMS and Core-Portal.",
@@ -42,7 +42,6 @@
     "postcss": "^8.4.18",
     "postcss-banner": "^4.0.1",
     "postcss-cli": "^10.0.0",
-    "postcss-env-function": "^4.0.6",
     "postcss-extend": "^1.0.5",
     "postcss-import": "^15.0.0",
     "postcss-preset-env": "^7.8.3",
@@ -57,7 +56,6 @@
     "postcss": "To process CSS",
     "postcss-banner": "To prepend preserved comment to built stylesheets",
     "postcss-cli": "To process CSS (the simplest and cheapest PostCSS runner)",
-    "postcss-env-function": "To inappropriately use env() as build-time var()",
     "postcss-import": "To import CSS files at build-time",
     "postcss-extend": "To extend CSS rule sets at build-time",
     "postcss-preset-env": "To use future CSS features now",

package/src/.postcssrc.base.yml

@@ -5,11 +5,6 @@ plugins:
 
   postcss-extend: {}
 
-  # https://github.com/TACC/Core-CMS/blob/70a1ca3/conf/css/.postcssrc.yml#L6-L12
-  postcss-env-function:
-    importFrom:
-      - 'src/lib/_themes/default.json'
-
   postcss-preset-env:
     # https://github.com/csstools/postcss-preset-env#features
     stage: false

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

@@ -37,8 +37,8 @@
 /* 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/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/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%)"
-  }
-}