@tacc/core-styles 0.6.0-alpha → 0.6.0-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tacc/core-styles",
-  "version": "0.6.0-alpha",
+  "version": "0.6.0-beta",
   "license": "MIT",
   "author": "TACC ACI WMA <wma-portals@gmail.com>",
   "description": "CSS source and processor for TACC Core-CMS and Core-Portal.",
@@ -8,13 +8,14 @@
     "dist",
     "src/bin",
     "src/lib",
-    ".postcssrc.base.yml"
+    "src/.postcssrc.base.yml"
   ],
   "main": "src/main.js",
   "bin": "src/cli.js",
   "scripts": {
     "build": "node src/cli.js build -i \"src/lib/_imports/**/*!(README).css\" -o \"./dist\" -m \"src/lib/_imports\"",
-    "test": "node src/cli.js build -i \"src/lib/_tests\" -o \"./dist\" -m \"src/lib\" && echo \"Test output at 'dist/_tests' (compare to test input)\""
+    "test": "node src/cli.js build -i \"src/lib/_tests\" -o \"./dist\" -m \"src/lib\" && echo \"Test output at 'dist/_tests' (compare to test input)\"",
+    "prepublishOnly": "npm run build # && npm test && npm run lint"
   },
   "engines": {
     "node": ">=15.x",
@@ -37,12 +38,13 @@
   "// dependencies": {
     "commander": "To create CLI",
     "cssnano": "To minify CSS",
-    "node-cmd": "To run `postcss-cli` from script",
-    "postcss-banner": "To prepend version comment to built stylesheets",
-    "postcss-cli": "To process CSS",
-    "postcss-cli:note": "This is the simplest and cheapest 'PostCSS Runner'",
+    "js-yaml": "To parse PostCSS configs",
+    "merge-lite": "To merge PostCSS configs",
+    "node-cmd": "To run PostCSS CLI from script",
+    "postcss-banner": "To prepend preserved comment to built stylesheets",
+    "postcss-cli": "To process CSS (the simplest and cheapest PostCSS runner)",
     "postcss-import": "To import CSS files at build-time",
-    "postcss-extend": "To import/extend CSS rule sets 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

@@ -0,0 +1,38 @@
+plugins:
+  postcss-import:
+    path:
+      - 'src/lib'
+
+  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
+
+    # 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/src/bin/build.js

@@ -5,9 +5,7 @@
 const cmd = require('node-cmd');
 
 // SEE: https://stackoverflow.com/a/63530170
-process.env.FORCE_COLOR = true
-
-
+process.env.FORCE_COLOR = true;
 
 /**
  * Build stylesheets from source CSS
@@ -22,8 +20,8 @@ process.env.FORCE_COLOR = true
 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}"` : '';
+  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}`;
@@ -34,7 +32,7 @@ function build(input, output, opts = {}) {
   cmd.runSync(command);
 }
 
-
-
-// Export
+/*
+  Export
+*/
 module.exports = build;

package/src/bin/config.js

@@ -9,8 +9,6 @@ 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
@@ -20,71 +18,65 @@ const NEW_CONFIG_FILE = `${__dirname}/../.postcssrc.yml`;
  * @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');
+  // 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);
+  });
+  const 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}`);
+function updateVersion(config, version) {
+  console.log(`Tagging CSS version as ${version}`);
 
-    config['plugins']['postcss-banner']['banner'] = version;
+  config['plugins']['postcss-banner']['banner'] = version;
 
-    return config;
+  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 );
+function getConfigObject(filePath) {
+  const config = fs.readFileSync(filePath, 'utf8');
+  const json = yaml.load(config);
 
-    return json;
+  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') );
+function emptyOrCreateFile(filePath) {
+  fs.closeSync(fs.openSync(filePath, 'w'));
 }
 
-
-
-// Export
+/*
+  Export
+*/
 module.exports = config;

package/src/bin/version.js

@@ -4,21 +4,20 @@
 
 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://', '');
+  const appName = package.name;
+  const appVersion = buildId || package.version + '+';
+  const appLicense = package.license;
+  const appWebsite = package.homepage.replace('https://', '');
 
-    return `${appName} ${appVersion} | ${appLicense} | ${appWebsite}`;
+  return `${appName} ${appVersion} | ${appLicense} | ${appWebsite}`;
 }
 
-
-
-// Export
+/*
+  Export
+*/
 module.exports = create;

package/src/cli.js

@@ -8,39 +8,46 @@ const package = require(process.env.npm_package_json || './package.json');
 
 const { buildStylesheets } = require('./main.js');
 
-
-
-// Setup
+/*
+  Setup
+*/
 program
-    .name('core-styles')
-    .version(package.version)
-    .showHelpAfterError('(add --help for additional information)');
-
+  .name('core-styles')
+  .version(package.version)
+  .showHelpAfterError('(add --help for additional information)');
 
-
-// Build Command
+/*
+  Build Command
+*/
 program
-    .command('build')
-    .description(`build stylesheets with TACC standard process:
+  .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', `
+    `
+  )
+  .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.
 
@@ -65,13 +72,15 @@ Notes:
   ⁴ 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 );
-    });
-
+    `
+  )
+  .action((programOpts) => {
+    const { input, output, ...opts } = programOpts;
 
+    buildStylesheets(input, output, opts);
+  });
 
-// Parse
+/*
+  Parse
+*/
 program.parse(process.argv);

package/src/lib/_imports/README.md

@@ -4,11 +4,11 @@ Styles here should be isolated UI patterns and be imported by other stylesheets.
 
 ## Rules
 
-1. Files __must__ be [organized appropriately](#directory-organization).
-1. Files __must__ be [documented appropriately](#documentation-format).
-1. Files __must__ follow the [style guide][tacc-style-guide].
+1. Files **must** be [organized appropriately](#directory-organization).
+1. Files **must** be [documented appropriately](#documentation-format).
+1. Files **must** follow the [style guide][tacc-style-guide].
 
-- Styles __should__ be for [structure](#structure-vs-skin) and __may__ be for [skin](#structure-vs-skin).
+- Styles **should** be for [structure](#structure-vs-skin) and **may** be for [skin](#structure-vs-skin).
 
 ## Directory Organization
 
@@ -40,8 +40,8 @@ See [TACC: CSS Style Guide][tacc-style-guide].
 
 ## Structure vs. Skin
 
-- Most Core styles will be _only __or__ mostly_ for [structure][tacc-oocss].
+- Most Core styles will be _only **or** mostly_ for [structure][tacc-oocss].
 - Some core styles may be [skin][tacc-oocss].
 
-[tacc-oocss]: https://confluence.tacc.utexas.edu/x/VwALBg "TACC: Object-Oriented CSS"
-[tacc-style-guide]: https://confluence.tacc.utexas.edu/x/ZQALBg "TACC: CSS Style Guide"
+[tacc-oocss]: https://confluence.tacc.utexas.edu/x/VwALBg 'TACC: Object-Oriented CSS'
+[tacc-style-guide]: https://confluence.tacc.utexas.edu/x/ZQALBg 'TACC: CSS Style Guide'

package/src/lib/_imports/components/c-button.css

@@ -5,7 +5,8 @@ A button that may have icon(s) before and/or after its text.
 
 .c-button--primary - A primary (expected) user action
 .c-button--secondary - For an optional user action
-.c-button--is-active - A button that represents the current state
+.c-button--tertiary - A button that represents inactive buttons among many
+.c-button--is-active - A button that represents the one active button among many
 .c-button--as-link - A button that visually resembles a link
 .c-button--is-busy - A clicked button that started an incomplete process
 
@@ -43,14 +44,12 @@ Styleguide Components.Button
 }
 .c-button:disabled:not(.c-button--is-busy) {
   color: var(--global-color-primary--dark);
-  background-color: var(--global-color-primary--xx-light);
   border-color: var(--global-color-primary--dark);
 
   pointer-events: none;
 }
-
-.c-button:active:not(:disabled) {
-  transform: translateY(1px);
+.c-button:disabled:not(.c-button--is-busy, .c-button--as-link) {
+  background-color: var(--global-color-primary--xx-light);
 }
 
 
@@ -59,11 +58,12 @@ Styleguide Components.Button
 
 /* Modifiers */
 
-
 /* Modifiers: Types */
 
 .c-button--primary,
-.c-button--secondary {
+.c-button--secondary,
+.c-button--tertiary,
+.c-button--is-active {
   padding: 6px 18px;
   min-width: var(--min-width);
   max-width: var(--max-width);
@@ -77,7 +77,7 @@ Styleguide Components.Button
   border-color: var(--global-color-accent--dark);
 }
 
-.c-button--primary:active {
+.c-button--primary:active:not(.c-button--is-busy) {
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-accent--x-dark);
   border-color: var(--global-color-accent--dark);
@@ -111,12 +111,50 @@ Styleguide Components.Button
 /* Modifiers: Types: Secondary */
 
 .c-button--secondary:hover {
+  color: var(--global-color-primary--xx-dark);
+  background-color: var(--global-color-accent--weak);
+  border-color: var(--global-color-accent--normal);
+}
+
+.c-button--secondary:active:not(.c-button--is-busy) {
+  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-accent--weak);
+  border-color: var(--global-color-primary--xx-dark);
+
+  outline: var(--global-border-width--thick) solid
+    var(--global-color-accent--light);
+}
+
+.c-button--secondary.c-button--is-busy,
+.c-button--secondary:not(.c-button:hover, .c-button:focus, .c-button:active, .c-button:disabled) {
+  color: var(--global-color-primary--xx-dark);
+  background-color: var(--global-color-primary--x-light);
+  border-color: var(--global-color-primary--xx-dark);
+}
+
+.c-button/* for specificity to override */.c-button--secondary:disabled {
+  background-color: var(--global-color-primary--x-light);
+}
+
+/* Modifiers: Types: Tertiary */
+
+.c-button--tertiary: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 {
+.c-button--tertiary:active:not(.c-button--is-busy) {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-accent--x-light);
   border-color: var(--global-color-accent--dark);
@@ -126,7 +164,7 @@ Styleguide Components.Button
     var(--global-color-accent--dark);
 }
 
-.c-button--secondary:focus:not(:active) {
+.c-button--tertiary: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);
@@ -135,8 +173,8 @@ Styleguide Components.Button
     var(--global-color-accent--light);
 }
 
-.c-button--secondary.c-button--is-busy,
-.c-button--secondary:not(
+.c-button--tertiary.c-button--is-busy,
+.c-button--tertiary:not(
   .c-button:hover,
   .c-button:focus,
   .c-button:active,
@@ -149,12 +187,41 @@ Styleguide Components.Button
 
 /* Modifiers: Types: Is Active */
 
+.c-button--is-active:hover {
+  color: var(--global-color-primary--xx-dark);
+  background-color: var(--global-color-accent--alt);
+  border-color: var(--global-color-accent--dark);
+}
+
+.c-button--is-active: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--is-active:focus:not(:active) {
+  color: var(--global-color-primary--xx-dark);
+  background-color: var(--global-color-accent--alt);
+  border-color: var(--global-color-primary--xx-dark);
+
+  outline: var(--global-border-width--thick) solid
+    var(--global-color-accent--light);
+}
+
+.c-button--is-active.c-button--is-busy,
 .c-button--is-active:not(
   .c-button:hover,
   .c-button:focus,
-  .c-button:active
+  .c-button:active,
+  .c-button:disabled
 ) {
+  color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-accent--x-light);
+  border-color: var(--global-color-primary--xx-dark);
 }
 
 /* Modifiers: Types: As Link */
@@ -192,7 +259,7 @@ Styleguide Components.Button
 }
 .c-button--size-small {
   min-width: 0;
-  padding: 3px 9px;
+  padding: 4px 9px;
   line-height: 1;
 }
 

package/src/lib/_imports/components/c-button.html

@@ -4,7 +4,7 @@
 </button>
 
 <button class="c-button c-button--primary">
-  <i class="c-button__icon" data-icon="✓">(check input)</i>
+  <i class="c-button__icon--before" data-icon="✓">(check input)</i>
   <span class="c-button__text">Confirm</span>
   <i class="c-button__icon--after" data-icon="→">(and exit)</i>
 </button>
@@ -14,13 +14,17 @@
   <i class="c-button__icon--after" data-icon="→">(and move to next form)</i>
 </button>
 
+<div class="display: flex; gap: 5px">
+  <button class="c-button c-button--tertiary">1</button>
+  <button class="c-button c-button--tertiary">2</button>
+  <button class="c-button c-button--tertiary">3</button>
+</div>
+
 <button class="c-button c-button--is-active">
   <span class="c-button__text">Current Item</span>
 </button>
 
-<button class="c-button c-button--as-link">
-  Return to Previous Screen
-</button>
+<button class="c-button c-button--as-link">Return to Previous Screen</button>
 
 <button class="c-button c-button--secondary c-button--is-busy">
   <span class="c-button__text">Submit (Secondary)</span>