@tacc/core-styles 2.50.1 → 2.51.0

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

@@ -0,0 +1 @@
+<span class="x-pill x-pill--is-{{ type }}{{#should-truncate}} x-pill--should-truncate{{/should-truncate}}">{{ name }}</span>

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

@@ -0,0 +1,61 @@
+/* Base */
+
+@define-mixin pill {
+  font-weight: var(--medium);
+  font-size: var(--global-font-size--x-small);
+
+  display: inline-block; /* FAQ: Supports `min/max-width` */
+  box-sizing: border-box; /* override browser */
+  padding-inline: 0.75em;
+  min-width: 6.5em;
+
+  text-align: center;
+  text-transform: none; /* avoid inheritance form context e.g. <h1> */
+  border-radius: 0.5em;
+  color: var(--global-color-primary--xx-dark);
+}
+
+
+
+/* Modifiers */
+
+/* Modifiers - Structure */
+
+/* CAVEAT: This alone may not trigger truncation */
+/* SEE: https://tacc-main.atlassian.net/wiki/x/6hpv */
+@define-mixin pill--should-truncate {
+  max-width: 100%;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* white-space: nowrap; */ /* FAQ: Let client decide */
+
+  /* Keep alignment that is changed by `overflow: hidden;` */
+  /* SEE: https://stackoverflow.com/q/25818199 */
+  vertical-align: bottom;
+}
+
+
+
+/* Modifiers */
+
+/* Modifiers - Skin */
+
+@define-mixin pill--is-danger {
+  background-color: var(--global-color-danger--light);
+}
+@define-mixin pill--is-success {
+  background-color: var(--global-color-success--normal);
+}
+@define-mixin pill--is-warning {
+  background-color: var(--global-color-warning--normal);
+}
+@define-mixin pill--is-normal {
+  background-color: var(--global-color-extra--light);
+}
+@define-mixin pill--is-fixed {
+  background-color: var(--global-color-primary--light);
+}
+@define-mixin pill--is-updated {
+  background-color: #FFF500;
+}

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

@@ -0,0 +1,37 @@
+@import url("./x-pill.css");
+
+/* FAQ: Wrapped to deter clients from using `.x-pill` */
+/* HACK: Not in `x-pill/demo.css` because it is not processed */
+#demo {
+  .x-pill {
+    @mixin pill;
+
+    &:not([class*="x-pill--"]) {
+      background-color: var(--global-color-primary--x-light);
+    }
+  }
+  .x-pill--should-truncate {
+    @mixin pill--should-truncate;
+
+    white-space: nowrap;
+    max-width: 10em;
+  }
+  .x-pill--is-danger {
+    @mixin pill--is-danger;
+  }
+  .x-pill--is-success {
+    @mixin pill--is-success;
+  }
+  .x-pill--is-warning {
+    @mixin pill--is-warning;
+  }
+  .x-pill--is-normal {
+    @mixin pill--is-normal;
+  }
+  .x-pill--is-fixed {
+    @mixin pill--is-fixed;
+  }
+  .x-pill--is-updated {
+    @mixin pill--is-updated;
+  }
+}

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

@@ -0,0 +1,4 @@
+status: ready
+context:
+  supportStyles:
+    - ../../assets/tools/x-tag.demo.css

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

@@ -0,0 +1 @@
+To organize similar elements e.g. category, tag, type, group.

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

@@ -0,0 +1 @@
+{{> @inline-element-samples class="x-tag" name="tag" }}

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

@@ -0,0 +1,10 @@
+@define-mixin tag {
+  /* Client must set display (inline-)block|flex|grid|etc. */
+  /* FAQ: We should not assume the display of an element client controls */
+  /* display: inline-block; */
+
+  padding: 0.25rem 0.5rem 0rem;
+  width: min-content;
+
+  white-space: nowrap;
+}

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

@@ -0,0 +1,12 @@
+@import url("./x-tag.css");
+
+/* FAQ: Wrapped to deter clients from using `.x-tag` */
+/* HACK: Not in `x-tag/demo.css` because it is not processed */
+#demo {
+  .x-tag {
+    @mixin tag;
+
+    color: var(--global-color-primary--xx-light);
+    background-color: var(--global-color-primary--xxx-dark);
+  }
+}