@tacc/core-styles 0.5.1

package/.postcssrc.base.yml

@@ -0,0 +1,48 @@
+plugins:
+
+
+  postcss-import:
+    path:
+      - 'source'
+
+
+  postcss-extend: {}
+
+
+  # https://github.com/TACC/Core-CMS/blob/70a1ca3/conf/css/.postcssrc.yml#L6-L12
+  postcss-env-function:
+    importFrom:
+      - 'source/_themes/default.json'
+
+
+  postcss-preset-env:
+
+    # https://github.com/csstools/postcss-preset-env#features
+    stage: false
+
+    # https://github.com/csstools/postcss-preset-env/blob/master/src/lib/plugins-by-id.js#L35
+    features:
+      custom-media-queries: true
+      media-query-ranges: true
+      # RFE: Fix bug on the Internet so we can use these reliably
+      # SEE: https://github.com/postcss/postcss-custom-selectors/issues/40
+      custom-selectors: true
+
+
+  cssnano:
+    preset:
+      - 'default'
+      -
+        # Both of these are disabled to allow manual CSS build tests
+        # The `discardDuplicates` is disabled to prevent hiding duplicate CSS
+        discardDuplicates:
+          exclude: true
+        mergeRules:
+          exclude: true
+
+
+
+  postcss-banner:
+    banner: 'no build id'
+    inline: true
+    important: true

package/README.md

@@ -0,0 +1,244 @@
+# TACC Core Styles
+
+The shared styles for TACC WMA Workspace Portals & Websites
+
+> __Notice__: Currently only [Core CMS] is using these styles.
+
+
+## Related Repositories
+
+- [Core CMS], the base CMS code for TACC WMA CMS Websites
+
+
+## External Project Usage
+
+### CLI
+
+```bash
+Usage: core-styles [options] [command]
+
+Options:
+  -V, --version      output the version number
+  -h, --help         display help for command
+
+Commands:
+  build [options]    build stylesheets with TACC standard process:
+  - "post-css" plugins
+  - custom input path
+  - custom output path
+  - custom configs
+  - prepend build id
+
+  help [command]     display help for command
+```
+
+#### Build Command
+
+```bash
+Usage: core-styles build [options]
+
+build stylesheets with TACC standard process:
+- "post-css" plugins
+- custom input path
+- custom output path
+- custom configs
+- prepend build id
+
+Options:
+  -i, --input <path>               parse source at which path¹
+  -o, --output <path>              output CSS files to which path¹
+  -v, --verbose                    print more info during build process
+  -c, --custom-configs <paths...>  extend base config with YAML files²³
+  -b, --build-id <identifier>      any value to identify the build (default: version of app)
+  -m, --base-mirror-dir <path>     if input folder structure is mirrored, this path is not⁴
+  -h, --help                       display help for command
+
+Notes:
+  ¹ Folder structure of "--input-dir" mirrored in "--output-dir" i.e.
+
+    given input
+    - "input_dir/x.css"
+    - "input_dir/sub_dir_a/y.css"
+    - "input_dir"
+    - "input_dir/**/*"
+
+    expect output
+    - "output_dir/x.css"
+    - "output_dir/sub_dir_a/y.css"
+    - "output_dir/..." (all files from input not in sub-directories)
+    - "output_dir/.../..." (all files from input as nested)
+
+  ² The file formats are like ".postcssrc.yml" from
+    https://github.com/postcss/postcss-load-config#postcssrc
+
+  ³ The first file is merged on top of the base config.
+    Each successive file overwrites the file before it.
+
+  ⁴ Given '-i "a/b*" -o "x/" -m "a/"' output is "x/b/...".
+    Given '-i "a/b*" -o "x/" -m "a/b/"' output is "x/...".
+    Given '-i "a/b*" -o "x/" -m "not-a/"' output is "x/abs-path-to-input/...".
+```
+
+### Module
+
+1. Install the package with any package manager e.g.:
+  - `npm install TACC/Core-Styles`
+  - `yarn add TACC/Core-Styles`
+
+2. Import stylesheets of either type:
+    - pre-compiled, from `/dist`
+    - source files, from `/source`
+
+#### Build Script
+
+```js
+const buildStylesheets = require('core-styles');
+
+buildStylesheets(
+  // Parse CSS files from which directory (required)
+  `path/to/your/css/src`,
+  // Output CSS files to which directory (required)
+  `path/to/put/css/output`, {
+    // List of YAML config files (optional)
+    // (The first file is merged on top of the base config.)
+    // (Each successive file overwrites the file before it.)
+    // SEE: https://github.com/postcss/postcss-load-config#postcssrc
+    customConfigs: [
+      // The "base" config is `/.postcssrc.base.yml`
+      `path/to/custom/configthat/extends/base/.postcssrc.yml`,
+      `path/to/custom/config/that/extends/above/.postcssrc.yml`
+    ],
+    // Print more info from build log (optional, default: false)
+    verbose: true,
+    // Print version of this software (optional, default: false)
+    version: true,
+    // Extension of CSS files to parse (optional, default: "css")
+    fileExt: 'css',
+    // Any value to help identify the build (optional, default: app version)
+    buildId: process.env.npm_package_version + someUniqueId
+  }
+);
+```
+
+## Local Development Setup
+
+### Prequisites for Building the Styles
+
+* Nodejs 16.x
+
+> __Future__: The Core Styles will be rendered via a pattern library software.
+
+### Code Configuration
+
+Code configuration happens in repos that use these styles.
+
+### Previewing the Styles
+
+1. [Install][npm-install] the dependencies:
+
+    ```bash
+    npm ci
+    ```
+
+> __Future__:
+>
+> 2. Build stylesheets + Run the pattern library:
+>
+>     ```bash
+>     npm start
+>     ```
+>
+> 3. Open the web interface.
+>
+>     The build command will output the URL (and may even open it for you).
+
+
+[npm-install]: https://docs.npmjs.com/cli/v8/commands/npm-ci
+
+### Source Files
+
+If you changes files in a `source/` directory, you may need to follow some of these steps.
+
+#### Quick Start
+
+1. _(optional)_ Make changes to `/source` files.
+2. Build the styles: `npm run build`
+
+    > __Future__: 2. Build and preview the styles: `npm start`
+
+3. _(to debug)_ Review respective `/dist` files' content.
+
+#### How to Just Build Stylesheets
+
+You can build stylesheets __from__ source files __in__ `source` directory __to__ compiled files __in__ `dist` directory.
+
+0. (Optional) Set version (for preserved comment):
+
+    ```bash
+    npm run version -- --build-id="$(git describe --always)"
+    ```
+
+1. Build stylesheets:
+
+    ```bash
+    npm run build
+    ```
+
+
+## Testing
+
+Plugin testing is done manually. Run `npm run build` from root folder in this project, then review output in `/dist/_tests.css`, to ensure plugins are working correctly.
+
+Style testing is done manually. Run `npm start` from root folder in this project, then review output at web interface, to ensure styles are rendering correctly.
+
+### Production Deployment
+
+The Core Styles are not deployed alone _yet_. ¹
+
+_For now_, the stylesheets are acquired or accessed by other repositories.
+
+| Repo | Usage |
+| - | - |
+| __[Core CMS]__ | via CLI installed on test branch |
+| __[Core CMS Pattern Library]__ | not accessing styles [_yet_][research-pattern-lib] ¹ |
+
+<sub>¹ A repo that is, or will be, in [Core CMS Pattern Library] should load these styles __and__ build a pattern library.</sub>
+
+[Core CMS Pattern Library]: https://github.com/wesleyboar/Core-CMS-Pattern-Library
+[research-pattern-lib]: https://confluence.tacc.utexas.edu/x/FADMBQ
+
+
+## Contributing
+
+### Development Workflow
+
+We use a modifed version of [GitFlow](https://datasift.github.io/gitflow/IntroducingGitFlow.html) as our development workflow. Our [development site](https://dev.cep.tacc.utexas.edu) (accessible behind the TACC Network) is always up-to-date with `main`, while the [production site](https://prod.cep.tacc.utexas.edu) is built to a hashed commit tag.
+- Feature branches contain major updates, bug fixes, and hot fixes with respective branch prefixes:
+    - `task/` for features and updates
+    - `bug/` for bugfixes
+    - `fix/` for hotfixes
+
+### Best Practices
+
+Sign your commits ([see this link](https://help.github.com/en/github/authenticating-to-github/managing-commit-signature-verification) for help)
+
+### Publishing Workflow
+
+1. Create new branch for version bump.
+1. Update `CHANGELOG.md`.
+1. Update version in `package.json`.
+1. Update version in `package-lock.json` by running `npm i --package-lock-only`.
+1. Commit, push, PR, review, merge.
+1. Create new GitHub Release.
+
+### Resources
+
+* [Learn Markdown](https://bitbucket.org/tutorials/markdowndemo)
+
+
+<!-- Link Aliases -->
+
+[Core Portal Deployments]: https://github.com/TACC/Core-Portal-Deployments
+[Camino]: https://github.com/TACC/Camino
+[Core CMS]: https://github.com/TACC/Core-CMS
+[Core Portal]: https://github.com/TACC/Core-Portal

package/bin/build.js

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+
+/** Export internal function used by this package to build styles */
+
+const cmd = require('node-cmd');
+
+// SEE: https://stackoverflow.com/a/63530170
+process.env.FORCE_COLOR = true
+
+
+
+/**
+ * Build stylesheets from source CSS
+ * @param {string} input - Parse CSS files from which path
+ * @param {string} output - Output CSS files to which path
+ * @param {object} [opts={}] - Options
+ * @param {string} [opts.baseMirrorDir] - Do not add this path when mirroring
+ * @param {string} [opts.configDir] - Custom config directory
+ * @param {boolean} [opts.verbose=false] - To print more info from build log
+ * @param {boolean} [opts.verbose=false] - To print more info from build log
+ */
+function build(input, output, opts = {}) {
+  // Get data
+  const configDir = opts.configDir || `${__dirname}/../`;
+  const verbose = (opts.verbose === true) ? '--verbose' : '';
+  const base = (opts.baseMirrorDir) ? `--base "${opts.baseMirrorDir}"` : '';
+
+  // Build command
+  const command = `postcss "${input}" --dir "${output}" ${verbose} --config "${configDir}" ${base}`;
+
+  console.log(`Building stylesheet(s) to ${output}`);
+
+  // Run command
+  cmd.runSync(command);
+}
+
+
+
+// Export
+module.exports = build;

package/bin/config.js

@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+
+/** Export internal function used by this package to configure build */
+
+const fs = require('fs');
+const merge = require('merge-lite');
+const yaml = require('js-yaml');
+
+const BASE_CONFIG_FILE = `${__dirname}/../.postcssrc.base.yml`;
+const NEW_CONFIG_FILE = `${__dirname}/../.postcssrc.yml`;
+
+
+
+/**
+ * Save base config as auto-loaded file (also can overwrite with custom values)
+ * @param {array.string} [customConfigFiles=[]] - List of YAML config file paths
+ * (The first file is merged on top of the base config.)
+ * (Each successive file overwrites the file before it.)
+ * @param {string} [cssVersion] - A versioning identifier for this build
+ * @see https://github.com/postcss/postcss-load-config#postcssrc
+ */
+function config(customConfigFiles = [], cssVersion) {
+    // Prepare data
+    const configFiles = [ BASE_CONFIG_FILE, ...customConfigFiles ];
+    const configObjects = [];
+    let newJson;
+
+    // Initialize final config file
+    emptyOrCreateFile( NEW_CONFIG_FILE );
+
+    // Merge configs in order
+    configFiles.forEach( nextFile => {
+        newJson = getConfigObject( nextFile );
+        configObjects.push( newJson );
+    });
+    mergedJson = merge( ...configObjects );
+
+    // Update version property
+    const updatedJson = updateVersion( mergedJson, cssVersion );
+    const configYaml = yaml.dump( updatedJson );
+
+    // Write final config file
+    fs.writeFileSync( NEW_CONFIG_FILE, configYaml, 'utf8');
+}
+
+
+
+/**
+ * Update the value for the CSS version in given config data
+ * @param {object} config - The config data in which to update the version
+ * @param {string} version - The version identifier
+ * @return {object} - Updated config
+ */
+function updateVersion( config, version ) {
+    console.log(`Tagging CSS version as ${version}`);
+
+    config['plugins']['postcss-banner']['banner'] = version;
+
+    return config;
+}
+
+
+
+/**
+ * Get JSON from YAML config file
+ * @param {string} filePath - YAML config file
+ * @return {object} - Config as JSON
+ */
+ function getConfigObject( filePath ) {
+    const config = fs.readFileSync( filePath, 'utf8');
+    const json = yaml.load( config );
+
+    return json;
+}
+
+
+
+/**
+ * If file exists, empty it; otherwise, create it
+ * @param {string} [filePath] - The file to empty or create
+ * @see https://stackoverflow.com/a/29016268/11817077
+ */
+function emptyOrCreateFile( filePath ) {
+    fs.closeSync( fs.openSync( filePath, 'w') );
+}
+
+
+
+// Export
+module.exports = config;

package/bin/version.js

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+
+/** Create CSS version based on lifecycle app data and given data */
+
+const package = require(process.env.npm_package_json || '../package.json');
+
+
+/**
+ * Create version from app data and given data
+ * @param {string} [buildId] - Any value to identify the build
+ */
+function create(buildId) {
+    const appName = package.name;
+    const appVersion = buildId || package.version + '+';
+    const appLicense = package.license;
+    const appWebsite = package.homepage.replace('https://', '');
+
+    return `${appName} ${appVersion} | ${appLicense} | ${appWebsite}`;
+}
+
+
+
+// Export
+module.exports = create;

package/cli.js

@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+
+/** CLI to custom build stylesheets and create a version stylesheet */
+
+const { program, Option } = require('commander');
+
+const package = require(process.env.npm_package_json || './package.json');
+
+const { buildStylesheets } = require('./index.js');
+
+
+
+// Setup
+program
+    .name('core-styles')
+    .version(package.version)
+    .showHelpAfterError('(add --help for additional information)');
+
+
+
+// Build Command
+program
+    .command('build')
+    .description(`build stylesheets with TACC standard process:
+- "post-css" plugins
+- custom input path
+- custom output path
+- custom configs
+- prepend build id
+    `)
+    .requiredOption('-i, --input <path>',
+        'parse source at which path¹')
+    .requiredOption('-o, --output <path>',
+        'output CSS files to which path¹')
+    .option('-v, --verbose',
+        'print more info during build process')
+    .option('-c, --custom-configs <paths...>',
+        `extend base config with YAML files²³`)
+    .option('-b, --build-id <identifier>',
+        'any value to identify the build (default: version of app)')
+    .option('-m, --base-mirror-dir <path>',
+        'if input folder structure is mirrored, this path is not⁴')
+    .addHelpText('after', `
+Notes:
+  ¹ Folder structure of "--input-dir" mirrored in "--output-dir" i.e.
+
+    given input
+    - "input_dir/x.css"
+    - "input_dir/sub_dir_a/y.css"
+    - "input_dir"
+    - "input_dir/**/*"
+
+    expect output
+    - "output_dir/x.css"
+    - "output_dir/sub_dir_a/y.css"
+    - "output_dir/..." (all files from input not in sub-directories)
+    - "output_dir/.../..." (all files from input as nested)
+
+  ² The file formats are like ".postcssrc.yml" from
+    https://github.com/postcss/postcss-load-config#postcssrc
+
+  ³ The first file is merged on top of the base config.
+    Each successive file overwrites the file before it.
+
+  ⁴ Given '-i "a/b*" -o "x/" -m "a/"' output is "x/b/...".
+    Given '-i "a/b*" -o "x/" -m "a/b/"' output is "x/...".
+    Given '-i "a/b*" -o "x/" -m "not-a/"' output is "x/abs-path-to-input/...".
+    `).action( programOpts => {
+        const { input, output, ...opts } = programOpts;
+
+        buildStylesheets( input, output, opts );
+    });
+
+
+
+// Parse
+program.parse(process.argv);

package/dist/branding_logos.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */
+.branding-header{--branding-logo-height:24px;display:flex;align-items:center;justify-content:center;height:49px;background-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-light);border-bottom:1px solid var(--global-color-primary--normal)}.branding-seperator{width:1px;height:100%;max-height:var(--branding-logo-height);border-left:1px solid var(--global-color-primary--xx-light);margin:0 15px;vertical-align:middle}.branding-logo{height:30px;margin:0;padding:0;border:none}.branding-logo--short{height:var(--branding-logo-height)}.branding-logo--tall{height:35px}.branding-nsf{height:35px}.branding-tacc{height:var(--branding-logo-height)}.branding-utaustin{height:var(--branding-logo-height)}.portal-logo{float:left;height:40px;margin:0;padding:0;border:none}

package/dist/components/README.css

@@ -0,0 +1 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */

package/dist/components/bootstrap.container.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */
+@media (min-width:1400px){.container{max-width:var(--global-max-width--x-wide)}}@media (min-width:1680px){.container{max-width:var(--global-max-width--xx-wide)}}

package/dist/components/bootstrap.figure.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */
+.figure>img,figure>img{margin-bottom:20px}.figure-caption,figcaption{color:var(--global-color-primary--dark);font-size:var(--global-font-size--medium);border-top:var(--global-border-width--normal) solid var(--global-color-primary--normal);padding-top:12px}

package/dist/components/bootstrap.pagination.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */
+.c-page-list,.pagination{--item-width:2em;--item-buffer:3px;--item-border:var(--global-border-width--normal)}.c-page-list,.pagination{display:flex;flex-direction:row;align-items:baseline;list-style:none;font-size:14px}ul.c-page-list{list-style:none}.c-page-link--always-click{position:relative;box-sizing:content-box}.c-page-link--always-click:after,.c-page-link--always-click:before{--width:var(--item-buffer);--vert-offset:calc(var(--item-border)*-1);--horz-offset:calc(100% + var(--item-border));content:"";width:var(--width);position:absolute;top:var(--vert-offset);bottom:var(--vert-offset)}.c-page-link--always-click.c-button{overflow:visible}.c-page-link--always-click:before{right:var(--horz-offset)}.c-page-link--always-click:after{left:var(--horz-offset)}.c-page-item{margin-inline:var(--item-buffer)}.c-page-item:first-child{margin-left:0}.c-page-item:last-child{margin-right:0}.c-page-item--etcetera{min-width:var(--item-width);margin-inline:2px;text-align:center;cursor:default}.c-page-end,.pagination a,.pagination span{padding:4px 12px}.c-page-link{padding:5px 0;min-width:var(--item-width);line-height:1.2}.pagination{margin-block:var(--global-space--x-large);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin-inline:auto}.pagination a,.pagination span{padding-block:0}

package/dist/components/c-button.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */
+[class*=c-button]{--min-width:75px;--mid-width:110px;--max-width:130px}.c-button{display:inline-block;border-width:var(--global-border-width--normal);border-style:solid;font-weight:500;font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-button:disabled{opacity:.5;pointer-events:none}.c-button:not(:disabled){cursor:pointer}.c-button:active:not(:disabled){transform:translateY(1px)}.c-button--primary,.c-button--secondary{padding:6px 18px;min-width:var(--min-width);max-width:var(--max-width)}.c-button--primary:hover{color:var(--global-color-primary--xx-light);background-color:var(--global-color-accent--dark);border-color:var(--global-color-accent--dark)}.c-button--primary:active{color:var(--global-color-primary--xx-light);background-color:var(--global-color-accent--x-dark);border-color:var(--global-color-accent--dark);border-width:var(--global-border-width--normal);outline:var(--global-border-width--normal) solid var(--global-color-accent--dark)}.c-button--primary:focus:not(:active){color:var(--global-color-primary--xx-light);background-color:var(--global-color-accent--normal);border-color:var(--global-color-primary--xx-light);outline:var(--global-border-width--normal) solid var(--global-color-accent--light)}.c-button--primary:not(.c-button:hover,.c-button:focus,.c-button:active){color:var(--global-color-primary--xx-light);background-color:var(--global-color-accent--normal);border-color:var(--global-color-accent--normal)}.c-button--secondary:hover{color:var(--global-color-primary--xx-dark);background-color:var(--global-color-primary--light);border-color:var(--global-color-accent--dark)}.c-button--secondary:active{color:var(--global-color-primary--xx-dark);background-color:var(--global-color-accent--x-light);border-color:var(--global-color-accent--dark);border-width:var(--global-border-width--normal);outline:var(--global-border-width--normal) solid var(--global-color-accent--dark)}.c-button--secondary:focus:not(:active){color:var(--global-color-primary--xx-dark);background-color:var(--global-color-primary--light);border-color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--thick) solid var(--global-color-accent--light)}.c-button--secondary:not(.c-button:hover,.c-button:focus,.c-button:active){color:var(--global-color-primary--xx-dark);background-color:var(--global-color-primary--xx-light);border-color:var(--global-color-primary--xx-dark)}.c-button--is-active:not(.c-button:hover,.c-button:focus,.c-button:active){background-color:var(--global-color-accent--x-light)}.c-button--as-link{color:var(--global-color-accent--dark);background:unset;border:unset;padding-inline:unset}.c-button--as-link:not(:disabled):hover{text-decoration:underline}.c-button--width-short{width:var(--min-width)}.c-button--width-medium{width:var(--mid-width)}.c-button--width-long{width:var(--max-width)}.c-button--size-small{min-width:0;padding:3px 9px;line-height:1}.c-button__icon--before{margin-right:.5em}.c-button__icon--after{margin-left:.5em}

package/dist/components/c-callout.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */
+.x-article-link-stretch{position:absolute;height:100%;width:100%;top:0;left:0;overflow:hidden}.x-article-link-stretch--gapless{width:calc(100% + 30px);left:-15px}.x-article-link-hover,a.c-callout:hover{--outline-offset:1em;outline:1px solid var(--global-color-accent--normal);outline-offset:var(--outline-offset)}.x-article-link-hover--gapless{--outline-offset:0}a.c-callout:active{outline:1px dotted var(--global-color-accent--normal)}.c-callout{--figure-width--no-units:310;--figure-height--no-units:130;display:grid}.c-callout>:is(img,figure){grid-area:figure}.c-callout>:is(h1,h2,h3,h4,h5,h6){grid-area:title}.c-callout>p{grid-area:desc}.c-callout>p{margin-top:0}.c-callout>figure>img,.c-callout>img{-o-object-fit:cover;object-fit:cover;aspect-ratio:var(--figure-width--no-units)/var(--figure-height--no-units)}.c-callout>figure{width:-webkit-min-content;width:-moz-min-content;width:min-content}@media only screen and (min-width:768px){.c-callout{padding:20px;text-align:left;grid-template-columns:-webkit-min-content auto;grid-template-columns:min-content auto;grid-template-rows:auto -webkit-min-content;grid-template-rows:auto min-content;grid-template-areas:"figure title" "figure desc"}.c-callout>figure{margin:0}.c-callout>:is(img,figure){margin-right:40px}.c-callout>figure>img,.c-callout>img{width:calc(var(--figure-width--no-units)*1px);max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content}.c-callout>img{min-height:100%}}@media only screen and (max-width:767px){.c-callout{padding:20px 40px;text-align:center;grid-template-areas:"figure" "title" "desc"}.c-callout>figure{margin:0}.c-callout>:is(img,figure){margin-bottom:20px}.c-callout>figure>img,.c-callout>img{height:calc(var(--figure-height--no-units)*1px);max-height:-webkit-fit-content;max-height:-moz-fit-content;max-height:fit-content}.c-callout>img{min-width:100%}}.c-callout>:is(img,figure){place-self:center}.c-callout>p{padding-right:1%}.c-callout{background-color:var(--global-color-link-on-light--normal)}.c-callout>:is(h1,h2,h3,h4,h5,h6){margin-top:0;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--global-color-primary--xx-light);font-size:var(--global-font-size--x-large);font-weight:var(--medium)}.c-callout>:is(h1,h2,h3,h4,h5,h6),[class*=o-section--style] .c-callout>:is(h1,h2,h3,h4,h5,h6){color:var(--global-color-primary--xx-light)}.c-callout>:not(h1,h2,h3,h4,h5,h6){color:var(--global-color-primary--xx-light)}.c-callout>:not(h1,h2,h3,h4,h5,h6,figure){font-size:var(--global-font-size--large);font-weight:var(--medium)}a.c-callout:hover{text-decoration:none}a.c-callout:focus{text-decoration:none}

package/dist/components/c-card.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */
+.x-article-link-stretch{position:absolute;height:100%;width:100%;top:0;left:0;overflow:hidden}.x-article-link-stretch--gapless{width:calc(100% + 30px);left:-15px}.x-article-link-hover,a.c-card--frontera-about-page:hover{--outline-offset:1em;outline:1px solid var(--global-color-accent--normal);outline-offset:var(--outline-offset)}.x-article-link-hover--gapless{--outline-offset:0}a.c-card--frontera-about-page:active{outline:1px dotted var(--global-color-accent--normal)}.c-card--frontera-about-page{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--dark);margin-bottom:4.6rem}a.c-card--frontera-about-page{display:inline-block;text-decoration:none}.c-card--frontera-about-page img+h3{margin-top:1.6rem}.c-card--frontera-about-page img~:last-child{margin-bottom:1.25rem}.c-card--frontera-about-page figure{margin:0}.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}

package/dist/components/c-data-list.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */
+.x-truncate--many-lines{--lines:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:var(--lines)}.x-untruncate--many-lines{overflow:visible;-webkit-line-clamp:inherit}.c-data-list--should-truncate-values .c-data-list__value,.c-data-list__key,.x-truncate--one-line{text-overflow:var(--text-overflow,ellipsis);overflow:hidden;white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}table.c-data-list{border-left:0;border-right:0}@supports(text-overflow:":"){.c-data-list__key:not(th){--text-overflow:":"}}td.c-data-list__value,th.c-data-list__key{padding-block:.5em}.c-data-list__key:not(th):after{content:":";display:inline;padding-right:.25em}th.c-data-list__key{padding-right:.25em}.c-data-list--is-horz{display:flex;flex-direction:row}.c-data-list--is-horz dd.c-data-list__value,dl.c-data-list--is-horz{margin-bottom:0}table.c-data-list--is-horz tbody,table.c-data-list--is-horz tr{min-width:0;display:flex;flex-direction:row}.c-data-list--is-horz:not(table).c-data-list--is-narrow>.c-data-list__key~.c-data-list__key:before{padding-left:.5em;padding-right:.5em}.c-data-list--is-horz:not(table).c-data-list--is-wide>.c-data-list__key~.c-data-list__key:before{padding-left:1em;padding-right:1em}table.c-data-list--is-horz.c-data-list--is-narrow tr:not(:first-child) th.c-data-list__key{padding-left:.5em}table.c-data-list--is-horz.c-data-list--is-narrow td.c-data-list__value{margin-right:.5em}table.c-data-list--is-horz.c-data-list--is-wide tr:not(:first-child) th.c-data-list__key{padding-left:1em}table.c-data-list--is-horz.c-data-list--is-wide td.c-data-list__value{margin-right:1em}table.c-data-list--is-vert{width:100%;table-layout:fixed}.c-data-list--is-vert:not(table)>.c-data-list__value{margin-left:0}.c-data-list--is-vert:not(table).c-data-list--is-narrow>.c-data-list__value,table.c-data-list--is-vert.c-data-list--is-narrow td.c-data-list__value{padding-left:0}.c-data-list--is-vert:not(table).c-data-list--is-wide>.c-data-list__value,table.c-data-list--is-vert.c-data-list--is-wide td.c-data-list__value{padding-left:2.5em}table.c-data-list--is-vert th.c-data-list__key,td.c-data-list__value{border-left:0;border-right:0}table.c-data-list--is-horz td.c-data-list__value,table.c-data-list--is-horz th.c-data-list__key{border-top:0;border-bottom:0}table.c-data-list--is-horz tr:first-child th.c-data-list__key{border-left:0}table.c-data-list--is-horz th.c-data-list__key{border-right:0}.c-data-list--is-horz:not(table)>.c-data-list__key~.c-data-list__key:before{content:"|";display:inline-block}.c-data-list--is-horz:not(table){align-items:baseline}table.c-data-list--is-horz tr{align-items:baseline}table.c-data-list--is-vert td.c-data-list__value,table.c-data-list--is-vert th.c-data-list__key{vertical-align:baseline}

package/dist/components/c-footer.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */
+.c-footer{--line-height:1.5;--min-line-count:2;box-sizing:content-box;min-height:calc(var(--line-height)*var(--min-line-count)*1em);display:flex;flex-direction:column;justify-content:center;padding-top:20px;padding-bottom:20px;color:var(--global-color-primary--xx-light);background-color:var(--global-color-primary--xx-dark);font-size:12px;text-align:center}@media only screen and (max-width:640px){.c-footer{padding-left:5%;padding-right:5%}}@media only screen and (min-width:641px) and (max-width:767px){.c-footer{padding-left:7.5%;padding-right:7.5%}}@media only screen and (min-width:768px) and (max-width:991px){.c-footer{padding-left:10%;padding-right:10%}}@media only screen and (min-width:992px) and (max-width:1199px){.c-footer{padding-left:12.5%;padding-right:12.5%}}@media only screen and (min-width:1200px){.c-footer{padding-left:15%;padding-right:15%}}

package/dist/components/c-image-map.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */
+.c-image-map{--button-shape-size:50px;--toggle-shape-size:60px;--caption-width:100%}.c-image-map--has-caption-toggle-alignment{--caption-toggle-offset-horz:0px;--caption-toggle-offset-vert:calc(var(--toggle-shape-size)/2 + 1em)}.c-image-map{display:table}@media only screen and (max-width:991px){.c-image-map{margin:0 auto}}.c-image-map__image{display:block;width:100%;max-width:495px}.c-image-map__item{width:100%}.c-image-map__item-caption{width:var(--caption-width)}@media only screen and (min-width:992px){.c-image-map__item-close{display:none!important}}.c-image-map__item-toggle{width:var(--toggle-shape-size);height:var(--toggle-shape-size);margin-top:calc(var(--toggle-shape-size)*-1/2);margin-left:calc(var(--toggle-shape-size)*-1/2)}.c-image-map{position:relative}.c-image-map:not(.c-image-map--should-position-items) .c-image-map__item{position:relative}.c-image-map:not(.c-image-map--should-position-items) .c-image-map__items{position:absolute;top:0;left:0;right:0}.c-image-map__item-caption{position:relative}@media only screen and (max-width:991px){.c-image-map__item-toggle{cursor:pointer}}.c-image-map__item-toggle~.c-image-map__item-caption{visibility:hidden}.c-image-map:not(:focus-within) .c-image-map__item:target .c-image-map__item-caption,.c-image-map__item-toggle:focus~.c-image-map__item-caption,.c-image-map__item:focus-within .c-image-map__item-caption{visibility:visible}@media only screen and (min-width:992px){.c-image-map__item-caption{visibility:visible!important}}button.c-image-map__item-close:hover,button.c-image-map__item-toggle:hover{cursor:pointer}a.c-image-map__item-close:hover,a.c-image-map__item-toggle:hover{text-decoration:none}button.c-image-map__item-close,button.c-image-map__item-toggle{border:none}.c-image-map--has-item-counters .c-image-map__item:before,.c-image-map__item-close,.c-image-map__item-toggle{display:flex;justify-content:center;align-items:center}.c-image-map--should-position-items .c-image-map__item,.c-image-map--should-position-items .c-image-map__item-toggle{position:absolute}.c-image-map--has-toggle-counters{counter-reset:items}.c-image-map--has-toggle-counters .c-image-map__item{counter-increment:items}.c-image-map--has-toggle-counters .c-image-map__item-toggle:before{content:counter(items)}.c-image-map--has-item-counters{counter-reset:items}.c-image-map--has-item-counters .c-image-map__item{counter-increment:items}.c-image-map--has-item-counters .c-image-map__item:before{content:counter(items)}@media only screen and (max-width:991px){.c-image-map--has-item-counters .c-image-map__item:before{display:none}}.c-image-map--has-item-counters .c-image-map__item--unmapped:before{display:none}.c-image-map--has-caption-toggle-alignment .c-image-map__item{scroll-snap-align:start;scroll-margin:var(--caption-toggle-offset-vert)}.c-image-map--has-caption-toggle-alignment .c-image-map__item-caption{left:var(--caption-toggle-offset-horz)}@media only screen and (max-width:991px){.c-image-map--has-caption-toggle-alignment .c-image-map__item--unmapped .c-image-map__item-toggle{left:50%!important}}@media only screen and (min-width:992px){.c-image-map--has-caption-toggle-alignment .c-image-map__item--unmapped .c-image-map__item-toggle{left:calc(var(--caption-toggle-offset-horz) + var(--caption-width))!important}}@media only screen and (max-width:991px){.c-image-map--has-caption-toggle-alignment .c-image-map__item-caption{z-index:1;margin-top:var(--caption-toggle-offset-vert)}}@media only screen and (min-width:992px){.c-image-map--has-caption-toggle-alignment .c-image-map__item-toggle{z-index:1}}

package/dist/components/c-image-map.skin.css

@@ -0,0 +1 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */

package/dist/components/c-image-map.structure.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */
+.c-image-map{--button-shape-size:50px;--toggle-shape-size:60px;--caption-width:100%}.c-image-map--has-caption-toggle-alignment{--caption-toggle-offset-horz:0px;--caption-toggle-offset-vert:calc(var(--toggle-shape-size)/2 + 1em)}.c-image-map{display:table}@media only screen and (max-width:991px){.c-image-map{margin:0 auto}}.c-image-map__image{display:block;width:100%;max-width:495px}.c-image-map__item{width:100%}.c-image-map__item-caption{width:var(--caption-width)}@media only screen and (min-width:992px){.c-image-map__item-close{display:none!important}}.c-image-map__item-toggle{width:var(--toggle-shape-size);height:var(--toggle-shape-size);margin-top:calc(var(--toggle-shape-size)*-1/2);margin-left:calc(var(--toggle-shape-size)*-1/2)}.c-image-map{position:relative}.c-image-map:not(.c-image-map--should-position-items) .c-image-map__item{position:relative}.c-image-map:not(.c-image-map--should-position-items) .c-image-map__items{position:absolute;top:0;left:0;right:0}.c-image-map__item-caption{position:relative}@media only screen and (max-width:991px){.c-image-map__item-toggle{cursor:pointer}}.c-image-map__item-toggle~.c-image-map__item-caption{visibility:hidden}.c-image-map:not(:focus-within) .c-image-map__item:target .c-image-map__item-caption,.c-image-map__item-toggle:focus~.c-image-map__item-caption,.c-image-map__item:focus-within .c-image-map__item-caption{visibility:visible}@media only screen and (min-width:992px){.c-image-map__item-caption{visibility:visible!important}}button.c-image-map__item-close:hover,button.c-image-map__item-toggle:hover{cursor:pointer}a.c-image-map__item-close:hover,a.c-image-map__item-toggle:hover{text-decoration:none}button.c-image-map__item-close,button.c-image-map__item-toggle{border:none}.c-image-map--has-item-counters .c-image-map__item:before,.c-image-map__item-close,.c-image-map__item-toggle{display:flex;justify-content:center;align-items:center}.c-image-map--should-position-items .c-image-map__item,.c-image-map--should-position-items .c-image-map__item-toggle{position:absolute}.c-image-map--has-toggle-counters{counter-reset:items}.c-image-map--has-toggle-counters .c-image-map__item{counter-increment:items}.c-image-map--has-toggle-counters .c-image-map__item-toggle:before{content:counter(items)}.c-image-map--has-item-counters{counter-reset:items}.c-image-map--has-item-counters .c-image-map__item{counter-increment:items}.c-image-map--has-item-counters .c-image-map__item:before{content:counter(items)}@media only screen and (max-width:991px){.c-image-map--has-item-counters .c-image-map__item:before{display:none}}.c-image-map--has-item-counters .c-image-map__item--unmapped:before{display:none}.c-image-map--has-caption-toggle-alignment .c-image-map__item{scroll-snap-align:start;scroll-margin:var(--caption-toggle-offset-vert)}.c-image-map--has-caption-toggle-alignment .c-image-map__item-caption{left:var(--caption-toggle-offset-horz)}@media only screen and (max-width:991px){.c-image-map--has-caption-toggle-alignment .c-image-map__item--unmapped .c-image-map__item-toggle{left:50%!important}}@media only screen and (min-width:992px){.c-image-map--has-caption-toggle-alignment .c-image-map__item--unmapped .c-image-map__item-toggle{left:calc(var(--caption-toggle-offset-horz) + var(--caption-width))!important}}@media only screen and (max-width:991px){.c-image-map--has-caption-toggle-alignment .c-image-map__item-caption{z-index:1;margin-top:var(--caption-toggle-offset-vert)}}@media only screen and (min-width:992px){.c-image-map--has-caption-toggle-alignment .c-image-map__item-toggle{z-index:1}}

package/dist/components/c-nav.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */
+nav.c-nav{--link-padding:0.5em}nav.c-nav--boxed{--indent-small:calc(var(--global-space--list-indent)/4);--indent-medium:calc(var(--global-space--list-indent)/2);--indent-large:var(--global-space--list-indent);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border:var(--global-border--normal)}nav.c-nav--boxed :is(ul,ol){margin:0}nav.c-nav--boxed ul{list-style-type:none;padding-left:var(--indent-medium);padding-right:var(--indent-large)}@media (min-width:992px){nav.c-nav--boxed{padding-block:var(--indent-medium)}nav.c-nav--boxed ol{padding-left:var(--indent-large);padding-right:calc(var(--indent-large) - var(--link-padding))}}@media (max-width:991px){nav.c-nav--boxed{padding-block:var(--indent-small)}nav.c-nav--boxed ol{padding-left:calc(var(--indent-medium) - var(--link-padding));padding-right:calc(var(--indent-large) - var(--link-padding))}}nav.c-nav--boxed.c-nav--no-list{padding-left:var(--indent-medium);padding-right:var(--indent-large)}nav.c-nav{--space-between-inline-items:0.5em}nav.c-nav a{display:inline-block;padding-inline:var(--link-padding)}nav.c-nav--no-list{display:flex;flex-wrap:wrap}nav.c-nav--no-list>a{margin-right:var(--space-between-inline-items)}@media (max-width:991px){nav.c-nav a{line-height:2.5}nav.c-nav :is(ul,ol){display:flex;flex-wrap:wrap;list-style-position:inside}nav.c-nav :is(ul,ol):not(.c-nav--boxed :is(ul,ol)){padding-left:unset}nav.c-nav :is(ul,ol) li{margin-right:var(--space-between-inline-items)}nav.c-nav ul{list-style-type:none}}

package/dist/components/c-page.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */
+.c-page-list{--item-width:2em;--item-buffer:3px;--item-border:var(--global-border-width--normal)}.c-page-list{display:flex;flex-direction:row;align-items:baseline;list-style:none;font-size:14px}ul.c-page-list{list-style:none}.c-page-link--always-click{position:relative;box-sizing:content-box}.c-page-link--always-click:after,.c-page-link--always-click:before{--width:var(--item-buffer);--vert-offset:calc(var(--item-border)*-1);--horz-offset:calc(100% + var(--item-border));content:"";width:var(--width);position:absolute;top:var(--vert-offset);bottom:var(--vert-offset)}.c-page-link--always-click.c-button{overflow:visible}.c-page-link--always-click:before{right:var(--horz-offset)}.c-page-link--always-click:after{left:var(--horz-offset)}.c-page-item{margin-inline:var(--item-buffer)}.c-page-item:first-child{margin-left:0}.c-page-item:last-child{margin-right:0}.c-page-item--etcetera{min-width:var(--item-width);margin-inline:2px;text-align:center;cursor:default}.c-page-end{padding:4px 12px}.c-page-link{padding:5px 0;min-width:var(--item-width);line-height:1.2}

package/dist/components/c-recognition.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */
+.c-recognition{font-size:var(--global-font-size--small)}.c-recognition{padding:0 2.14em;overflow:auto}.c-recognition h3{margin-top:.7em}.c-recognition>p:last-child{margin-bottom:1.4em}.c-recognition--style-dark{color:var(--global-color-primary--xx-light);background-color:var(--global-color-primary--xx-dark)}.c-recognition--style-dark a{color:var(--global-color-link-on-dark--normal)}.c-recognition--style-dark h1,.c-recognition--style-dark h2,.c-recognition--style-dark h3,.c-recognition--style-dark h4,.c-recognition--style-dark h5,.c-recognition--style-dark h6{color:var(--global-color-accent--normal)}.c-recognition--style-light{color:var(--global-color-primary--dark);background-color:var(--global-color-primary--xx-light);border-left:0 solid var(--global-color-primary--xx-dark);border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--xx-dark);border-right:0 solid var(--global-color-primary--xx-dark);border-top:var(--global-border-width--normal) solid var(--global-color-primary--xx-dark)}.c-recognition--style-light a{color:var(--global-color-link-on-light--normal)}.c-recognition--style-light h1,.c-recognition--style-light h2,.c-recognition--style-light h3,.c-recognition--style-light h4,.c-recognition--style-light h5,.c-recognition--style-light h6{color:var(--global-color-primary--xx-dark)}

package/dist/components/c-see-all-link.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */
+.x-truncate--many-lines{--lines:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:var(--lines)}.x-untruncate--many-lines{overflow:visible;-webkit-line-clamp:inherit}.c-see-all-link,.x-truncate--one-line{text-overflow:var(--text-overflow,ellipsis);overflow:hidden;white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}.c-see-all-link{display:inline-block;padding-top:1em;padding-right:1em;padding-bottom:1em;margin-bottom:-1em;max-width:100%;font-size:1.2rem;font-weight:var(--bold)}.c-see-all-link__icon{margin-right:.75em;font-size:1.167em;vertical-align:text-bottom;display:inline-block}.c-see-all-link__text{font-size:1em}

package/dist/components/c-show-more.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */
+.c-show-more--many-lines .c-show-more__target,.x-truncate--many-lines{--lines:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:var(--lines)}.c-show-more--many-lines .c-show-more__state:checked~.c-show-more__target,.x-untruncate--many-lines{overflow:visible;-webkit-line-clamp:inherit}.c-show-more--one-line .c-show-more__target,.x-truncate--one-line{text-overflow:var(--text-overflow,ellipsis);overflow:hidden;white-space:nowrap}.c-show-more--one-line .c-show-more__state:checked~.c-show-more__target,.x-untruncate--one-line{overflow:visible;white-space:normal}.c-show-more__off-text,.c-show-more__on-text,.c-show-more__state{display:none}.c-show-more__state:checked~.c-show-more__toggle .c-show-more__off-text,.c-show-more__state:not(:checked)~.c-show-more__toggle .c-show-more__on-text{display:block}.c-show-more__toggle{cursor:pointer}

package/dist/elements/README.css

@@ -0,0 +1 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */

package/dist/elements/figure.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */
+figure>img{margin-bottom:20px}figcaption{color:var(--global-color-primary--dark);font-size:var(--global-font-size--medium);border-top:var(--global-border-width--normal) solid var(--global-color-primary--normal);padding-top:12px}

package/dist/elements/html-elements.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 2.0.0+ | MIT | github.com/TACC/Core-Styles */
+html{font-size:62.5%}body,html{height:100%}body{min-width:290px;color:var(--global-color-primary--x-dark);font-family:var(--global-font-family);font-size:var(--global-font-size--medium);line-height:1.4}main{padding-bottom:var(--global-space--section-gap)}h1,h2,h3,h4,h5,h6{margin-top:revert;font-weight:var(--bold);color:var(--global-color-primary--xx-dark)}h1{font-size:var(--global-font-size--xxx-large)}h2{font-size:var(--global-font-size--xx-large)}h3,h4,h5,h6{margin-bottom:15px}h3{font-size:var(--global-font-size--x-large)}h4{font-size:var(--global-font-size--large)}h4,h5{text-transform:uppercase}h5,h6{font-size:var(--global-font-size--medium)}p{margin-bottom:2rem}dl dl,ol,ul{padding-left:var(--global-space--list-indent)}ol ol,ol ul,ul ol,ul ul{margin:revert}dt{margin-bottom:.5rem;font-weight:400}li{line-height:1.6}hr{margin-block:var(--global-space--hr-margin)}a,a:hover{color:var(--global-color-link-on-light--normal)}a:focus{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}code,kbd,pre,samp,var{font-family:var(--global-font-family--mono)}code kbd{display:inline-block;padding:.1rem .2rem;margin-left:.2rem;margin-right:.2rem;font-size:inherit}code,pre>samp{color:unset}:not(pre)>code{display:inline-block;padding:var(--global-space--xx-small) var(--global-space--x-small)}pre>code,pre>samp{display:inline-block;padding:var(--global-space--x-small) var(--global-space--small)}pre[style]>code,pre[style]>samp{min-width:100%}pre samp{opacity:.75;text-decoration:none}pre code u{opacity:.5;text-decoration:none}table,td,th{border:var(--global-border--normal)}details{margin-top:0;margin-bottom:1rem}