npm - @tacc/core-styles - Versions diffs - 0.11.0 → 2.0.0 - Mend

@tacc/core-styles 0.11.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (427) hide show

package/src/lib/_imports/elements/html-elements/demo.css ADDED Viewed

@@ -0,0 +1,5 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+figure.with-dynamic-width-image img {
+  width: 100%;
+}

package/src/lib/_imports/elements/html-elements/html-elements.hbs ADDED Viewed

@@ -0,0 +1,83 @@
+<dl>
+  <dt>Forms</dt>
+  <dd>
+    <form>
+      <label>&lt;input&gt;</label>
+      <input />
+      <label>&lt;select&gt;</label>
+      <select>
+        <option value="" selected="">
+          Please select a dinosaur
+        </option>
+        <optgroup label="Theropods">
+            <option>Tyrannosaurus</option>
+            <option>Velociraptor</option>
+            <option>Deinonychus</option>
+        </optgroup>
+        <optgroup label="Sauropods">
+            <option>Diplodocus</option>
+            <option>Saltasaurus</option>
+            <option>Apatosaurus</option>
+        </optgroup>
+      </select>
+      <label>&lt;textarea&gt;</label>
+      <textarea></textarea>
+      <button type="submit">Submit</button>
+      <button type="reset">Reset</button>
+      <button type="clear">Clear</button>
+      <button type="button">Button</button>
+    </form>
+  </dd>
+  <dt>Text Content</dt>
+  <dd>
+    <dl>
+      <dt>Paragraphs &amp; Inline Text Semantics</dt>
+      <dd>
+        <p>{{> @text-of-one-paragraph-medium }}</p>
+        <p>{{> @text-of-one-paragraph-with-tags }}</p>
+      </dd>
+      <dt>Lists</dt>
+      <dd>
+        <dl>
+          <dt>Unordered</dt>
+          <dd>
+            <ul>
+              <li>LX 1234</li>
+              <li>LOVE 45</li>
+              <li>OLD 555</li>
+            </ul>
+          </dd>
+          <dt>Ordered</dt>
+          <dd>
+            <ul>
+              <li>One Fish</li>
+              <li>Two Fish</li>
+              <li>Red Fish</li>
+              <li>Blue Fish</li>
+            </ul>
+          </dd>
+          <dt>Definition List</dt>
+          <dd>
+            <dl class="no-demo-styles">
+              <dt>CSS</dt><dd>Cascading Stylesheet</dd>
+              <dt>HTML</dt><dd>Hypertext Markup Language</dd>
+              <dt>JSON</dt><dd>JavaScript Object Notation</dd>
+            </dl>
+          </dd>
+        </dl>
+      </dd>
+      <dt>Figure <small>(Narrow Image)</small></dt>
+      <dd>{{> @figure }}</dd>
+      <dt>Figure <small>(Dynamic-Width Image)</small></dt>
+      <dd>{{> @figure class="with-dynamic-width-image" use-image-wide=true }}</dd>
+      <dt>Blockquote</dt>
+      <dd>{{> @blockquote }}</dd>
+    </dl>
+  </dd>
+</dl>

package/src/lib/_imports/elements/html-elements/readme.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Styling for raw HTML elements that are commonly used.

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

@@ -1,45 +1,7 @@
-/*
-Main Root & Sectioning Root
-Elements that represent the root of a document or document content.
-```
-<html> <body>
-```
-Reference:
-- [MDN: HTML element reference: Main root](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Main_root)
-- [MDN: HTML element reference: Sectioning root](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Sectioning_root)
+@import url("../tools/selectors.css");
-Styleguide Elements.MainSectioningRoots
-*/
-@import url('../settings/color.css');
-@import url('../settings/font.css');
-@import url('../settings/space.css');
-html {
-  /* Set base font but support user-defined browser font size */
-  /* SEE: https://snook.ca/archives/html_and_css/font-size-with-rem */
-  font-size: 62.5%; /* 16px */
-}
-/* The webpage must be at least as tall as the viewport */
-html,
-body {
-  height: 100%;
-}
-body {
-  /* To avoid negative whitespace at right on horz scroll on tiny screen */
-  min-width: 290px; /* developer-decided value */
-  /* To overwrite Bootstrap */
-  color: var(--global-color-primary--x-dark);
-  font-family: var(--global-font-family--sans--cms);
-  font-size: var(--global-font-size--medium);
-  line-height: 1.4;
-}
+/* To scope these styles to main content (i.e. not header, not navbar) */
+:where(:--main-content) {
@@ -61,61 +23,13 @@ Reference:
 Styleguide Elements.ContentSectioning
 */
-body > main {
+&:is(body > *) {
   margin-bottom: var(--global-space--section-gap);
 }
-/* To make a "sticky footer" */
-/* https://css-tricks.com/a-clever-sticky-footer-technique/ */
-body > main + footer {
-  position: sticky;
-  top: 100vh;
-}
 /* Headings */
-h1, h2, h3, h4, h5, h6 {
-  color: var(--global-color-primary--xx-dark);
-}
-h1, h2, h4, h5, h6 {
-  font-weight: var(--bold);
-}
-h1 {
-  margin-top: 27px;
-  margin-bottom: 27px;
-}
-h2 {
-  margin-top: 30px;
-  margin-bottom: var(--global-space--normal);
-}
-h1 + h2,
-h1 + hr {
-  margin-top: -12px;
-}
-h1 {
-  font-size: var(--global-font-size--xxx-large);
-}
-h2 {
-  font-size: var(--global-font-size--x-large);
-}
-h3, h4, h5, h6 {
-  margin-top: var(--global-space--normal);
-  margin-bottom: var(--global-space--normal);
-}
-h3 {
-  font-size: var(--global-font-size--x-large);
-}
-h4 {
-  font-size: var(--global-font-size--large);
-}
-h5 {
-  text-transform: uppercase;
-}
-h5, h6 {
-  font-size: var(--global-font-size--medium);
-}
+/* SEE: ./headings--cms.css */
@@ -137,32 +51,57 @@ Reference:
 Styleguide Elements.TextContent
 */
-p {
+& p {
   margin-bottom: 2rem; /* overwrite Bootstrap */
 }
 /* Lists */
-ol, ul,
-dl dl /* Treat nested definition lists like other nested lists */ {
+& :is(
+  ol, ul,
+  dl dl /* Treat nested definition lists like other nested lists */
+) {
   padding-left: var(--global-space--list-indent);
 }
-ol ol, ol ul, ul ol, ul ul {
+& :is(
+  ol ol,
+  ol ul,
+  ul ol,
+  ul ul
+) {
   margin: revert; /* Undo Bootstrap `_reboot.css` */
 }
 /* Add space between `dt` and `dd` */
-dt {
+& dt {
   margin-bottom: .5rem; /* overwrite Bootstrap */
   font-weight: initial; /* overwrite Bootstrap */
 }
-li:not(td li) {
+& li:not(td li) {
   line-height: 1.6;
 }
+/* Figures */
+/* https://stackoverflow.com/a/49287729/11817077 */
+/* To make figure size and caption wrap dependent on content:
+  - figure unaffected by content with intrinsic width
+  - shrink figure to content with dynamic width
+  - shrink figure to content with static width
+  - prevent content from overflowing parent
+  - wrap caption text at content edge
+*/
+& figure {
+  display: table;
+}
+& figure figcaption {
+  display: table-caption;
+  caption-side: bottom;
+}
 /* Misc. */
-hr {
+& hr {
   margin-top: var(--global-space--hr-buffer-above); /* overwrite Bootstrap */
   border-top: 1px solid var(--global-color-primary--light);
   margin-bottom: var(--global-space--hr-buffer-below); /* overwrite Bootstrap */
@@ -188,57 +127,17 @@ Reference:
 Styleguide Elements.InlineTextSemantics
 */
-/* Monospace */
-var,
-/* Overwrite Bootstrap (which does not use its `--font-family-monospace`) */
-code, kbd, pre, samp {
-  font-family: var(--global-font-family--mono);
+/* To allow user to distinguish bold and black */
+& strong {
+  font-weight: var(--bold);
 }
-code kbd {
-  display: inline-block; /* ensure element does not bleed outside parent */
-  padding: .1rem .2rem; /* overwrites Bootstrap */
-  margin-left: .2rem;
-  margin-right: .2rem;
-  font-size: inherit;
+& b {
+  font-weight: var(--black);
 }
-/* Code (<code>, <samp>, <pre>) */
-/* Code: any content or context) */ code,
-/* Code: content has only output */ pre > samp {
-  /* Undo Bootstrap */
-  color: unset;
-}
-/* Code: context is inline */ :not(pre) > code {
-  display: inline-block;
-  padding: var(--global-space--xx-small) var(--global-space--x-small);
-}
-/* Code: context is block, content has input */ pre > code,
-/* Code: context is block, content has only ouput */ pre > samp {
-  display: inline-block; /* FAQ: If `block`, then background color is cropped */
-  padding: var(--global-space--x-small) var(--global-space--small);
-}
-/* Code: context is block, container probably has inline-style width set */
-/* FAQ: Stretch code to meet container width */
-pre[style] > code,
-pre[style] > samp {
-  min-width: 100%;
-}
+/* Monospace */
-/* Code: context is inline, content has only output */
-/* FAQ: Examples: command output within CLI illustration */
-pre samp {
-  opacity: 0.75;
-  text-decoration: none;
-}
-/* Code: context is inline, content has context-agnostic output */
-/* FAQ: Examples: command prompt within CLI illustration */
-pre code u {
-  opacity: 0.50;
-  text-decoration: none;
-}
+/* SEE: ./monospace.css */
@@ -332,24 +231,4 @@ Styleguide Elements.DemarcatingEdits
-/*
-Interactive Elements
-Elements that help to create interactive user interface objects.
-```
-<details> <summary> <dialog> <menu>
-```
-Reference:
-- [HTML element reference: Interactive elements | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Interactive_elements)
-Styleguide Elements.Interactive
-*/
-/* Clone Bootstrap's <p> and <ul> margins */
-details {
-  margin-top: 0;
-  margin-bottom: 1rem;
 }

package/src/lib/_imports/elements/html-elements.css ADDED Viewed

@@ -0,0 +1,97 @@
+@import url("../tools/selectors.css");
+/* To scope these styles to main content (i.e. not header, not navbar) */
+:where(:--main-content) {
+/*
+Form Content
+Elements that create forms which allow users to enter and submit data.
+```
+<form> <fieldset> <legend> <label> <input> <select> <optgroup> <option> <textarea> <button> <output> <progress> <meter> <datalist>
+```
+Reference:
+- [HTML element reference: Forms | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms)
+Styleguide Elements.Forms
+*/
+/* To mimic Bootstrap */
+& :is(button, input, optgroup, select, textarea) {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+/*
+Text Content
+Elements that organize blocks or sections of content placed (includes lists).
+```
+<blockquote> <dd> <div> <dl> <dt> <figcaption> <figure> <hr> <li> <ol> <p> <pre> <ul>
+```
+Reference:
+- [HTML element reference: Text content | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content)
+Styleguide Elements.TextContent
+*/
+& blockquote {
+  margin-inline: unset; /* undo browser */
+}
+& blockquote > p:last-child {
+  margin-bottom: 0;
+}
+& figure {
+  margin-inline: unset; /* undo browser */
+}
+/* To mimic Bootstrap */
+& :is(dl, ol, ul) {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+/*
+Interactive Elements
+Elements that help to create interactive user interface objects.
+```
+<details> <summary> <dialog> <menu>
+```
+Reference:
+- [HTML element reference: Interactive elements | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Interactive_elements)
+Styleguide Elements.Interactive
+*/
+/* To mimic Bootstrap's <p> and <ul> margins */
+& details {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+& details > summary {
+  cursor: pointer;
+}
+}

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

@@ -0,0 +1,6 @@
+@import url("../tools/selectors.css");
+/* To scope these styles to main content (i.e. not header, not navbar) */
+:--main-content {
+  font-size: var(--global-font-size--large);
+}

package/src/lib/_imports/elements/links/links.hbs CHANGED Viewed

@@ -1,10 +1,16 @@
-<dl>
+<dl class="demo-narrow-paragraphs">
   <dt>Standard</dt>
   <dd>
     {{> @text-and-link }}
   </dd>
+  <dd>
+    {{> @text-and-link-no-href }}
+  </dd>
   <dt>Irregular</dt>
   <dd class="s-irregular-links">
     {{> @text-and-link }}
   </dd>
+  <dd>
+    {{> @text-and-link-no-href }}
+  </dd>
 </dl>

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

@@ -1,11 +1,15 @@
+@import url("../tools/selectors.css");
 @import url('../tools/x-link.css');
-a {
+:where(:--main-content) a:not(.c-button) {
   @extend .x-link;
 }
-a:hover {
+:where(:--main-content) a:not([href]) {
+  @extend .x-link--disabled;
+}
+:where(:--main-content) a:not(.c-button):hover {
   @extend .x-link--hover;
 }
-a:active {
+:where(:--main-content) a:not(.c-button):active {
   @extend .x-link--active;
 }

package/src/lib/_imports/elements/monospace/config.yml ADDED Viewed

@@ -0,0 +1,12 @@
+variants:
+  - name: default
+    hidden: true
+  - name: cms
+    label: (CMS) Monospace
+    context:
+      shouldLoadCMS: true
+      shouldLoadBootstrap: true
+  - name: docs
+    label: (Docs) Monospace
+    context:
+      shouldLoadDocs: true

package/src/lib/_imports/elements/monospace/monospace.hbs ADDED Viewed

@@ -0,0 +1,60 @@
+<dl>
+  <dt>Tags in Isolation</dt>
+  <dd>
+    <p><code>code (any) = &lt;code&gt;</code></p>
+    <p><kbd>keyboard (input) = &lt;kbd&gt;</kbd></p>
+    <p><pre>pre-formatted = &lt;pre&gt;</pre></p>
+    <p><samp>sample (output) = &lt;samp&gt;</samp></p>
+    <p><var>variable = &lt;var&gt;</var></p>
+  </dd>
+  <dt>Tag Combinations</dt>
+  <dd>
+    <p>A sentence with <code>code (&lt;code&gt;)</code> snippet.</p>
+    <p><code>code (&lt;code&gt;) with <kbd>keyboard (&lt;kbd&gt;)</kbd> input</code></p>
+    <p>A sentence with <code>code (&lt;code&gt;) with <kbd>keyboard</kbd> input</code>.</p>
+    <pre><code>pre-formatted code block
+&lt;pre&gt;
+  &lt;code&gt;
+    ...
+  &lt;/code&gt;
+&lt;/pre&gt;</code></pre>
+    <pre><code>pre-formatted sample output
+&lt;pre&gt;
+  &lt;samp&gt;
+    ...
+  &lt;/samp&gt;
+&lt;/pre&gt;</code></pre>
+    <pre><code>pre-formatted code (&lt;pre&gt; &lt;code&gt;) block with <var>variable (&lt;var&gt;)</var> text</code></pre>
+    <pre><code>pre-formatted samp (&lt;pre&gt; &lt;sample&gt;) output with <var>variable (&lt;var&gt;)</var> text</code></pre>
+    <pre><code>pre-formatted code (&lt;pre&gt; &lt;code&gt;) block with <strong>strong (&lt;strong&gt;)</strong> or <em>emphasized (&lt;em&gt;)</em> text</code></pre>
+    <pre><code>pre-formatted sample (&lt;pre&gt; &lt;samp&gt;) output with <strong>strong (&lt;strong&gt;)</strong> or <em>emphasized (&lt;em&gt;)</em> text</code></pre>
+    <pre><code><u>a prompt (via &lt;u&gt;):</u> within a pre-formatted (&lt;pre&gt;) code block</code></pre>
+    <pre><code>pre-formatted code (&lt;pre&gt; &lt;code&gt;) block with text that can overflow parent:
+      {{> @text-of-one-paragraph-medium }}</code></pre>
+    <pre><code>pre-formatted sample (&lt;pre&gt; &lt;samp&gt;)  ouput with text that can overflow parent:
+      {{> @text-of-one-paragraph-medium }}</code></pre>
+    <pre style="width: 75%"><code>pre-formatted, with a width set inline, code (&lt;pre style="width: 75%"&gt; &lt;code&gt;) block</code></pre>
+    <pre style="width: 75%"><samp>pre-formatted, with a width set inline, sample (&lt;pre style="width: 75%"&gt; &lt;samp&gt;) output</samp></pre>
+  </dd>
+  <dt>Sample</dt>
+  <dd>
+    <pre>
+<code><u>prompt&gt; </u>run command
+<samp>Sample output and <var>/a-variable/in-the/output</var></samp>
+</code>
+    </pre>
+  </dd>
+  <dt>Example</dt>
+  <dd>
+    <pre>
+<code><u>sftp&gt; </u>put my_file.txt
+<samp>Uploading my_file.txt to <var>/transfer/directory/path</var></samp>
+</code>
+    </pre>
+  </dd>
+</dl>

package/src/lib/_imports/elements/monospace.css ADDED Viewed

@@ -0,0 +1,95 @@
+@import url("../tools/selectors.css");
+/* To share styles between component and elements without scoping components */
+/* FAQ: Only elements need scoping, because they could appear anywhere */
+:--monospace-components,
+:where(:--main-content) :is(:--monospace-elements) {
+  font-family: var(--global-font-family--mono);
+  font-size: 87.5%; /* borrowed from Bootstrap */
+  line-height: 1.4;
+  color: inherit;
+}
+/* To scope these styles to main content (i.e. not header, not navbar) */
+:where(:--main-content) {
+/* Base */
+/* FAQ: Nested monospace patterns should not be resized twice */
+& :is(:--monospace-elements) > :is(:--monospace-elements) {
+  font-size: inherit;
+}
+& pre {
+  overflow: auto; /* borrowed from Bootstrap */
+}
+/* Types */
+/* Structure */
+& :--monospace--block {
+  display: inline-block; /* FAQ: If `block`, then background color is cropped */
+  padding: var(--global-space--x-small) var(--global-space--small);
+}
+& :--monospace--inline {
+  display: inline-block; /* to ensure element does not bleed outside parent */
+  padding: var(--global-space--xx-small) var(--global-space--x-small);
+}
+/* Skin */
+& :--monospace--block {
+  background-color: var(--global-color-primary--x-light);
+  color: var(--global-color-primary--xx-dark);
+  border: var(--global-border-width--normal) solid var(--global-color-primary--light);
+}
+& :--monospace--inline {
+  color: var(--global-color-primary--xx-dark);
+  background-color: var(--global-color-primary--x-light);
+  border: var(--global-border--normal);
+}
+& :--monospace--output:not(:--monospace--boxed) {
+  opacity: 0.75;
+}
+& :--monospace--kbd {
+  border: var(--global-border--normal);
+  border-radius: 0.5rem;
+  background-color: var(--global-color-primary--xx-light); /* undo Bootstrap */
+}
+/* Types: Edge Cases */
+/* To stretch code blocks whose container has a width set inline */
+& :--monospace--block:where(pre[style] > *) {
+  min-width: 100%;
+  box-sizing: border-box;
+}
+/* Children */
+& :--monospace__kbd {
+  display: inline-block;
+  font-size: inherit;
+}
+& :--monospace__prompt {
+  opacity: 0.50;
+  text-decoration: none;
+}
+}