GH-191: Theme (for ProTX Light Header & TACC Blue Header)

.gitignore

@@ -26,6 +26,7 @@ docker_repo.var
 repo_name.var
 
 # Secrets and Customizations
+settings.json
 taccsite_cms/secrets.py
 *.custom.yml
 *settings_custom*.py

conf/css/.postcssrc.yml

@@ -3,6 +3,13 @@ plugins:
     path:
       - './taccsite_cms/static/site_cms/css/src'
   postcss-extend: {}
+  # Using `importFrom` via `postcss-preset-env` fails (but should work)
+  # FAQ: So it is used directly with plugin (not via `postcss-preset-env`)
+  # SEE: https://github.com/csstools/postcss-preset-env/issues/202
+  # NOTE: Using `postcss-preset-env`'s install of `postcss-env-function` works
+  postcss-env-function:
+    importFrom:
+      - './taccsite_cms/static/site_cms/css/src/_themes/export.js'
   postcss-preset-env:
     # SEE: https://github.com/csstools/postcss-preset-env#features
     stage: false

package.json

@@ -4,11 +4,13 @@
     "license": "MIT",
     "description": "The core CMS codebase for all new and updated TACC CMS sites.",
     "scripts": {
+        "prebuild": "python3 taccsite_cms/settings_to_json.py",
         "build": "npm run build:css",
         "build:css": "node postcss.js",
         "watch": "npm-watch"
     },
     "// scripts": {
+        "prebuild": "Export Django settings to JSON (for Node to use)",
         "build": "Run all static file build commands",
         "build:css": "Build stylesheets from source files",
         "watch": "Build static files when source files change"

taccsite_cms/bin/suppress_stdout.py

@@ -0,0 +1,18 @@
+#!/usr/bin/env python
+
+# Allow a script to temporarily hide `print` output
+# SEE: https://gist.github.com/djsmith42/3956189#file-gistfile1-py
+# SEE: https://thesmithfam.org/blog/2012/10/25/temporarily-suppress-console-output-in-python/
+
+from contextlib import contextmanager
+import sys, os
+
+@contextmanager
+def suppress_stdout():
+    with open(os.devnull, "w") as devnull:
+        old_stdout = sys.stdout
+        sys.stdout = devnull
+        try:
+            yield
+        finally:
+            sys.stdout = old_stdout

taccsite_cms/settings.py

@@ -106,6 +106,14 @@ def gettext(s): return s
 ES_INDEX_PREFIX = 'cms-dev-{}'
 ES_DOMAIN = 'http://localhost:8000'
 
+"""
+Optional theming of CMS (certain themes may only affect some elements)
+Usage:
+- None (standard theme)
+- 'has-dark-logo'
+"""
+THEME = None
+
 TACC_BRANDING = [
     "tacc",
     "site_cms/img/org_logos/tacc-white.png",
@@ -428,6 +436,7 @@ def get_subdirs_as_module_names(path):
 SETTINGS_EXPORT = [
     'DEBUG',
     'FEATURES',
+    'THEME',
     'BRANDING',
     'LOGO',
     'FAVICON',

taccsite_cms/settings_to_json.py

@@ -0,0 +1,25 @@
+#!/usr/bin/env python
+import os
+import sys
+import json
+
+from django.conf import settings
+
+from bin.suppress_stdout import suppress_stdout
+
+# Support isolated reading of settings
+sys.path.insert(0, os.getcwd())
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "taccsite_cms.settings")
+
+# Create JSON
+setting_names = ["THEME"]
+settings_export = {}
+# FAQ: Any print() statements in settings.py would corrupt the JSON
+with suppress_stdout():
+    for setting_name in setting_names:
+        settings_export[setting_name] = getattr(settings, setting_name)
+
+# Write JSON
+with open('taccsite_cms/settings.json', 'w', encoding='utf-8') as outfile:
+    settings_json = json.dumps(settings_export, ensure_ascii=False, indent=2)
+    outfile.write(settings_json + '\n')

taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css

@@ -21,17 +21,16 @@
   /* FAQ: Do not use `48.78px`, because Safari only accepts whole numbers */
   height: 49px;
 
-
   background-color: var(--global-color-primary--xx-dark);
   color: var(--global-color-primary--xx-light);
-  border-bottom: 1px solid #aaa;
+  border-bottom: 1px solid var(--global-color-primary--normal);
 }
 
 .branding-seperator {
   width: 1px;
   height: 100%;
   max-height: var(--branding-logo-height);
-  border-left: solid 1px #fff;
+  border-left: solid 1px var(--global-color-primary--xx-light);
   margin: 0 15px;
   vertical-align: middle;
 }

taccsite_cms/static/site_cms/css/src/_imports/components/bootstrap.form.css

@@ -15,6 +15,8 @@ Styleguide Components.Bootstrap.Form
 .form-control {
   border: var(--global-border--normal);
   border-radius: 0;
+
+  background-clip: border-box; /* to prevent background from showing through */
 }
 input.form-control,
 textarea.form-control {

taccsite_cms/static/site_cms/css/src/_imports/trumps/s-footer.css

@@ -12,5 +12,5 @@ Styleguide Scope.Footer
   margin: 0;
 }
 .s-footer a {
-  color: #cccccc;
+  color: var(--global-color-primary--light);
 }

taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css

@@ -21,8 +21,6 @@ Styleguide Trumps.Scopes.Header
             UPDATE: As of PR #312, this has likely changed (untested). */
 
 .s-header {
-  --text-color: var(--global-color-primary--xx-light);
-
   font-size: 16px; /* NO-R/EM: Overwrite `bootstrap.3.3.7.css` */
 
   /* FAQ: Asssigning this font is only necessary for the User Guide,
@@ -34,8 +32,10 @@ Styleguide Trumps.Scopes.Header
   /* Copied from Portal (via `body`) */
   -webkit-font-smoothing: antialiased;
   -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);
+}
 
 
 /* Affiliation */
@@ -53,7 +53,7 @@ Styleguide Trumps.Scopes.Header
   margin-right: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.navbar-brand`) */
   padding: 0;
 
-  color: var(--text-color);
+  color: env(--header-text-color);
   /* text-decoration: none; *//* already provided by Bootstrap */
 }
 
@@ -77,7 +77,7 @@ Styleguide Trumps.Scopes.Header
   --nav-padding-vert: 5px;
   --nav-padding-horz: calc(16px + 20px);
 
-  background-color: var(--global-color-primary--xx-dark);
+  background-color: env(--header-bkgd-color);
   padding: var(--nav-padding-vert) var(--nav-padding-horz);
 }
 
@@ -112,7 +112,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: var(--text-color);
+  color: env(--header-text-color);
   /* text-decoration: none; *//* already provided by Bootstrap */
 }
 
@@ -139,13 +139,8 @@ 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::before {
-  content: "";
-  width: 1px;
-  /* FAQ: Not `height`, cuz `.s-search-bar` (via `.form-inline`) is flexbox */
-  align-self: stretch;
-
-  background-color: rgb(255,255,255);
+.s-header .s-search-bar ~ .s-portal-nav {
+  border-left: 1px solid env(--header-minor-border-color);
 
   margin-left: 12px;
 }

taccsite_cms/static/site_cms/css/src/_themes/README.md

@@ -0,0 +1,14 @@
+# TACC CMS - Stylesheets - Themes
+
+AUTHOR THEME VALUES HERE!
+
+These values are only to be imported by PostCSS configuration.
+
+## Rules
+
+1. Theme data files __must__ be prefixed with `theme.`.
+2. Theme data files __must__ be `.json` format and extension.
+
+## Content Format
+
+See [PostCSS Preset Env's `importFrom` example content](https://github.com/csstools/postcss-preset-env#importfrom).

taccsite_cms/static/site_cms/css/src/_themes/TODO.md

@@ -0,0 +1,4 @@
+# TACC CMS - Stylesheets - Themes
+
+- Migrate `/taccsite_cms/site_shared/css/src/_imports/settings/*` to theme data.
+- Support one theme extending another theme (default theme or another theme).

taccsite_cms/static/site_cms/css/src/_themes/export.js

@@ -0,0 +1,33 @@
+/**
+ * Export appropriate theme file based on settings value
+ */
+const rootPath = __dirname + '/../../../../../../';
+const settings = require( rootPath + 'taccsite_cms/settings.json');
+const theme = settings.THEME || 'default';
+
+/**
+ * Perform `require` but on fail:
+ * - execute callback
+ * - exit program (as fatal exception)
+ * @param {string} modulePath - Path to the module to require
+ * @param {function} callback - Callback (returns exception from `require()`)
+ * @return {*} Content of the module (if successfully required)
+ * @see https://stackoverflow.com/a/34005010/11817077
+ */
+function requireOrElse(modulePath, callback) {
+  try {
+    return require(modulePath);
+  }
+  catch (e) {
+    if (typeof callback === 'function') {
+      callback(e);
+    }
+    process.exit(1);
+  }
+}
+
+const data = requireOrElse(`./theme.${theme}.json`, () => {
+  console.error(`Unable to find '${__dirname}/theme.${theme}.json'`);
+});
+
+module.exports = data;

taccsite_cms/static/site_cms/css/src/_themes/theme.default.json

@@ -0,0 +1,16 @@
+{
+  "//": "Metadata for humans",
+  "format": "https://github.com/csstools/postcss-preset-env#importfrom",
+  "name": "default",
+
+  "environment-variables": {
+
+    "// 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)"
+
+  }
+}

taccsite_cms/static/site_cms/css/src/_themes/theme.has-dark-logo.json

@@ -0,0 +1,15 @@
+{
+  "//": "Metadata for humans",
+  "format": "https://github.com/csstools/postcss-preset-env#importfrom",
+  "name": "has-dark-logo",
+
+  "environment-variables": {
+
+    "// 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)"
+  }
+}

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

@@ -12,9 +12,6 @@
            variables are unfortunately overwritten 1x in CMS, 2x in Portal */
 /* TODO: Find a way to be modular, but not redundant; perhaps `env()` vars */
 @import url("_imports/settings/font.css");
-/* NOTE: Portal does not need this, because it has independent copy of these,
-         but the User Guides do not. This can be removed in Core-CMS PR #192 */
-@import url("_imports/settings/color.css");
 
 /* TRUMPS */