@tacc/core-styles 0.6.0 → 0.8.0-beta

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

@@ -1,2 +1,2 @@
-/*! @tacc/core-styles 0.6.0+ | MIT | github.com/TACC/Core-Styles */
+/*! @tacc/core-styles 0.8.0-beta+ | 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{width:var(--col-width--wide);margin-right:var(--col-gutter)}}@media only screen and (min-width:1200px){.s-system-specs>aside{width:var(--col-width--thin)}}.s-system-specs>figure>img{width:100%;display:block}.s-system-specs>figure>figcaption{position:relative;margin-top:-40px}@media only screen and (max-width:991px){.s-system-specs>figure>img{width:60%;margin-left:auto;margin-right:auto}}@media only screen and (min-width:992px){.s-system-specs>figure>figcaption{width:80%;margin-left:auto;margin-right:auto}}.s-system-specs .c-data-list__key a{font-weight:var(--medium)}

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

@@ -1,2 +1,2 @@
-/*! @tacc/core-styles 0.6.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]{font-family:Roboto;display:flex;align-items:center;position:relative}:host [part=button]{font-size:16px;position:absolute;left:0;top:50%;transform:translateY(-50%);box-sizing:content-box;height:var(--input-height,38px);align-items:center;margin:0;padding:0 var(--button-horz-pad);background-color:transparent;border:none;color:var(--global-color-primary--xx-light);font-size:var(--button-font-size)}:host [part=input]{display:block;width:100%;height:var(--input-height);margin:0;padding-top: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);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);font-size:var(--input-font-size)}:host [part=input]::-moz-placeholder{color:var(--global-color-primary--xx-light);opacity:.5}:host [part=input]:-ms-input-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 0.8.0-beta+ | 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]{font-family:Roboto;display:flex;align-items:center;position:relative}:host [part=button]{font-size:16px;position:absolute;left:0;top:50%;transform:translateY(-50%);box-sizing:content-box;height:var(--input-height,38px);align-items:center;margin:0;padding:0 var(--button-horz-pad);background-color:transparent;border:none;color:var(--global-color-primary--xx-light);font-size:var(--button-font-size)}:host [part=input]{display:block;width:100%;height:var(--input-height);margin:0;padding-top: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);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);font-size:var(--input-font-size)}: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}

package/dist/trumps/u-empty.css

@@ -1 +1 @@
-/*! @tacc/core-styles 0.6.0+ | MIT | github.com/TACC/Core-Styles */
+/*! @tacc/core-styles 0.8.0-beta+ | MIT | github.com/TACC/Core-Styles */

package/dist/trumps/u-hide.css

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

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

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

package/docs/_fractal.md

@@ -0,0 +1,41 @@
+# TACC Core Styles - Tips for Fractal Component Library
+
+## Debugging
+
+### Preview Templates
+
+To see values available in a preview template, adapt this template code:
+
+```html
+<dl>
+  {{#each _target}}
+  <dt>
+    <strong><code>{{@key}}</code></strong>
+  </dt>
+  <dd><code>{{this}}</code></dd>
+  {{/each}}
+</dl>
+```
+
+### Console Logging
+
+To output values (like objects) in the console, adapt this config code:
+
+```js
+const hbs = require('@frctl/handlebars')({
+  helpers: {
+    debug: function (optionalValue) {
+      console.log('Current Context');
+      console.log('====================');
+      console.log(this);
+
+      if (optionalValue) {
+        console.log('Value');
+        console.log('====================');
+        console.log(optionalValue);
+      }
+    },
+  },
+});
+fractal.components.engine(hbs);
+```

package/docs/index.md

@@ -0,0 +1,26 @@
+---
+title: TACC UI Patterns
+---
+
+This is the UI pattern library for TACC.
+
+The CSS for these patterns is available from [@tacc/core-styles].
+
+---
+
+Known Clients:
+
+- [TACC/Core-CMS]
+- [TACC/Core-Portal]
+- [@tacc/core-components]
+
+[tacc/core-cms]: https://github.com/TACC/Core-CMS
+[tacc/core-portal]: https://github.com/TACC/Core-Portal
+[@tacc/core-components]: https://www.npmjs.com/package/@tacc/core-components
+[@tacc/core-styles]: https://www.npmjs.com/package/@tacc/core-styles
+
+<script type="module">
+Array.from(document.body.querySelectorAll('a'))
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/fractal.config.js

@@ -0,0 +1,53 @@
+'use strict';
+
+const mandelbrot = require('@frctl/mandelbrot');
+const fractal = require('@frctl/fractal').create();
+
+// Get base theme
+const themeConfig = require('./fractal.theme.js');
+const theme = mandelbrot(themeConfig);
+
+// Configure UI
+fractal.set('project.title', 'TACC UI Patterns');
+fractal.components.set('label', 'Patterns'); // default is 'Components'
+fractal.components.set('title', 'Patterns'); // default is 'Components'
+fractal.components.set('default.status', 'wip'); // default is 'ready'
+
+// Set source paths
+// (for components)
+fractal.components.set('path', __dirname + '/src/lib/_imports');
+fractal.components.set('resources', {
+  // Render assets from component folders in a panel
+  // WARNING: Undocumented feature
+  // https://github.com/frctl/fractal/issues/150#issuecomment-254642411
+  // https://github.com/frctl/fractal/issues/93#issuecomment-236429871
+  assets: {
+    label: 'Assets',
+    match: ['**/*.css', '**/*.js'],
+  },
+});
+// (for stylesheets)
+fractal.components.set('default.context', {
+  styles: {
+    internal: {
+      local: [
+        '/settings/border.css',
+        '/settings/color.css',
+        '/settings/font.css',
+        '/settings/max-width.css',
+        '/settings/space.css',
+      ],
+    },
+  },
+});
+
+// Set website paths
+fractal.docs.set('path', __dirname + '/docs');
+fractal.web.set('static.path', __dirname + '/dist');
+fractal.web.set('builder.dest', __dirname + '/demo');
+
+// Customize theme
+fractal.web.theme(theme);
+
+// Export
+module.exports = fractal;

package/fractal.theme.js

@@ -0,0 +1,12 @@
+'use strict';
+
+// To let any client extend
+module.exports = {
+  skin: {
+    accent: '#000000',
+    complement: '#ffffff',
+    links: '#784fe8',
+  },
+  panels: ['notes', 'html', 'resources', 'context', 'info'],
+  nav: ['search', 'docs', 'components'],
+};

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@tacc/core-styles",
-  "version": "0.6.0",
+  "version": "0.8.0-beta",
   "license": "MIT",
   "author": "TACC ACI WMA <wma-portals@gmail.com>",
   "description": "CSS source and processor for TACC Core-CMS and Core-Portal.",
   "files": [
     "dist",
+    "docs",
+    "fractal.config.js",
+    "fractal.theme.js",
+    "src/cli.js",
     "src/bin",
     "src/lib",
     "src/.postcssrc.base.yml"
@@ -13,8 +17,11 @@
   "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)\"",
+    "start": "fractal start --sync",
+    "build": "npm run build:css && npm run build:demo",
+    "build:css": "bin/build-css.js",
+    "build:demo": "fractal build",
+    "test": "bin/test-css.js && echo \"Test output at 'dist/_tests' (compare to test input)",
     "prepublishOnly": "npm run build # && npm test && npm run lint"
   },
   "engines": {
@@ -46,5 +53,9 @@
     "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"
+  },
+  "peerDependencies": {
+    "@frctl/fractal": "^1.5.13",
+    "@frctl/mandelbrot": "^1.10.1"
   }
 }

package/src/lib/_imports/_preview.hbs

@@ -0,0 +1,50 @@
+{{! styles: base (the current component) }}
+{{#unless styles.shouldSkipBase}}
+  <link
+    rel='stylesheet'
+    href='{{path "/components/{{ _target.baseHandle }}.css"}}'
+  />
+{{/unless}}
+
+{{! styles: global (for every component) }}
+{{! (manually configured) }}
+{{#if styles.external.global}}
+  {{#each styles.external.global}}
+    <link rel='stylesheet' href='{{this}}' />
+  {{/each}}
+{{else if styles.internal.global}}
+  {{#each styles.internal.global}}
+    <link rel='stylesheet' href='{{path this}}' />
+  {{/each}}
+{{/if}}
+
+{{! styles: local (for current component) }}
+{{! (automatically found) }}
+{{#each _target.resources.assets}}
+  {{#if isCSS}}
+    <link
+      rel='stylesheet'
+      href='{{path "/components/raw/{{ _target.baseHandle }}/{{ this.base }}"}}'
+    />
+  {{/if}}
+{{/each}}
+{{! (manually configured) }}
+{{#each styles.external.local}}
+  <link rel='stylesheet' href='{{this}}' />
+{{/each}}
+{{#each styles.internal.local}}
+  <link rel='stylesheet' href='{{path this}}' />
+{{/each}}
+
+{{! scripts: local (for current component) }}
+{{! (automatically found) }}
+{{#each _target.resources.assets}}
+  {{#if isJS}}
+    <script
+      src='{{path "/components/raw/{{ _target.baseHandle }}/{{ this.base }}"}}'
+    ></script>
+  {{/if}}
+{{/each}}
+
+{{! markup }}
+{{{yield}}}

package/src/lib/_imports/components/c-button/c-button.config.yml

@@ -0,0 +1,69 @@
+context:
+  supports:
+    states: true
+    icons: true
+    width: true
+    size: true
+    size-small: true
+variants:
+  # type
+  - name: default
+    label: (Unstyled)
+    hidden: true
+    notes: Incomplete implementation; a type is required
+  - name: primary
+    notes: For the only or primary action
+    context:
+      supports:
+        size-small: false
+  - name: secondary
+    notes: For an optional user action
+  - name: tertiary
+    notes: For inactive buttons among many buttons
+      (e.g. pagination buttons to other pages)
+  - name: is-active
+    notes: For the one active button among many buttons
+      (e.g. pagination button for current page)
+  - name: as-link
+    notes: For a button that resembles a link
+    context:
+      supports:
+        width: false
+        size: false
+  # state
+  - name: is-busy
+    notes: For a button whose being clicked started an incomplete process (should have `disabled` attribute)
+    context:
+      supports:
+        states: false
+        type: true
+      type: c-button--secondary
+      disabled: true
+  # width
+  - name: width-short
+    context:
+      supports:
+        width: false
+        type: true
+      type: c-button--secondary
+  - name: width-medium
+    context:
+      supports:
+        width: false
+        type: true
+      type: c-button--secondary
+  - name: width-long
+    context:
+      supports:
+        width: false
+        type: true
+      type: c-button--secondary
+  # size
+  - name: size-small
+    notes: For a button in a condensed layout
+    context:
+      supports:
+        size: false
+        type: true
+      type: c-button--secondary
+      small: true

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

@@ -0,0 +1,91 @@
+<dl>
+  {{#if supports.type}}
+  <dt>Type</dt>
+  <dd>
+    <button class="c-button c-button--{{this._self.name}} c-button--secondary"
+      {{#if disabled}}disabled{{/if}}>
+      <span class="c-button__text">--secondary</span>
+    </button>
+    {{#if small}}
+      <small>(no small primary allowed)</small>
+    {{else}}
+      <button class="c-button c-button--{{this._self.name}} c-button--primary"
+      {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--primary</span>
+      </button>
+    {{/if}}
+    <button class="c-button c-button--{{this._self.name}} c-button--tertiary"
+      {{#if disabled}}disabled{{/if}}>
+      <span class="c-button__text">--tertiary</span>
+    </button>
+  </dd>
+  {{/if}}
+
+  {{#if supports.states}}
+  <dt>States</dt>
+  <dd>
+    <button class="c-button c-button--{{this._self.name}}
+      {{#if type}}{{type}}{{/if}}"
+      {{#if disabled}}disabled{{/if}}>
+      <span class="c-button__text">default</span>
+    </button>
+    <button class="c-button c-button--{{this._self.name}} c-button--is-busy
+      {{#if type}}{{type}}{{/if}}"
+      disabled>
+      <span class="c-button__text">--is-busy</span>
+    </button>
+  </dd>
+  {{/if}}
+
+  {{#if supports.icons}}
+  <dt>Icons</dt>
+  <dd>
+    <button class="c-button c-button--{{this._self.name}}
+      {{#if type}}{{type}}{{/if}}"
+      {{#if disabled}}disabled{{/if}}>
+      <i class="c-button__icon--before" aria-description="validate input">…</i>
+      <span class="c-button__text">__icon--before</span>
+    </button>
+    <button class="c-button c-button--{{this._self.name}}
+      {{#if type}}{{type}}{{/if}}"
+      {{#if disabled}}disabled{{/if}}>
+      <span class="c-button__text">__icon--after</span>
+      <i class="c-button__icon--after" aria-description="exit page">X</i>
+    </button>
+  </dd>
+  {{/if}}
+
+  {{#if supports.width}}
+  <dt>Width</dt>
+  <dd>
+    <button class="c-button c-button--{{this._self.name}} c-button--width-short
+      {{#if type}}{{type}}{{/if}}"
+      {{#if disabled}}disabled{{/if}}>
+      <span class="c-button__text">--width-short</span>
+    </button>
+    <button class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
+      {{#if disabled}}disabled{{/if}}>
+      <span class="c-button__text">--width-medium</span>
+    </button>
+    <button class="c-button c-button--{{this._self.name}} c-button--width-large {{#if type}}{{type}}{{/if}}"
+      {{#if disabled}}disabled{{/if}}>
+      <span class="c-button__text">--width-large</span>
+    </button>
+  </dd>
+  {{/if}}
+
+  {{#if supports.size}}
+  <dt>Size</dt>
+  <dd>
+    {{#if supports.size-small}}
+    <button class="c-button c-button--{{this._self.name}} c-button--size-small
+      {{#if type}}{{type}}{{/if}}"
+      {{#if disabled}}disabled{{/if}}>
+      <span class="c-button__text">--size-small</span>
+    </button>
+    {{else}}
+      <small>(no small size allowed)</small>
+    {{/if}}
+  </dd>
+  {{/if}}
+</dl>

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

@@ -0,0 +1,3 @@
+dd > * {
+  margin-right: 0.5em;
+}

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

@@ -1,19 +1,3 @@
-/*
-Button
-
-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--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
-
-Markup: c-button.html
-
-Styleguide Components.Button
-*/
 @import url("_imports/tools/x-truncate.css");
 
 
@@ -22,12 +6,11 @@ Styleguide Components.Button
 
 /* Base */
 
-[class*='c-button'] {
+.c-button {
   --min-width: 75px;
   --mid-width: 110px;
   --max-width: 130px;
-}
-.c-button {
+
   display: inline-block;
 
   border-width: var(--global-border-width--normal);
@@ -58,6 +41,8 @@ Styleguide Components.Button
 
 /* Modifiers */
 
+
+
 /* Modifiers: Types */
 
 .c-button--primary,
@@ -246,6 +231,8 @@ Styleguide Components.Button
   opacity: 0.3;
 }
 
+
+
 /* Modifiers: Sizes */
 
 .c-button--width-short {

package/src/lib/_imports/objects/o-section.css

@@ -67,8 +67,9 @@ Styleguide Objects.Section
 
 /* Modifers: Banner */
 
-.o-section--banner[class*="o-section--layout"] { gap: 0; }
-.o-section--banner.container { padding-inline: 0; }
+.o-section--banner { overflow: hidden; }
+.o-section--banner [class*="o-section--layout"] { gap: 0; }
+.o-section--banner .container { padding-inline: 0; }
 .o-section--banner.o-section { padding-block: 0; }
 
 
@@ -253,24 +254,6 @@ Styleguide Objects.Section
 
 
 
-/* Tricks: Children: Banner Image */
-/* FP-1462: Extract to new banner component(s) */
-
-/* To hide section overflow with minimal side effects */
-/* FAQ: Use 'clip', not 'hidden' which can affect opposite 'overflow-' value */
-/* NOTE: This selector assumes only a banner section has vertical overflow */
-/* CAVEAT: Any banner pop-out el's would NOT overflow atop sibling sections */
-[class*="o-section--style"].o-section--banner {
-  /* To hide vert. overflow */
-  overflow-y: clip;
-}
-main {
-  /* To hide horz. overflow yet support any 'position: sticky' descendant */
-  overflow-x: clip;
-}
-
-
-
 /* Tricks: Modifers: Style */
 
 /* To prevent visibly extra space beneath certain sections and footer */

package/src/lib/_imports/settings/color.css

@@ -13,9 +13,9 @@
 */
 
 :root {
-  /* The primary colors of any app (for neutral text, borders, backgrounds) */
+  /* Neutral */
+  /* FAQ: Primary colors of an app (neutral text, borders, backgrounds) */
   /* IDEA: Rename these from `primary` to `neutral` */
-
   --global-color-primary--xx-light: #FFFFFF;
     --global-color-primary--xx-light-rgb: 255, 255, 255;
   --global-color-primary--x-light: #F4F4F4;
@@ -27,4 +27,33 @@
     --global-color-primary--x-dark-rgb: 72, 72, 72;
   --global-color-primary--xx-dark: #222222;
     --global-color-primary--xx-dark-rgb: 34, 34, 34;
+
+  /* Accent */
+  --global-color-accent--x-light: #e3d7fd;
+  --global-color-accent--light: #a387ed;
+  --global-color-accent--normal: #784fe8;
+  --global-color-accent--dark: #6039cc;
+  --global-color-accent--x-dark: #3d189b;
+
+  --global-color-accent--alt: #d2cce7;
+  --global-color-accent--weak: #6039cc40; /* similar to #E3D7FD on #f4f4f4 */
+
+  /* State */
+  --global-color-info--dark: var(--global-color-primary--x-dark);
+  --global-color-info--normal: var(--global-color-primary--normal);
+  --global-color-info--light: var(--global-color-primary--x-light);
+  --global-color-success--normal: #43d130;
+  --global-color-success--weak: #43d13020;
+  --global-color-success--alt: var(--global-color-warning--normal);
+  --global-color-success--alt-weak: var(--global-color-warning--weak);
+  --global-color-warning--normal: #c7ce1d;
+  --global-color-warning--weak: #c7ce1d20;
+  --global-color-warning--alt: var(--global-color-accent--dark);
+  --global-color-warning--alt-weak: var(--global-color-accent--weak);
+  --global-color-danger--dark: #ab1717;
+  --global-color-danger--normal: #eb6e6e;
+  --global-color-danger--weak: #eb6e6e20;
+
+  /* Generic */
+  --global-color-background--app: var(--global-color-primary--xx-light);
 }

package/src/lib/_imports/settings/space.css

@@ -10,6 +10,7 @@ _Notice_: We will use Bootstrap values until Design defines values.
 Usage: `var(--global-space--normal)`
 
 Reference:
+- https://confluence.tacc.utexas.edu/x/dYAZCg
 - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
 - https://getbootstrap.com/docs/4.0/utilities/spacing/
 - https://getbootstrap.com/docs/4.0/getting-started/theming/#sass-options
@@ -23,14 +24,27 @@ Styleguide Settings.CustomProperties.Space
     --(…)large: larger value
 */
 :root {
-  --global-space--xx-small: 0.125rem;  /*  2px (if base is 16px) */
-  --global-space--x-small: 0.25rem;    /*  4px (if base is 16px) */
-  --global-space--small: 0.5rem;       /*  8px (if base is 16px) */
-  --global-space--normal: 1.0rem;      /* 16px (if base is 16px) */
-  --global-space--large: 1.5rem;       /* 25px (if base is 16px) */
-  --global-space--x-large: 3.0rem;     /* 48px (if base is 16px) */
-
+  /* Generic */
+  --global-space--xx-small: 2px;   /* 0.125rem (if base is 16px) */
+  --global-space--x-small: 4px;    /* 0.25rem  (if base is 16px) */
+  --global-space--small: 8px;      /* 0.5rem   (if base is 16px) */
+  --global-space--normal: 16px;    /* 1.0rem   (if base is 16px) */
+  --global-space--large: 25px;     /* 1.5rem   (if base is 16px) */
+  --global-space--x-large: 48px;   /* 3.0rem   (if base is 16px) */
+
+  /* Miscellaneous */
   --global-space--list-indent: 40px;   /* browser default (Firefox, Edge) */
   --global-space--section-gap: 45px;   /* recurring design doc spacing */
   --global-space--grid-gap: 15px;      /* Bootstrap `.container` & `.row` */
+
+  /* Applications */
+  --global-space--section-top: 12px;
+  --global-space--section-bottom: 0;
+  --global-space--section-left: 24px;
+  --global-space--section-right: 36px;
+  --global-space--section:
+    var(--global-space--section-top)
+    var(--global-space--section-right)
+    var(--global-space--section-bottom)
+    var(--global-space--section-left);
 }