@tacc/core-styles 2.1.0 → 2.3.0

package/dist/trumps/u-hide.css

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

package/dist/trumps/u-mailto-text-replace.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.1.0+ | MIT | github.com/TACC/Core-Styles */.u-mailto-text-replace[data-user][data-domain]{font-size:0;visibility:hidden}.u-mailto-text-replace[data-user][data-domain]:before{content:attr(data-user) "@" attr(data-domain);display:inline;font-size:medium;visibility:visible}
+/*! @tacc/core-styles 2.3.0+ | MIT | github.com/TACC/Core-Styles */.u-mailto-text-replace[data-user][data-domain]{font-size:0;visibility:hidden}.u-mailto-text-replace[data-user][data-domain]:before{content:attr(data-user) "@" attr(data-domain);display:inline;font-size:medium;visibility:visible}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tacc/core-styles",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "license": "MIT",
   "author": "TACC ACI WMA <wma-portals@gmail.com>",
   "description": "CSS source and processor for TACC Core-CMS and Core-Portal.",

package/src/lib/_imports/components/bootstrap/bootstrap--nav-tabs.hbs

@@ -0,0 +1,26 @@
+<ul class="nav nav-tabs" id="tabs" role="tablist">
+  <li class="nav-item">
+    <a class="nav-link active" id="tab-1" data-toggle="tab" href="#content-1" role="tab" aria-controls="content-1" aria-selected="true">Tab 1</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="tab-2" data-toggle="tab" href="#content-2" role="tab" aria-controls="content-2" aria-selected="false">Tab 2</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="tab-3" data-toggle="tab" href="#content-3" role="tab" aria-controls="content-3" aria-selected="false">Tab 3</a>
+  </li>
+</ul>
+<div class="tab-content" id="tabs-content">
+  <div class="tab-pane active" id="content-1" role="tabpanel" aria-labelledby="tab-1">
+    <p>Tab Content 1</p>
+    <p>
+      <label>Focuable Element</label>
+      <input type="text" />
+    </p>
+  </div>
+  <div class="tab-pane" id="content-2" role="tabpanel" aria-labelledby="tab-2">
+    <p>Tab Content 2</p>
+  </div>
+  <div class="tab-pane" id="content-3" role="tabpanel" aria-labelledby="tab-3">
+    <p>Tab Content 3</p>
+  </div>
+</div>

package/src/lib/_imports/components/bootstrap/bootstrap--nav-tabs.readme.md

@@ -0,0 +1,8 @@
+To override and extend [Bootstrap Nav Tabs](https://getbootstrap.com/docs/4.3/components/navs/#tabs).
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/components/bootstrap/config.yml

@@ -7,6 +7,8 @@ variants:
     status: ready
   - name: modal
     status: prototype
+  - name: nav-tabs
+    status: prototype
   - name: form
     label: (Portal) Form
     status: prototype

package/src/lib/_imports/components/bootstrap.nav-tabs.css

@@ -0,0 +1,35 @@
+@import url("../tools/x-tabs.skin.css");
+
+.nav-tabs,
+.tab-pane {
+  @extend .x-tabs--custom-properties;
+}
+
+.nav-tabs {
+  @extend .x-tabs;
+}
+ul.nav-tabs {
+  margin-bottom: 0; /* overwrite core-styles.base.css */
+}
+
+.tab-pane {
+  @extend .x-tabs__content;
+}
+.nav-tabs .nav-link {
+  @extend .x-tabs__tab;
+
+  /* To overwrite Bootstrap _nav.scss border */
+  border-top: none;
+  border-inline: none;
+  border-radius: 0;
+}
+.nav-tabs .nav-link:hover {
+  @extend .x-tabs__tab--hover;
+}
+
+.nav-tabs .nav-link.active {
+  @extend .x-tabs__tab--active;
+}
+.nav-tabs .nav-link:not(.active) {
+  @extend .x-tabs__tab--not-active;
+}

package/src/lib/_imports/components/pymdownx/config.yml

@@ -0,0 +1,10 @@
+label: PyMdown Extensions
+context:
+  shouldSkipPattern: false
+  📝 shouldSkipPattern: because core-styles.docs.css is not loaded
+  shouldLoadDocs: false
+  📝 shouldLoadDocs: because core-styles.docs.css loads conflicting CSS
+variants:
+  - name: default
+    label: (Overview)
+  - name: tabbed

package/src/lib/_imports/components/pymdownx/pymdownx--tabbed.hbs

@@ -0,0 +1,25 @@
+<div class="tabbed-set">
+
+  <input id="__tabbed_1_1" name="__tabbed_1" type="radio" checked="checked">
+  <label for="__tabbed_1_1">Tab 1</label>
+  <div class="tabbed-content">
+    <p>Tab Content 1</p>
+    <p>
+      <label>Focuable Element</label>
+      <input type="text" />
+    </p>
+  </div>
+
+  <input id="__tabbed_1_2" name="__tabbed_1" type="radio">
+  <label for="__tabbed_1_2">Tab 2</label>
+  <div class="tabbed-content">
+    <p>Tab Content 2</p>
+  </div>
+
+  <input id="__tabbed_1_3" name="__tabbed_1" type="radio">
+  <label for="__tabbed_1_3">Tab 3</label>
+  <div class="tabbed-content">
+    <p>Tab Content 3</p>
+  </div>
+
+</div>

package/src/lib/_imports/components/pymdownx/pymdownx--tabbed.readme.md

@@ -0,0 +1,7 @@
+To style [Python-Markdown Tabbed Extension](https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/).
+
+> **♿ Accessibility Extras**
+>
+> 1. Focus on tab container. Verify it **has** focus outline.
+> 2. While focused on tab container, press <kbd>←</kbd> and <kbd>→</kbd>. Verify tab switches.
+> 3. While on tab 1, focus on input field within. Verify tab container has **no** focus outline.

package/src/lib/_imports/components/pymdownx/pymdownx.hbs

@@ -0,0 +1,6 @@
+<dl>
+    <dt>TACC Usage</dt>
+    <dd>TACC Docs uses these components.</dd>
+    <dt>More Information</dt>
+    <dd>See "Notes" tab.<dd>
+</dl>

package/src/lib/_imports/components/pymdownx/pymdownx.readme.md

@@ -0,0 +1,8 @@
+Styles for markup with classes from [PyMdown Extensions](https://facelessuser.github.io/pymdown-extensions/).
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/components/pymdownx--tabbed.css

@@ -0,0 +1,63 @@
+@import url("../tools/x-tabs.css");
+
+.tabbed-set {
+  @extend .x-tabs;
+  @extend .x-tabs--custom-properties;
+}
+
+.tabbed-set > input {
+  @extend .x-tabs__toggle;
+}
+.tabbed-set > .tabbed-content {
+  @extend .x-tabs__content;
+}
+.tabbed-set > label {
+  @extend .x-tabs__tab;
+}
+.tabbed-set > label:hover {
+  @extend .x-tabs__tab--hover;
+}
+
+.tabbed-set > input:checked + label {
+  @extend .x-tabs__tab--active;
+}
+.tabbed-set > input:not(:checked) + label {
+  @extend .x-tabs__tab--not-active;
+}
+
+@media screen {
+  .tabbed-set > input:checked + label + .tabbed-content {
+    @extend .x-tabs__content--active;
+  }
+}
+@media print {
+  .tabbed-content {
+    @extend .x-tabs__content--force-active;
+  }
+}
+
+
+
+/* To show focus on container ONLY if a toggle has VISIBLE focus */
+/* NOTE: Simple version shows outline even if browser would not do so for inputs
+
+.tabbed-set:focus-within {
+  @extend .x-tabs--focus-within;
+}
+
+*/
+@media screen {
+  @supports selector(:has(*)) {
+    /* FAQ: The `:where(.tabbed-set > *)` prevents tabs focus UI
+            when focusing on an element within the content */
+    .tabbed-set:has(input:focus-visible:where(.tabbed-set > *)) {
+      @extend .x-tabs--focus-within;
+    }
+  }
+
+  @supports not selector(:has(*)) {
+    .tabbed-set:focus-within {
+      @extend .x-tabs--focus-within;
+    }
+  }
+}

package/src/lib/_imports/components/pymdownx.css

@@ -0,0 +1 @@
+@import url("./pymdownx--tabbed.css");

package/src/lib/_imports/core-styles.base.css

@@ -30,6 +30,7 @@
 @import url("./components/bootstrap.container.css");
 @import url("./components/bootstrap.figure.css");
 @import url("./components/bootstrap.modal.css");
+@import url("./components/bootstrap.nav-tabs.css");
 @import url("./components/c-button.css");
 @import url("./components/c-callout.css");
 @import url("./components/c-data-list.css");

package/src/lib/_imports/core-styles.docs.css

@@ -22,6 +22,7 @@
 /* (none) */
 
 /* COMPONENTS */
+@import url("./components/pymdownx--tabbed.css");
 @import url("./components/admonition.css");
 @import url("./components/align.css");
 @import url("./components/tacc-docs.css");

package/src/lib/_imports/elements/headings--cms.css

@@ -7,14 +7,11 @@
 
 
 
-
-
-/*
-Content Sectioning: Headings
-*/
-
 /* Structure */
 
+&:is( h1, h2, h3, h4, h5, h6 ) {
+    line-height: unset;
+}
 & h1 {
     margin-bottom: 40px; /* rounded from design 42px */
     text-transform: uppercase;
@@ -27,10 +24,6 @@ Content Sectioning: Headings
     margin-top: 0; /* designs suggest component padding can give top spacing */
     margin-bottom: 20px; /* rounded from design 17px */
 }
-/* WARNING: No design available; these are just developer guesswork */
-& h5 {
-    text-transform: uppercase;
-}
 
 
 
@@ -54,17 +47,13 @@ Content Sectioning: Headings
     font-size: var(--global-font-size--medium);
     font-weight: var(--bold);
 }
-& h5 {
-    font-size: var(--global-font-size--small);
-    font-weight: var(--black);
-}
+/* To  deter use of "smaller" headings by making them match body font */
+& h5,
 & h6 {
-    font-size: var(--global-font-size--small);
-    font-weight: var(--bold);
+    font-size: inherit;
+    font-weight: var(--normal);
 }
 
 
 
-
-
 }

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

@@ -19,13 +19,13 @@ Styleguide Generics.Colors
   .c-recognition--style-dark,
   :--o-section--dark;
 
-@custom-selector :--light-context-in-dark-context
+@custom-selector :--light-context-safe
   :where(:--dark-context :--light-context);
-@custom-selector :--dark-context-in-light-context
+@custom-selector :--dark-context-safe
   :where(:--dark-context:not(:--light-context *));
 
-:--dark-context-in-light-context {
-  --global-color-accent--xxx-light: #f6f3fe;
+:--dark-context-safe {
+  --global-color-accent--xxx-light: #faf4ff;
   --global-color-accent--xx-light: #f1ebfd;
   --global-color-accent--x-light: #e3d7fd;
   --global-color-accent--light: #d5bfff;
@@ -36,7 +36,7 @@ Styleguide Generics.Colors
   --global-color-accent--xxx-dark: #281066;
 }
 
-:--light-context-in-dark-context {
+:--light-context-safe {
   --global-color-accent--xxx-light: #f1ebfd;
   --global-color-accent--xx-light: #e3d7fd;
   --global-color-accent--x-light: #d5bfff;

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

@@ -39,7 +39,7 @@
 
   /* Accent */
 
-  --global-color-accent--xxx-light: #f6f3fe;
+  --global-color-accent--xxx-light: #faf4ff;
   --global-color-accent--xx-light: #f1ebfd;
   --global-color-accent--x-light: #e3d7fd;
   --global-color-accent--light: #a387ed;
@@ -54,6 +54,7 @@
   --global-color-accent--secondary: var(--global-color-secondary--normal);
   --global-color-accent--tertiary: var(--global-color-tertiary--normal);
 
+  --global-color-secondary--xx-light: #fcf6ec;
   --global-color-secondary--x-light: #e5d7c0;
   --global-color-secondary--light: #d5b57c; /* from designer */
   --global-color-secondary--normal: #877453; /* from designer */
@@ -62,6 +63,7 @@
   /* HELP: Where is this used? Not Core-Styles nor TACC CMS global snippets… */
   --global-color-secondary--xxx-dark: var(--global-color-secondary--x-dark);
 
+  --global-color-tertiary--xx-light: #eafdfb;
   --global-color-tertiary--x-light: #b8f2eb;
   --global-color-tertiary--light: #7bd1c8;
   --global-color-tertiary--normal: #61A39C; /* from designer */
@@ -84,14 +86,14 @@
   --global-color-danger--x-light: #fce4db; /* from designer */
   --global-color-danger--light: #fcaf91;
   --global-color-danger--normal: #ed4c11; /* from designer */
-  --global-color-danger--dark: #c14720;
-  --global-color-danger--x-dark: #9a4127;
-
-  --global-color-warning--x-light: #fdfdea; /* from designer */
-  --global-color-warning--light: #f5f396;
-  --global-color-warning--normal: #e9e000; /* from designer */
-  --global-color-warning--dark: #c5bf2e;
-  --global-color-warning--x-dark: #898632;
+  --global-color-danger--dark: #c23a03;
+  --global-color-danger--x-dark: #932b06;
+
+  --global-color-warning--x-light: #FDF0D3; /* from designer */
+  --global-color-warning--light: #fed880;
+  --global-color-warning--normal: #F2B327; /* from designer */
+  --global-color-warning--dark: #cd971c;
+  --global-color-warning--x-dark: #996f0a;
 
   --global-color-success--x-light: #baf8dc; /* from designer */
   --global-color-success--light: #93f6cd;

package/src/lib/_imports/tools/x-tabs/config.yml

@@ -0,0 +1,3 @@
+context:
+  shouldSkipPattern: false
+  📝 shouldSkipPattern: because core-styles.….css does not import this

package/src/lib/_imports/tools/x-tabs/demo.css

@@ -0,0 +1,5 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+.x-tabs label {
+  cursor: default; /* to suggest tabs are not functional */
+}

package/src/lib/_imports/tools/x-tabs/readme.md

@@ -0,0 +1,22 @@
+Mixins for tab components e.g. [Bootstrap Nav Tabs]({{path './bootstrap--nav-tabs' }}), [Python-Markdown Tabbed Extension]({{path './pymdownx--tabbed' }}).
+
+| Mixin | Description
+| - | -
+| `.x-tabs`                        | container of tab elements
+| `.x-tabs--custom-properties`     | custom properties for tab elements
+| `.x-tabs--focus-within`          | container on interactive element focus
+| `.x-tabs__toggle`                | interactive element that toggles visibility
+| `.x-tabs__tab`                   | a tab
+| `.x-tabs__tab--hover`            | a tab over which user hovers
+| `.x-tabs__tab--active`           | the tab of the visible content
+| `.x-tabs__tab--not-active`       | a tab of not visible content
+| `.x-tabs__content`               | content of the tabs
+| `.x-tabs__content--active`       | visible content
+| `.x-tabs__content--force-active` | to force content to be visible
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/tools/x-tabs/x-tabs.hbs

@@ -0,0 +1,14 @@
+<div class="x-tabs x-tabs--custom-properties">
+
+  <input class="x-tabs__toggle" type="radio">
+  <label class="x-tabs__tab x-tabs__tab--active">Tab (Active)</label>
+  <label class="x-tabs__tab x-tabs__tab--hover">Tab (Hover)</label>
+  <label class="x-tabs__tab x-tabs__tab--not-active">Tab (Not Active)</label>
+  <div class="x-tabs__content x-tabs__content--active">
+    <p>Content (Active)</p>
+  </div>
+  <div class="x-tabs__content">
+    <p>Content (Not Active)</p>
+  </div>
+
+</div>

package/src/lib/_imports/tools/x-tabs.css

@@ -0,0 +1,2 @@
+@import url("./x-tabs.structure.css");
+@import url("./x-tabs.skin.css");

package/src/lib/_imports/tools/x-tabs.skin.css

@@ -0,0 +1,45 @@
+.x-tabs {
+  /* FAQ: To avoid @extend error */
+}
+.x-tabs--custom-properties {
+  --buffer: 20px;
+}
+.x-tabs--focus-within {
+  outline: 5px auto; /* to mimic browser outline */
+}
+
+.x-tabs__tab {
+  padding-block: 1.25em 0.75em;
+  padding-inline: 0.875em;
+  margin-inline: var(--buffer);
+
+  border-bottom: var(--global-border-width--x-thick) solid transparent;
+
+  font-size: var(--global-font-size--medium);
+  font-weight: var(--medium);
+}
+.x-tabs__tab:is(a) {
+  text-decoration: none;
+}
+.x-tabs__tab--hover {
+  border-color: var(--global-color-primary--dark);
+}
+.x-tabs__tab--not-active {
+  color: var(--global-color-primary--dark);
+}
+.x-tabs__tab--active {
+  color: var(--global-color-accent--normal);
+  border-color: var(--global-color-accent--normal);
+}
+
+.x-tabs__content {
+  padding-inline: var(--buffer);
+
+  border-top: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+}
+.x-tabs__content > *:first-child {
+  margin-top: var(--buffer);
+}
+.x-tabs__content > *:last-child {
+  margin-bottom: var(--buffer);
+}

package/src/lib/_imports/tools/x-tabs.structure.css

@@ -0,0 +1,29 @@
+.x-tabs {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.x-tabs__toggle {
+  /* FAQ: If `display: none` were used, keyboard accessibility would break */
+  position: absolute;
+  top: -100vh;
+  opacity: 0;
+}
+
+.x-tabs__tab {
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.x-tabs__content {
+  width: 100%;
+  display: none;
+}
+.x-tabs__content--active {
+  order: 99;
+  display: block;
+}
+.x-tabs__content--force-active {
+  display: contents;
+}