fix: pattern demo repair suite (#568)

bin/build-css.js

@@ -17,11 +17,13 @@ const BUILD_ID = ARGS['build-id'] || '';
 (() => {
   // Get style paths
   const corePath = _getPath('taccsite_cms', 'site_cms');
+  const demoPath = 'node_modules/@tacc/core-styles';
   const projPath = _getPath(`taccsite_custom/${PROJECT_NAME}`, PROJECT_NAME );
   const hasProject = ( PROJECT_NAME && PROJECT_NAME !== CORE_NAME );
 
   // Get config paths
   const coreConfPath = `${ROOT}/${corePath}/.postcssrc.yml`;
+  const demoConfPath = coreConfPath;
   const projConfPath = `${ROOT}/${projPath}/.postcssrc.yml`;
   const confPaths = [coreConfPath];
 
@@ -31,33 +33,51 @@ const BUILD_ID = ARGS['build-id'] || '';
     confPaths.push( projConfPath );
   }
 
-  // Build
-  _build('Core', corePath, confPaths, BUILD_ID );
+  // Prepare for build
+  defaultOpts = {
+    verbose: true,
+    buildId: BUILD_ID
+  }
+
+  // Build styles
+  _build('Core', {
+    input: `${ROOT}/${corePath}/src/**/*.css`,
+    output: `${ROOT}/${corePath}/build`,
+    opts: {...defaultOpts, ...{
+      customConfigs: confPaths
+    }}
+  });
+  _build('Demo', {
+    input: `${ROOT}/${demoPath}/src/**/*.css`,
+    output: `${ROOT}/${demoPath}/build`,
+    opts: {...defaultOpts, ...{
+      customConfigs: [demoConfPath],
+      baseMirrorDir: `${ROOT}/${demoPath}/src/lib/_imports`
+    }}
+  });
   if ( hasProject ) {
-    _build( PROJECT_NAME, projPath, confPaths, BUILD_ID );
+    _build( PROJECT_NAME, {
+      input: `${ROOT}/${projPath}/src/**/*.css`,
+      output: `${ROOT}/${projPath}/build`,
+      opts: {...defaultOpts, ...{
+        customConfigs: confPaths
+      }}
+    });
   }
 })();
 
 /**
  * Execute command to build stylesheets
  * @param {string} name - The name of the project
- * @param {string} path - The path to the project source CSS
- * @param {array.string} configs - The list of config file paths
- * @param {string} id - The value to identify the build
+ * @param {object} opts - The value to identify the build
+ * @param {string} opts.input - The path to project source CSS
+ * @param {string} opts.output - The path to put the built CSS
+ * @param {@tacc/core-styles.buildStylesheets.opts} opts.opts - Advanced options
  */
-function _build( name, path, configs, id ) {
-  const configValues = '"' + configs.join('" "') + '"';
-
-  console.log(`Overriding config with:`, configs );
+function _build( name, opts ) {
+  console.log(`Overriding config with:`, opts.customConfigs );
   console.log(`Building "${name}" styles:`);
-  buildStylesheets(
-    `${ROOT}/${path}/src/**/*.css`,
-    `${ROOT}/${path}/build`, {
-      customConfigs: configs,
-      verbose: true,
-      buildId: id
-    }
-  );
+  buildStylesheets( opts.input, opts.output, opts.opts );
 }
 
 /**

package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@frctl/fractal": "^1.5.13",
     "@frctl/mandelbrot": "^1.10.1",
-    "@tacc/core-styles": "^0.10.0",
+    "@tacc/core-styles": "github:TACC/Core-Styles#fix/bugs-found-in-client-demo",
     "minimist": "^1.2.6"
   },
   "repository": "git@github.com:TACC/Core-CMS.git",

taccsite_cms/static/site_cms/css/src/_imports/components/c-button.css

@@ -1,8 +1,6 @@
 @import url("@tacc/core-styles/src/lib/_imports/components/c-button.css");
 @import url("../settings/font.css");
 
-.c-button {
-  --max-width: unset;
-
+.c-button:not(.c-button--as-link) {
   font-size: var(--global-font-size--small);
 }

taccsite_cms/static/site_cms/css/src/_imports/elements/irregular-link.css

@@ -0,0 +1,13 @@
+/* Allow making all hyperlinks "irregular" styles */
+
+@import url("_imports/tools/x-link.css");
+
+a {
+  @extend .x-link--irregular;
+}
+a:hover {
+  @extend .x-link--irregular--hover;
+}
+a:active {
+  @extend .x-link--irregular--active;
+}

taccsite_cms/static/site_cms/css/src/_imports/settings/color.css

@@ -2,26 +2,8 @@
 
 :root {
 
-  /* Accent */
-  /* CAVEAT: A standard accent color definition is pending more designs */
-  /* NOTE: The new Frontera and TACC designs both have brown and blue accents */
-
-  --global-color-accent--x-light: #F2DFBD; /* originally #e3d7fd */
-  --global-color-accent--light: #BDA374;   /* originally #a387ed */
-  --global-color-accent--normal: #877453;  /* originally #784fe8 */
-  --global-color-accent--dark: #64563E;    /* originally #6039cc */
-  --global-color-accent--x-dark: #403014;  /* originally #3d189b */
-
-  --global-color-accent--alt: #E0D8C9;     /* originally #d2cce7 */
-  --global-color-accent--weak: #9D702140;  /* originally #6039cc40 */
-
-
-
   /* Link */
-
-  /* CAVEAT: Not accessible within paragraph text (edge case as of 2021-08) */
-  --global-color-link-on-light--normal: #003399;
-  /* WARNING: This color is from Dev not Design (not rendered as of 2021-08) */
-  --global-color-link-on-dark--normal: #0088FF;
+  --global-color-link-on-light--normal: var(--global-color-accent--normal);
+  --global-color-link-on-dark--normal: var(--global-color-accent--xxx-light);
 
 }

taccsite_cms/static/site_cms/css/src/site.css

@@ -3,6 +3,14 @@
 /* Organize via ITCSS */
 /* SEE: https://confluence.tacc.utexas.edu/x/IAA9Cw */
 
+/* FAQ: File paths are functional, but not consistent:
+        - Local files are prepended with `./imports/`.
+        - Remote files are prepended with `@tacc/core-styles/src/lib/_imports/`.
+        - Automatic file locators are prepended with `_imports/`.﹡
+
+        ﹡ Files is first searched for locally, then remotely.
+*/
+
 /* SETTINGS */
 @import url("_imports/settings/border.css");
 @import url("_imports/settings/max-width.css");
@@ -19,6 +27,8 @@
 /* Bootstrap performs much of this */
 @import url("@tacc/core-styles/src/lib/_imports/elements/html-elements.cms.css");
 @import url("@tacc/core-styles/src/lib/_imports/elements/form.cms.css");
+@import url("@tacc/core-styles/src/lib/_imports/elements/links.css");
+@import url("@tacc/core-styles/src/lib/_imports/elements/table.css");
 /* Load custom element styles within custom element, not here */
 
 /* OBJECTS */
@@ -35,8 +45,9 @@
 @import url("_imports/components/c-footer.css");
 @import url("_imports/components/c-recognition.css");
 @import url("_imports/components/c-see-all-link.css");
-@import url("_imports/components/bootstrap.container.css");
+@import url("@tacc/core-styles/src/lib/_imports/components/bootstrap.container.css");
 @import url("_imports/components/bootstrap.figure.css");
+@import url("@tacc/core-styles/src/lib/_imports/components/bootstrap.modal.css");
 /* Unique to CMS */
 @import url("./_imports/components/c-button.css");
 @import url("./_imports/components/django.cms.css");
@@ -49,6 +60,7 @@
 @import url("_imports/trumps/s-breadcrumbs.css");
 @import url("_imports/trumps/s-footer.css");
 @import url("_imports/trumps/s-blockquote.css");
+@import url("@tacc/core-styles/src/lib/_imports/trumps/s-irregular-links.css");
 @import url("_imports/trumps/u-empty.css");
 @import url("@tacc/core-styles/src/lib/_imports/trumps/u-mailto-text-replace.css");
 @import url("@tacc/core-styles/src/lib/_imports/trumps/s-affixed-input-wrapper.css");

taccsite_ui/fractal.config.js

@@ -15,9 +15,10 @@ let cmsName = 'core-cms';
 let projName = args['project'] || '';
     projName = ( projName !== cmsName ) ? projName : '';
 // (stylesheet)
-const cmsCSSFile = 'cms/site.css';
+const escapeDemoDir = '/../..'; // i.e. back out of '/static/ui'
+const cmsCSSFile = `${escapeDemoDir}/static/site_cms/css/build/site.css`;
 const projCSSFile = ( projName )
-  ? `projects/${projName}/static/${projName}/css/build/site.css`
+  ? `${escapeDemoDir}/static/${projName}/css/build/site.css`
   : null;
 
 // Set source paths
@@ -28,13 +29,11 @@ fractal.components.set('path', __dirname + '/patterns');
 fractal.components.set('default.context', {
   styles: {
     shouldSkipBase: true, // true, because site.css includes components
-    internal: {
-      global: [ cmsCSSFile ].concat( ( projCSSFile ) ? [ projCSSFile ] : [] )
-    },
     external: {
       global: [
-        'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'
-      ]
+        'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
+        cmsCSSFile,
+      ].concat( ( projCSSFile ) ? [ projCSSFile ] : [] )
     }
   }
 });
@@ -44,14 +43,7 @@ if ( projCSSFile ) {
 }
 
 // Set website paths
-/*
-fractal.web.set('static.path',
-  path.dirname( require.resolve('@tacc/core-styles')) +
-  '/..' + // exits 'src/' which is at the end of what require.resolve returns
-  '/dist'
-);
-*/
-fractal.web.set('static.path', __dirname + '/styles');
+fractal.web.set('static.path', __dirname + '/../node_modules/@tacc/core-styles/build');
 fractal.web.set('builder.dest', __dirname + '/dist');
 
 // Customize theme