@tacc/core-styles 2.56.1 → 2.57.0

package/src/lib/_imports/bootstrap4/components/alert.css

@@ -0,0 +1,76 @@
+@import url("../../tools/x-message.css");
+
+.alert {
+  border-radius: unset; /* to undo bootstrap */
+
+  @mixin message;
+  @mixin message--scope-section;
+}
+
+.alert-primary,
+.alert-secondary,
+.alert-success,
+.alert-danger,
+.alert-warning,
+.alert-info,
+.alert-light,
+.alert-dark {
+  color: unset; /* to undo bootstrap */
+}
+
+.alert-primary {
+  @mixin message--scope-global;
+}
+.alert-secondary {
+  @mixin message--type-extra---message--scope-section;
+}
+.alert-success {
+  @mixin message--type-success---message--scope-section;
+}
+.alert-danger {
+  @mixin message--type-error---message--scope-section;
+}
+.alert-warning {
+  @mixin message--type-warning---message--scope-section;
+}
+.alert-info {
+  @mixin message--type-info---message--scope-section;
+}
+.alert-light {
+  @mixin message--type-info---message--scope-section;
+}
+.alert-dark {
+  @mixin message--type-info---message--scope-section;
+}
+
+.alert hr {
+  --global-space--hr-buffer-below: 1em;
+  --global-space--hr-buffer-above: 1em;
+
+  border-top-color: unset;
+}
+
+.alert-link {
+  font-weight: unset;
+  color: unset;
+}
+
+.alert-heading {
+  font-weight: bold;
+}
+
+.alert-dismissible {
+  padding-right: calc(12px + 1ch);
+
+  & .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    padding: 8px 12px;
+    width: 1ch;
+    box-sizing: content-box;
+
+    color: inherit;
+  }
+}

package/src/lib/_imports/bootstrap4/content/config.yml

@@ -0,0 +1,2 @@
+context:
+  subdir: bootstrap4/content

package/src/lib/_imports/bootstrap4/content/typography-headings/config.yml

@@ -0,0 +1,25 @@
+label: "(Typography) Headings"
+status: ready
+context:
+  shouldLoadBootstrap: true
+variants:
+  - name: default
+    hidden: true
+  - name: cms
+    status: wip
+    label: (CMS) Headings
+    context:
+      shouldLoadCMS: true
+      supportStyles:
+        - ../../assets/settings/font--cms.css
+        - ../../assets/settings/color--cms.css
+        - ../../assets/bootstrap4/content/typography-headings/typography-headings--cms.css
+  - name: docs
+    status: wip
+    label: (Docs) Headings
+    context:
+      shouldLoadDocs: true
+      supportStyles:
+        - ../../assets/settings/font--docs.css
+        - ../../assets/settings/color--docs.css
+        - ../../assets/bootstrap4/content/typography-headings/typography-headings--docs.css

package/src/lib/_imports/bootstrap4/content/typography-headings/readme.md

@@ -0,0 +1,3 @@
+To skin [Bootstrap v4+ heading classes](https://getbootstrap.com/docs/4.6/content/typography/#headings) (`.h1`–`.h6`). Other typography from that page is unchanged unless we add styles later.
+
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/bootstrap4/content/typography-headings/typography-headings--cms.css

@@ -0,0 +1,13 @@
+@import url("../../../tools/selectors.css");
+@import url("../../../tools/x-headings.css");
+@import url("../../../tools/x-headings--cms.css");
+
+:is( .h1, .h2, .h3, .h4, .h5, .h6 ) {
+    @mixin heading;
+}
+.h1 { @mixin heading-1; }
+.h2 { @mixin heading-2; }
+.h3 { @mixin heading-3; }
+.h4 { @mixin heading-4; }
+.h5 { @mixin heading-5; }
+.h6 { @mixin heading-6; }

package/src/lib/_imports/bootstrap4/content/typography-headings/typography-headings--docs.css

@@ -0,0 +1,13 @@
+@import url("../../../tools/selectors.css");
+@import url("../../../tools/x-headings.css");
+@import url("../../../tools/x-headings--docs.css");
+
+:is( .h1, .h2, .h3, .h4, .h5, .h6 ) {
+    @mixin heading;
+}
+.h1 { @mixin heading-1; }
+.h2 { @mixin heading-2; }
+.h3 { @mixin heading-3; }
+.h4 { @mixin heading-4; }
+.h5 { @mixin heading-5; }
+.h6 { @mixin heading-6; }

package/src/lib/_imports/bootstrap4/content/typography-headings/typography-headings.hbs

@@ -0,0 +1,12 @@
+<p class="h1">Heading 1</p>
+<p>{{> @text-of-one-paragraph-medium }}</p>
+<p class="h2">Heading 2</p>
+<p>{{> @text-of-one-paragraph-medium }}</p>
+<p class="h3">Heading 3</p>
+<p>{{> @text-of-one-paragraph-medium }}</p>
+<p class="h4">Heading 4</p>
+<p>{{> @text-of-one-paragraph-medium }}</p>
+<p class="h5">Heading 5</p>
+<p>{{> @text-of-one-paragraph-medium }}</p>
+<p class="h6">Heading 6</p>
+<p>{{> @text-of-one-paragraph-medium }}</p>

package/src/lib/_imports/components/c-message--expanded.css

@@ -1,7 +1,14 @@
 @import url("./c-message.selectors.css");
 
 :--c-message--scope-section,
-:--c-message--scope-global {
+:--c-message--scope-global,
+.alert {
   padding-block: 20px;
   padding-inline: 30px;
 }
+
+/* To match dismissible inset to expanded alert inline padding */
+/* SEE: ../bootstrap4/components/alert.css */
+.alert-dismissible {
+  padding-right: calc(30px + 1ch);
+}

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

@@ -1,6 +1,7 @@
 /*! core-styles.bootstrap4.css */
 /* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
 
+@import url("./bootstrap4/components/alert.css");
 @import url("./bootstrap4/components/btn.css");
 @import url("./bootstrap4/components/card.css");
 @import url("./bootstrap4/components/media.css");

package/src/lib/_imports/elements/headings/config.yml

@@ -3,18 +3,26 @@ variants:
     hidden: true
   - name: cms
     status: ready
-    label: (CMS) Headings
+    label: CMS
+    context:
+      shouldLoadCMS: true
+      shouldLoadBootstrap: true
+  - name: cms-vs-bootstrap
+    status: wip
+    label: CMS vs. Bootstrap
+    view: 'headings--bootstrap.hbs'
     context:
       shouldLoadCMS: true
       shouldLoadBootstrap: true
   - name: docs
     status: wip
-    label: (Docs) Headings
+    label: Docs
     context:
       shouldLoadDocs: true
-  - name: portal
-    status: prototype
-    label: (Portal) Headings
+  - name: docs-vs-bootstrap
+    status: wip
+    label: Docs vs. Bootstrap
+    view: 'headings--bootstrap.hbs'
     context:
-      shouldLoadPortal: true
+      shouldLoadDocs: true
       shouldLoadBootstrap: true

package/src/lib/_imports/elements/headings/headings--bootstrap.hbs

@@ -0,0 +1,50 @@
+<p class="small text-muted mb-4">Each row: semantic tag (left) vs <code>.hN</code> on <code>&lt;p&gt;</code> (right).</p>
+
+<article class="row">
+    <div class="col-md-6">
+        <h1>Heading 1</h1>
+    </div>
+    <div class="col-md-6">
+        <p class="h1">Heading 1</p>
+    </div>
+</article>
+<article class="row">
+    <div class="col-md-6">
+        <h2>Heading 2</h2>
+    </div>
+    <div class="col-md-6">
+        <p class="h2">Heading 2</p>
+    </div>
+</article>
+<article class="row">
+    <div class="col-md-6">
+        <h3>Heading 3</h3>
+    </div>
+    <div class="col-md-6">
+        <p class="h3">Heading 3</p>
+    </div>
+</article>
+<article class="row">
+    <div class="col-md-6">
+        <h4>Heading 4</h4>
+    </div>
+    <div class="col-md-6">
+        <p class="h4">Heading 4</p>
+    </div>
+</article>
+<article class="row">
+    <div class="col-md-6">
+        <h5>Heading 5</h5>
+    </div>
+    <div class="col-md-6">
+        <p class="h5">Heading 5</p>
+    </div>
+</article>
+<article class="row mb-3 align-items-start">
+    <div class="col-md-6">
+        <h6>Heading 6</h6>
+    </div>
+    <div class="col-md-6">
+        <p class="h6">Heading 6</p>
+    </div>
+</article>

package/src/lib/_imports/elements/headings/headings.hbs

@@ -1,12 +1,32 @@
-<h1>Heading 1</h1>
-<p>{{> @text-of-one-paragraph-medium }}</p>
-<h2>Heading 2</h2>
-<p>{{> @text-of-one-paragraph-medium }}</p>
-<h3>Heading 3</h3>
-<p>{{> @text-of-one-paragraph-medium }}</p>
-<h4>Heading 4</h4>
-<p>{{> @text-of-one-paragraph-medium }}</p>
-<h5>Heading 5</h5>
-<p>{{> @text-of-one-paragraph-medium }}</p>
-<h6>Heading 6</h6>
-<p>{{> @text-of-one-paragraph-medium }}</p>
+<nav class="c-nav">
+  <ul>
+    <li><a href="#headings--light-section"><strong>light</strong> section</a></li>
+    <li><a href="#headings--muted-section"><strong>muted</strong> section</a></li>
+    <li><a href="#headings--dark-section"><strong>dark</strong> section</a></li>
+    <li><a href="#headings--unstyled-section"><strong>unstyled</strong> section</a></li>
+  </ul>
+</nav>
+
+<section>
+
+  <dl id="headings--light-section" class="o-section o-section--style-light">
+    <dt><strong>light</strong> <a href="{{path '../detail/o-section' }}" target="_parent">section</a></dt>
+    <dd>{{> @headings-and-paragraphs }}</dd>
+  </dl>
+
+  <dl id="headings--muted-section" class="o-section o-section--style-muted">
+    <dt><strong>muted</strong> <a href="{{path '../detail/o-section' }}" target="_parent">section</a></dt>
+    <dd>{{> @headings-and-paragraphs }}</dd>
+  </dl>
+
+  <dl id="headings--dark-section" class="o-section o-section--style-dark">
+    <dt><strong>dark</strong> <a href="{{path '../detail/o-section' }}" target="_parent">section</a></dt>
+    <dd>{{> @headings-and-paragraphs }}</dd>
+  </dl>
+
+  <dl id="headings--unstyled-section" class="o-section o-section--style-unstyled">
+    <dt><strong>unstyled</strong> <a href="{{path '../detail/o-section' }}" target="_parent">section</a></dt>
+    <dd>{{> @headings-and-paragraphs }}</dd>
+  </dl>
+
+</section>

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

@@ -1,4 +1,6 @@
 @import url("../tools/selectors.css");
+@import url("../tools/x-headings.css");
+@import url("../tools/x-headings--cms.css");
 
 /* To scope these styles to main content (i.e. not header, not navbar) */
 /* To prevent these styles on portal content (i.e. within a React app) */
@@ -7,53 +9,27 @@
 
 
 
-/* Structure */
-
 &:is( h1, h2, h3, h4, h5, h6 ) {
-    line-height: unset;
-}
-& h1 {
-    margin-bottom: 40px; /* rounded from design 42px */
-    text-transform: uppercase;
-}
-& h2 {
-    margin-top: 0px; /* depends on interpretation of design */
-    margin-bottom: 30px; /* rounded from design 31px */
+    @mixin heading;
 }
-& h3 {
-    margin-top: 0; /* designs suggest component padding can give top spacing */
-    margin-bottom: 20px; /* rounded from design 17px */
-}
-
+& h1 { @mixin heading-1; }
+& h2 { @mixin heading-2; }
+& h3 { @mixin heading-3; }
+& h4 { @mixin heading-4; }
+& h5 { @mixin heading-5; }
+& h6 { @mixin heading-6; }
 
 
-/* Skin */
 
-& h1 {
-    font-size: var(--global-font-size--xx-large);
-    font-weight: var(--black);
-}
-& h2 {
-    color: var(--global-color-accent--secondary);
-    font-size: var(--global-font-size--x-large);
-    font-weight: var(--black);
 }
-& h3 {
-    font-size: var(--global-font-size--large);
-    font-weight: var(--black);
-}
-/* WARNING: No design available; these are just developer guesswork */
-& h4 {
-    font-size: var(--global-font-size--medium);
-    font-weight: var(--bold);
-}
-/* To  deter use of "smaller" headings by making them match body font */
-& h5,
-& h6 {
-    font-size: inherit;
-    font-weight: var(--normal);
-}
-
-
 
+/* Must load after regular elements so classes take precedence */
+:is( .h1, .h2, .h3, .h4, .h5, .h6 ) {
+    @mixin heading;
 }
+.h1 { @mixin heading-1; }
+.h2 { @mixin heading-2; }
+.h3 { @mixin heading-3; }
+.h4 { @mixin heading-4; }
+.h5 { @mixin heading-5; }
+.h6 { @mixin heading-6; }

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

@@ -1,4 +1,6 @@
 @import url("../tools/selectors.css");
+@import url("../tools/x-headings.css");
+@import url("../tools/x-headings--docs.css");
 
 /* To scope these styles to main content (i.e. not header, not navbar) */
 /* To prevent these styles on portal content (i.e. within a React app) */
@@ -7,43 +9,27 @@
 
 
 
-/* Structure */
-
 &:is( h1, h2, h3, h4, h5, h6 ) {
-    line-height: unset; /* mimics headings--cms.css */
-}
-& h1 {
-    text-transform: uppercase; /* mimics headings--cms.css */
+    @mixin heading;
 }
+& h1 { @mixin heading-1; }
+& h2 { @mixin heading-2; }
+& h3 { @mixin heading-3; }
+& h4 { @mixin heading-4; }
+& h5 { @mixin heading-5; }
+& h6 { @mixin heading-6; }
 
 
 
-/* Skin */
-
-& h1 {
-    font-size: var(--global-font-size--xxx-large);
-    font-weight: var(--black);
-}
-& h2 {
-    font-size: var(--global-font-size--xx-large);
-    font-weight: var(--bold);
-}
-& h3 {
-    font-size: var(--global-font-size--x-large);
-    font-weight: var(--bold);
 }
-/* WARNING: No design available; these are just developer guesswork */
-& h4 {
-    font-size: var(--global-font-size--large);
-    font-weight: var(--bold);
-}
-/* To  deter use of "smaller" headings by making them match body font */
-& h5,
-& h6 {
-    font-size: inherit;
-    font-weight: var(--normal);
-}
-
-
 
+/* Must load after regular elements so classes take precedence */
+:is( .h1, .h2, .h3, .h4, .h5, .h6 ) {
+    @mixin heading;
 }
+.h1 { @mixin heading-1; }
+.h2 { @mixin heading-2; }
+.h3 { @mixin heading-3; }
+.h4 { @mixin heading-4; }
+.h5 { @mixin heading-5; }
+.h6 { @mixin heading-6; }

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

@@ -73,7 +73,7 @@ p + :is(ul, ol, dl) {
 }
 /* Add space between `dt` and `dd` */
 & dt {
-  margin-bottom: .5rem; /* overwrite Bootstrap */
+  margin-block: 1.0rem 0.5em; /* overwrite Bootstrap */
   font-weight: initial; /* overwrite Bootstrap */
 }
 

package/src/lib/_imports/elements/html-elements.docs.css

@@ -1,6 +1,17 @@
 @import url("../tools/x-figure.css");
 @import url("../tools/x-blockquote.css");
 
+
+/* Lists */
+
+/* So definition terms stand out more */
+& dt {
+  font-weight: var(--medium);
+}
+
+
+/* Figures */
+
 /* To style elements that have captions */
 figure { @mixin figure; }
 figcaption { @mixin figure-caption; }

package/src/lib/_imports/elements/links.css

@@ -3,15 +3,20 @@
 @import url("../tools/selectors.css");
 @import url('../tools/x-link.css');
 
-a:where(:not(:--c-button, :--c-card)) {
+@custom-selector :--exempt-link
+  :--c-button,
+  :--c-card,
+  .alert-link;
+
+a:where(:not(:--exempt-link)) {
   @mixin link;
 }
 a:where(:not([href])) {
   @mixin link--disabled;
 }
-a:where(:not(:--c-button, :--c-card)):hover {
+a:where(:not(:--exempt-link)):hover {
   @mixin link--hover;
 }
-a:where(:not(:--c-button, :--c-card)):active {
+a:where(:not(:--exempt-link)):active {
   @mixin link--active;
 }

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

@@ -80,7 +80,8 @@
   --color--bkgd: var(--global-color-accent--xxx-light);
   --color--line: var(--global-color-accent--light);
 
-  & h2 {
+  & h2,
+  & .h2 {
     color: currentColor;
   }
 }
@@ -94,7 +95,8 @@
   --color--bkgd: var(--global-color-primary--xx-dark);
   --color--line: var(--global-color-primary--normal);
 
-  & h2 {
+  & h2,
+  & .h2 {
     color: var(--global-color-secondary--light);
   }
 }

package/src/lib/_imports/tools/x-headings--cms.css

@@ -0,0 +1,40 @@
+@define-mixin heading-1 {
+    font-size: var(--global-font-size--xx-large);
+    font-weight: var(--black);
+
+    margin-bottom: 40px; /* rounded from design 42px */
+    text-transform: uppercase;
+}
+
+@define-mixin heading-2 {
+    color: var(--global-color-accent--secondary);
+    font-size: var(--global-font-size--x-large);
+    font-weight: var(--black);
+
+    margin-top: 0px; /* depends on interpretation of design */
+    margin-bottom: 30px; /* rounded from design 31px */
+}
+
+@define-mixin heading-3 {
+    font-size: var(--global-font-size--large);
+    font-weight: var(--black);
+
+    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 */
+@define-mixin heading-4 {
+    font-size: var(--global-font-size--medium);
+    font-weight: var(--bold);
+}
+
+/* To deter use of "smaller" headings by making them match body font */
+@define-mixin heading-5 {
+    font-size: inherit;
+    font-weight: var(--normal);
+}
+@define-mixin heading-6 {
+    font-size: inherit;
+    font-weight: var(--normal);
+}

package/src/lib/_imports/tools/x-headings--docs.css

@@ -0,0 +1,32 @@
+@define-mixin heading-1 {
+    font-size: var(--global-font-size--xxx-large);
+    font-weight: var(--black);
+
+    text-transform: uppercase; /* mimics headings--cms.css */
+}
+
+@define-mixin heading-2 {
+    font-size: var(--global-font-size--xx-large);
+    font-weight: var(--bold);
+}
+
+@define-mixin heading-3 {
+    font-size: var(--global-font-size--x-large);
+    font-weight: var(--bold);
+}
+
+/* WARNING: No design available; these are just developer guesswork */
+@define-mixin heading-4 {
+    font-size: var(--global-font-size--large);
+    font-weight: var(--bold);
+}
+
+/* To deter use of "smaller" headings by making them match body font */
+@define-mixin heading-5 {
+    font-size: inherit;
+    font-weight: var(--normal);
+}
+@define-mixin heading-6 {
+    font-size: inherit;
+    font-weight: var(--normal);
+}

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

@@ -0,0 +1,3 @@
+@define-mixin heading {
+    line-height: unset;
+}

package/src/lib/_imports/trumps/s-header.css

@@ -186,6 +186,51 @@ Styleguide Trumps.Scopes.Header
   padding-right: 0;
 }
 
+/* AI Chatbot Button */
+
+.ai-button {
+  overflow: visible;
+  text-transform: none;
+  line-height: inherit;
+  vertical-align: baseline;
+  -webkit-appearance: button;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  box-sizing: border-box;
+  outline: none;
+  position: relative;
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  font-weight: 400;
+  white-space: nowrap;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  user-select: none;
+  touch-action: manipulation;
+  font-size: 14px;
+  height: 32px;
+  padding: 0px 15px;
+  border-radius: 0;
+  background: linear-gradient(135deg, #47a59d, #337ab7);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  color: #fff;
+  margin-inline: 10px;
+}
+
+.s-header .nav-item .ai-button-link {
+  display: flex;
+  align-items: center;
+}
+.nav-item .nav-link.ai-button-link:is(:hover,:focus)  {
+  border-color: var(--header-bkgd-color);
+}
+
+.nav-item:has(.ai-button-link) ~ .nav-item {
+  border-left: 1px solid var(--header-minor-border-color);
+}
 
 /* Search */