@tacc/core-styles 2.57.0-rc1 → 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/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/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/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 */