@tacc/core-styles 0.5.1

package/source/_imports/settings/max-width.css

@@ -0,0 +1,31 @@
+/*
+Max. Widths (Bootstrap)
+
+Define maximum widths for Bootstrap 5.0 containers and wider.
+
+Usage:
+  ```
+  @media (--x-wide-and-above) {
+    .container { max-width: var(--global-max-width--x-wide); }
+  }
+  ```
+
+Reference:
+- https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
+- https://getbootstrap.com/docs/5.0/layout/grid/#grid-options
+
+Styleguide Settings.CustomProperties.MaxWidth
+*/
+
+/* Usage: `var(--global-breakpoint--x-narrow)` */
+/* SEE: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties */
+
+:root {
+  --global-max-width--x-narrow: 540px;
+  --global-max-width--narrow: 720px;
+  --global-max-width--medium: 960px;
+  --global-max-width--wide: 1140px;
+  --global-max-width--x-wide: 1320px;
+  --global-max-width--xx-wide: 1580px;
+  --global-max-width--xxx-wide: 1800px;
+}

package/source/_imports/settings/space.css

@@ -0,0 +1,36 @@
+/* DO NOT ADD STYLES HERE; ADD CUSTOM PROPERTIES TO USE IN OTHER STYLESHEETS */
+
+/*
+Spacing
+
+These are global spacing values for a website.
+
+_Notice_: We will use Bootstrap values until Design defines values.
+
+Usage: `var(--global-space--normal)`
+
+Reference:
+- https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
+- https://getbootstrap.com/docs/4.0/utilities/spacing/
+- https://getbootstrap.com/docs/4.0/getting-started/theming/#sass-options
+
+Styleguide Settings.CustomProperties.Space
+*/
+
+/* Modifers
+    --normal:   standard value
+    --(…)small: smaller value
+    --(…)large: larger value
+*/
+:root {
+  --global-space--xx-small: 0.125rem;  /*  2px (if base is 16px) */
+  --global-space--x-small: 0.25rem;    /*  4px (if base is 16px) */
+  --global-space--small: 0.5rem;       /*  8px (if base is 16px) */
+  --global-space--normal: 1.0rem;      /* 16px (if base is 16px) */
+  --global-space--large: 1.5rem;       /* 25px (if base is 16px) */
+  --global-space--x-large: 3.0rem;     /* 48px (if base is 16px) */
+
+  --global-space--list-indent: 40px;   /* browser default (Firefox, Edge) */
+  --global-space--section-gap: 45px;   /* recurring design doc spacing */
+  --global-space--grid-gap: 15px;      /* Bootstrap `.container` & `.row` */
+}

package/source/_imports/tools/README.css

@@ -0,0 +1,17 @@
+/* DO NOT ADD STYLES HERE; ADD GLOBAL TOOLS INSIDE STYLESHEETS IN THIS DIRECTORY */
+
+/* FAQ: To use global tools, import them into any one global stylesheet */
+
+/*
+Tools
+
+Tools are global sets of properties e.g. mixins / `@extend`s / functional selectors, functions / `@plugin`s. They are not defined as Settings, because one may require one of the global Settings as a default parameter.
+
+Reference:
+
+- [Creative Bloq: Manage Large CSS Projects With ITCSS](https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528) (find "Tools")
+
+Weight: 2
+
+Styleguide Tools
+*/

package/source/_imports/tools/media-queries.css

@@ -0,0 +1,48 @@
+/* DO NOT ADD STYLES HERE; ADD CUSTOM MEDIA QUERIES TO USE IN OTHER STYLESHEETS */
+
+/*
+Breakpoints
+
+These are global breakpoints values for a website.
+
+Usage: `@media (--narrow-and above) { … }`
+
+Notice: These must be Tools (imported as needed) until native browser support, at which time they can become Settings (imported globally).
+
+Reference:
+- https://drafts.csswg.org/mediaqueries-5/#at-ruledef-custom-media
+- https://confluence.tacc.utexas.edu/x/b4AZCg
+
+Styleguide Tools.CustomMediaQueries.Breakpoints
+*/
+@custom-media --x-narrow-and-below (width < 576px);
+@custom-media --x-narrow-and-above (width >= 576px);
+@custom-media --x-narrow-to-narrow (576px <= width < 768px);
+
+@custom-media --narrow-and-below (width < 768px);
+@custom-media --narrow-and-above (width >= 768px);
+@custom-media --narrow-to-medium (768px <= width < 992px);
+
+@custom-media --medium-and-below (width < 992px);
+@custom-media --medium-and-above (width >= 992px);
+@custom-media --medium-to-wide (992px <= width < 1200px);
+
+@custom-media --wide-and-below (width < 1200px);
+@custom-media --wide-and-above (width >= 1200px);
+@custom-media --wide-to-x-wide (1200px <= width < 1400px);
+
+@custom-media --x-wide-and-below (width < 1400px);
+@custom-media --x-wide-and-above (width >= 1400px);
+@custom-media --x-wide-to-xx-wide (1400px <= width < 1680px);
+
+@custom-media --xx-wide-and-below (width < 1680px);
+@custom-media --xx-wide-and-above (width >= 1680px);
+@custom-media --xx-wide-to-xxx-wide (1680px <= width < 1920px);
+
+@custom-media --xxx-wide-and-below (width < 1920px);
+@custom-media --xxx-wide-and-above (width >= 1920px);
+@custom-media --xxx-wide-to-max-wide (1920px <= width < 2400px);
+
+@custom-media --max-wide-and-below (width < 2400px);
+@custom-media --max-wide-and-above (width >= 2400px);
+/* @custom-media --max-wide-to-god-wide (... <= width < ...); */

package/source/_imports/tools/x-article-link.css

@@ -0,0 +1,62 @@
+/*
+Article Link
+
+Styles that allow visible link hover for article lists.
+
+> __⚠️ Warning__: A link ancestor must have its `position` set (not to `static`)
+
+%x-article-link-stretch          - Stretch link to cover container
+%x-article-link-stretch--gapless - Make link box fix gapless layout
+%x-article-link-hover            - Give link a hover state
+%x-article-link-hover--gapless   - Make link hover state fix gapless layout
+%x-article-link-active           - Give link an active (click, enter) state
+%x-article-link-text             - Hide link text
+
+Styleguide Tools.ExtendsAndMixins.ArticleLink
+*/
+
+/* To expand link to cover container */
+.x-article-link-stretch,
+%x-article-link-stretch {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  /* To prevent container padding from offsetting an `outline` */
+  top: 0;
+  left: 0;
+
+  /* To prevent `outline` from being inexplicably offset in Firefox */
+  /* SEE: http://johndoesdesign.com/blog/2012/css/firefox-and-its-css-focus-outline-bug/ */
+  overflow: hidden;
+}
+.x-article-link-stretch--gapless,
+%x-article-link-stretch--gapless {
+  width: calc(100% + 30px); /* GH-99: Use standard spacing value */
+  left: -15px;
+}
+
+/* To give link state (pseudo-class) feedback */
+.x-article-link-hover,
+%x-article-link-hover {
+  --outline-offset: 1em;
+
+  outline: 1px solid var(--global-color-accent--normal);
+
+  outline-offset: var(--outline-offset);
+}
+.x-article-link-hover--gapless,
+%x-article-link-hover--gapless {
+  --outline-offset: 0;
+}
+
+/* To give link active state feedback */
+%x-article-link-active {
+  outline: 1px dotted var(--global-color-accent--normal);
+}
+
+/* To hide link text but retain link element */
+%x-article-link-text {
+  line-height: 0;
+  font-size: 0;
+  color: transparent;
+}

package/source/_imports/tools/x-center.css

@@ -0,0 +1,60 @@
+/*
+Center
+
+Styles that allow centering for specific contexts.
+
+Caveat: Only generic solutions with limited side effects are supported. See "Reference" section for more solutions.
+
+Reference:
+- [Centering in CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/)
+
+.x-center--horz-inline                     - Horz. align any num of inline el's
+.x-center--horz-block                      - Horz. align any num of block el's
+.x-center--horz-block-multiple-children    - Horz. align multiple block el's
+.x-center--vert-inline-multiline--flex     - Vert. align multiple inline el's: Flex Method
+.x-center--both--flex                      - Vert. & Horz. align any el's
+
+Styleguide Tools.ExtendsAndMixins.Center
+*/
+
+/* Horizontal */
+
+/* Horizontal: Inline */
+.x-center--horz-inline, /* DEPRECATED */
+%x-center--horz-inline {
+  text-align: center;
+}
+
+/* Horizontal: Block */
+.x-center--horz-block, /* DEPRECATED */
+%x-center--horz-block {
+  margin: 0 auto;
+}
+
+/* Horizontal: Block: Multiple Children */
+.x-center--horz-block-multiple-children, /* DEPRECATED */
+%x-center--horz-block-multiple-children {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+/* Vertical */
+
+/* Vertical: Inline: Multiple Lines - via Flexbox */
+.x-center--vert-inline-multiline--flex, /* DEPRECATED */
+%x-center--vert-inline-multiline--flex {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* Both */
+
+/* Both: Any - via Flexbox */
+.x-center--both--flex, /* DEPRECATED */
+%x-center--both--flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/source/_imports/tools/x-fake-border.css

@@ -0,0 +1,72 @@
+/*
+Fake Border
+
+Fake borders that have features unavailable to regular borders
+
+(custom property a.k.a. variable prefix `fb` stands for __f__ake __b__order)
+
+%x-fake-border--inset-horz-top - A top border that is not full width
+%x-fake-border--inset-horz-both - Borders top & bottom that are not full width
+%x-fake-border--inset-horz-bottom - A bottom border that is not full width
+
+Styleguide Tools.ExtendsAndMixins.Overlay
+*/
+
+/*
+Inset Border
+
+To create the border, three lines are drawn via these private variables:
+- `--fb--line` (the fake border on one side of element box)
+- `--fb--start` (a perpindicular strip to shorten the start of the line)
+- `--fb--end` (a perpindicular strip to shorten the end of the line)
+
+To customize the lines, there are some public variables:
+- `--fb--line-width` (default: 0px) (add unit so `calc()` will not fail)
+- `--fb--line-color` (default: transparent)
+- `--fb--inset-width` (default: 0px) (add unit so `calc()` will not fail)
+- `--fb--inset-color` (default: transparent)
+- `--fb--shadow-above` (default: 0 0 transparent)
+- `--fb--shadow-below` (default: 0 0 transparent)
+
+To avoid overwriting an existing `box-shadow`, use the public shadow variables:
+- `--fb--shadow-above: var(--YOUR-existing-shadow-ABOVE-fake-border)`
+- `--fb--shadow-below: var(--YOUR-existing-shadow-BELOW-fake-border)`
+*/
+%x-fake-border--inset-horz {
+  --fb--line-width: 0px; /* CAVEAT: add unit so `calc()` will not fail */
+  --fb--line-color: transparent;
+
+  --fb--inset-width: 0px; /* CAVEAT: add unit so `calc()` will not fail */
+  --fb--inset-color: transparent;
+
+  /* --fb--line: */
+  --fb--start: inset calc( 1 * var(--fb--inset-width)) 0 var(--fb--inset-color);
+  --fb--end: inset calc(-1 * var(--fb--inset-width)) 0 var(--fb--inset-color);
+
+  --fb:
+    var(--fb--start), /* cover the start of the line */
+    var(--fb--end),   /* cover the end of the line */
+    var(--fb--line);  /* draw the line underneath */
+
+  box-shadow:
+    var(--fb--shadow-above, 0 0 transparent),
+    var(--fb),
+    var(--fb--shadow-below, 0 0 transparent)
+}
+%x-fake-border--inset-horz-top {
+  @extend %x-fake-border--inset-horz;
+
+  --fb--line: inset 0 calc( 1 * var(--fb--line-width)) var(--fb--line-color);
+}
+%x-fake-border--inset-horz-both {
+  @extend %x-fake-border--inset-horz;
+
+  --fb--line: inset 0 calc( 1 * var(--fb--line-width)) var(--fb--line-color),
+              inset 0 calc(-1 * var(--fb--line-width)) var(--fb--line-color);
+}
+%x-fake-border--inset-horz-bottom {
+  @extend %x-fake-border--inset-horz;
+
+  --fb--line: inset 0 calc(-1 * var(--fb--line-width)) var(--fb--line-color);
+}
+/* TODO: As needed, create `--inset-vert-left`, `--inset-vert-right` */

package/source/_imports/tools/x-grid.css

@@ -0,0 +1,116 @@
+/*
+Grid
+
+Snippets i.e. atomic abstractions of useful grid functionality.
+
+Caveats:
+- Do not combine two `x-grid--layout-rows-…` nor two `x-grid--layout-cols-…`.
+
+Reference:
+- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
+
+%x-grid--layout-rows-equal-max-height - Same height rows, match tallest content
+%x-grid--layout-rows-equal-set-height - Same height rows, default var. height (custom properties: `--height`)
+%x-grid--layout-cols-equal-set-count  - Same width columns, auto. column count (custom properties: `--count`)
+%x-grid--layout-cols-equal-min-width  - Same width columns, default min. width (custom properties: `--width`)
+%x-grid--content-align-center         - Align content vert.ly and horz.ly center
+
+Styleguide Tools.ExtendsAndMixins.Grid
+*/
+
+
+
+
+
+/* Layout */
+
+
+
+/* Layout: Columns */
+
+/* Layout: Columns: Same Width, Preset Col. Count */
+
+%x-grid--layout-cols-equal-set-count {
+  /* --count */
+
+  grid-template-columns: repeat(var(--count), auto);
+}
+
+/* Layout: Columns: Same Width, Preset Min. Width */
+
+%x-grid--layout-cols-equal-min-width {
+  /* --width */
+
+  grid-template-columns: repeat(auto-fit, minmax(var(--width), 1fr));
+}
+/* Suggestion for User: Prevent content overflow */
+/*
+.x-grid--layout-cols-equal-min-width > * {
+  max-width: 100%; \/* used if cell width is smaller than content *\/
+  max-height: 100%; \/* used if cell height is smaller than content *\/
+}
+*/
+
+
+
+/* Layout: Rows */
+
+/* Layout: Rows: Same Height (equal to height of tallest content in grid) */
+
+%x-grid--layout-rows-equal-max-height {
+  grid-auto-rows: 1fr;
+}
+
+/* Layout: Rows: Same Height (equal to default, variable value) */
+
+%x-grid--layout-rows-equal-set-height {
+  /* --height */
+
+  grid-auto-rows: var(--height);
+}
+
+
+
+
+
+/* Content */
+
+
+
+/* Content: Align Vert/Horz Center */
+
+%x-grid--content-align-center {
+  justify-items: center;
+  align-items: center;
+}
+
+
+
+
+
+/* Suggestions for User */
+
+/*
+.user-block {
+  --gap: ...;
+
+  display: grid;
+  gap: var(--gap);
+}
+
+.user-block--modifier {
+  @extend %x-grid--...;
+}
+
+\/* Hide content that does exceed cell size *\/
+.user-block > * {
+  overflow: hidden;
+}
+
+\/* Avoid leting image size exceed cell size *\/
+\/* FAQ: An intentionally loose limitation (so user can choose to ignore it) *\/
+.user-block img {
+  max-height: 100%;
+  max-width: 100%;
+}
+*/

package/source/_imports/tools/x-layout.css

@@ -0,0 +1,86 @@
+/*
+Layout
+
+Styles that allow re-usable layouts.
+
+%x-layout--a - Widest: two even columns
+%x-layout--b - Widest: one wide column & one narrow column
+%x-layout--c - Widest: one narrow column & one wide column
+%x-layout--d - Widest: three even columns
+%x-layout--e - (deprecated) Always: multiple even rows
+
+Styleguide Tools.ExtendsAndMixins.Layout
+*/
+@import url("_imports/tools/media-queries.css");
+
+
+
+/* Column-Based */
+
+.x-layout--a, /* DEPRECATED */
+.x-layout--b, /* DEPRECATED */
+.x-layout--c, /* DEPRECATED */
+.x-layout--d, /* DEPRECATED */
+%x-layout--a,
+%x-layout--b,
+%x-layout--c,
+%x-layout--d {
+  display: grid;
+}
+
+/* A (two even columns) */
+
+@media (--medium-and-below) {
+  .x-layout--a, /* DEPRECATED */
+  %x-layout--a { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+}
+@media (--medium-and-above) {
+  .x-layout--a, /* DEPRECATED */
+  %x-layout--a { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+/* B (one wide column & one narrow column) */
+
+@media (--medium-and-below) {
+  .x-layout--b, /* DEPRECATED */
+  %x-layout--b { grid-template-columns: minmax(0,1fr); }
+}
+@media (--medium-and-above) {
+  .x-layout--b, /* DEPRECATED */
+  %x-layout--b { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
+}
+
+/* C (one narrow column & one wide column) */
+
+@media (--medium-and-below) {
+  .x-layout--c, /* DEPRECATED */
+  %x-layout--c { grid-template-columns: minmax(0,1fr); }
+}
+@media (--medium-and-above) {
+  .x-layout--c, /* DEPRECATED */
+  %x-layout--c { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
+}
+
+/* D (three equal columns) */
+
+@media (--x-narrow-and-below) {
+  .x-layout--d, /* DEPRECATED */
+  %x-layout--d { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+}
+@media (--narrow-to-medium), (--x-narrow-to-narrow) {
+  .x-layout--d, /* DEPRECATED */
+  %x-layout--d { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (--medium-and-above) {
+  .x-layout--d, /* DEPRECATED */
+  %x-layout--d { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+
+
+/* Row-Based */
+
+.x-layout--e, /* DEPRECATED */
+%x-layout--e {
+  display: flex;
+  flex-direction: column;
+}

package/source/_imports/tools/x-overlay.css

@@ -0,0 +1,28 @@
+/*
+Overlay
+
+Colored boxes that appear atop a large image (like a banner).
+
+%x-overlay--curtain - A full size transluscent curtain over the background
+%x-overlay--callout - A transluscent box surrounding the content
+
+Styleguide Tools.ExtendsAndMixins.Overlay
+*/
+
+%x-overlay--curtain {
+  --color-text: inherit;
+  --color-bkgd-rgb: var(--global-color-primary--normal);
+
+  color: var(--color-text);
+  background-color: rgba(var(--color-bkgd-rgb), 0.65);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+
+%x-overlay--callout {
+  --color-text: inherit;
+  --color-bkgd-rgb: var(--global-color-primary--normal);
+
+  color: var(--color-text);
+  background-color: rgba(var(--color-bkgd-rgb), 0.90);
+}

package/source/_imports/tools/x-truncate.css

@@ -0,0 +1,47 @@
+/*
+Truncate
+
+Styles that allow truncating text.
+
+%x-truncate--one-line     - Truncated text may only be one line tall.
+%x-untruncate--one-line   - Remove one-line truncation after it's added.
+%x-truncate--many-lines   - Truncated text may be many lines tall.
+%x-untruncate--many-lines - Remove many-lines truncation after it's added.
+
+Styleguide Tools.ExtendsAndMixins.Truncate
+*/
+
+/* Many Lines */
+/* WARNING: Relies on proprietary and undocumented rules (that work well) */
+
+.x-truncate--many-lines, /* DEPRECATED */
+%x-truncate--many-lines {
+  --lines: 2;
+
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+
+  overflow: hidden;
+  -webkit-line-clamp: var(--lines);
+}
+.x-untruncate--many-lines, /* DEPRECATED */
+%x-untruncate--many-lines {
+  overflow: visible;
+  -webkit-line-clamp: inherit;
+}
+
+/* One Line */
+
+.x-truncate--one-line, /* DEPRECATED */
+%x-truncate--one-line {
+	text-overflow: var(--text-overflow, ellipsis);
+
+	overflow: hidden;
+	white-space: nowrap;
+}
+.x-untruncate--one-line, /* DEPRECATED */
+%x-untruncate--one-line {
+  overflow: visible;
+	white-space: normal;
+}
+

package/source/_imports/trumps/README.css

@@ -0,0 +1,79 @@
+/* DO NOT ADD STYLES HERE; ADD THEM INSIDE STYLESHEETS IN THIS DIRECTORY */
+
+/*
+Trumps
+
+Trump styles exist to overwrite other styles. They are added as necessary. Examples use cases are third-party styles, styles used only by JavaScript, modules that are not meant to be extended.
+
+Reference:
+
+- [Creative Bloq: Manage Large CSS Projects With ITCSS](https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528) (find "Trumps")
+
+Rules:
+
+- Classes and IDs must not be styled.
+- Opinionated high-level styles may be here.
+- Element tags may be styled.
+- Pseudo classes may be styled.
+- Pseudo elements may be styled.
+
+Weight: 7
+
+Styleguide Trumps
+*/
+
+/*
+Scopes
+
+Scope styles are overrides and styles that are scoped to a specific area. These are meant to be used sparingly. Examples of scopes are styles for:
+- third-party markup, e.g.:
+    - social media widget
+    - external authentication form
+    - internal Bootstrap-dependent markup
+- enforcing internal markup (e.g. breadcrumbs, form elements, document pages)
+- WYSIWIG editor tags (e.g. CMS WYSIWIG content entry)
+- coupled components (i.e. components interwoven in unique situations), e.g.:
+    - Frontera homepage before all styling used plugins
+    - article previews within an article list
+
+Reference:
+
+- [BEM with Namespaces: Scope Namespaces](https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/#scope-namespaces-s-)
+
+Guidelines:
+
+- Scopes should be rare; evaluate before creating.
+- A consistent way to author these in nested inside `.s-* {}`.
+
+Rules:
+
+- The `!important` may be used.
+- All overrides **must** have a comment.
+- Scope styles should have a comment.
+
+Styleguide Trumps.Scopes
+*/
+
+/*
+Utility
+
+Utility styles exist to overwrite other styles. They are seldom modified. Example use case is one-time use on modules that are not meant to be extended to have the desired behavior.
+
+Reference:
+
+- [BEM with Namespaces: Utility Namespaces](https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/#utility-namespaces-u-)
+
+Guidelines:
+
+- Utilities are style heavyweights.
+- Alert people as to their existence.
+- Never reassign to anything that carries a leading u-.
+
+Rules:
+
+- All other existing styles must be considered first.
+- All other existing stylesheets must be considered first.
+- Prefer this to inline styles.
+
+Styleguide Trumps.Utilities
+*/