@tacc/core-styles 2.28.0 → 2.29.1

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

@@ -16,15 +16,15 @@
 /* To distinguish link from message text */
 :--c-message--scope-global a,
 :--c-message--scope-global :--c-button--as-link {
-  @extend .x-link--irregular;
+  @mixin link--irregular;
 }
 :--c-message--scope-global a:hover,
 :--c-message--scope-global :--c-button--as-link:hover {
-  @extend .x-link--irregular--hover;
+  @mixin link--irregular--hover;
 }
 :--c-message--scope-global a:active,
 :--c-message--scope-global :--c-button--as-link:active {
-  @extend .x-link--irregular--active;
+  @mixin link--irregular--active;
 }
 
 
@@ -32,51 +32,102 @@
 /* Modifiers */
 
 /* Structure */
+@define-mixin message--scope-section {
+  color: var(--global-color-primary--dark);
 
-:--c-message--scope-section {
   --pad-vert: 20px;
   --pad-horz: 30px;
 
   border-width: var(--global-border-width--normal);
   border-style: solid;
 }
-
-/* Skin */
-
 :--c-message--scope-section {
-  color: var(--global-color-primary--dark);
+  @mixin message--scope-section;
 }
 
-:--c-message--type-info:--c-message--scope-inline {
+@define-mixin message--type-info---message--scope-inline {
   color: var(--global-color-info--x-dark);
 }
-:--c-message--type-success:--c-message--scope-inline {
+:--c-message--type-info:--c-message--scope-inline {
+  @mixin message--type-info---message--scope-inline;
+}
+
+@define-mixin message--type-success---message--scope-inline {
   color: var(--global-color-success--x-dark);
 }
-:--c-message--type-warning:--c-message--scope-inline {
+:--c-message--type-success:--c-message--scope-inline {
+  @mixin message--type-success---message--scope-inline;
+}
+
+@define-mixin message--type-warning---message--scope-inline {
   color: var(--global-color-warning--x-dark);
 }
-:--c-message--type-error:--c-message--scope-inline {
+:--c-message--type-warning:--c-message--scope-inline {
+  @mixin message--type-warning---message--scope-inline;
+}
+
+@define-mixin message--type-error---message--scope-inline {
   color: var(--global-color-danger--x-dark);
 }
-:--c-message--type-tip:--c-message--scope-inline {
+:--c-message--type-error:--c-message--scope-inline {
+  @mixin message--type-error---message--scope-inline;
+}
+
+@define-mixin message--type-tip---message--scope-inline {
   color: var(--global-color-extra--x-dark);
 }
+:--c-message--type-tip:--c-message--scope-inline {
+  @mixin message--type-tip---message--scope-inline;
+}
 
 /* To support icons (if needed) */
 /* SEE: ./admonition.css */
-:--c-message--type-info::before {
-  background-color: var(--global-color-info--normal);
+@define-mixin message--type-info {
+  &::before {
+    background-color: var(--global-color-info--normal);
+  }
+}
+
+:--c-message--type-info {
+  @mixin message--type-info;
 }
-:--c-message--type-success::before {
-  background-color: var(--global-color-success--normal);
+
+@define-mixin message--type-success {
+  &::before {
+    background-color: var(--global-color-success--normal);
+  }
 }
-:--c-message--type-warning::before {
-  background-color: var(--global-color-warning--normal);
+
+:--c-message--type-success {
+  @mixin message--type-success;
+}
+
+@define-mixin message--type-warning {
+  &::before {
+    background-color: var(--global-color-warning--normal);
+  }
 }
-:--c-message--type-error::before {
-  background-color: var(--global-color-danger--normal);
+
+:--c-message--type-warning {
+  @mixin message--type-warning;
+}
+
+@define-mixin message--type-error {
+  &::before {
+    background-color: var(--global-color-danger--normal);
+  }
+}
+
+:--c-message--type-error {
+  @mixin message--type-error;
+}
+
+@define-mixin message--type-tip {
+  &::before {
+    background-color: var(--global-color-extra--normal);
+  }
+}
+
+:--c-message--type-tip {
+  @mixin message--type-tip;
 }
-:--c-message--type-tip::before {
-  background-color: var(--global-color-extra--normal);
-}

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

@@ -5,18 +5,26 @@
 /* Elements */
 
 /* To prevent excess space at top and bottom of message */
-:--c-message > *:first-child {
-  margin-top: 0;
+
+@define-mixin message {
+  & > *:first-child {
+    margin-top: 0;
+  }
+
+  & > *:last-child {
+    margin-bottom: 0;
+  }
 }
-:--c-message > *:last-child {
-  margin-bottom: 0;
+
+:--c-message {
+  @mixin message;
 }
 
 
 
 /* Modifiers */
 
-/* Structure */
+/* Modifiers: Structure */
 
 :--c-message--scope-inline,
 :--c-message--scope-section,
@@ -42,34 +50,57 @@
   text-align: center;
 }
 
-/* Skin */
+/* Modifiers: Skin */
 
 :--c-message--type {
   /* To let clients prematurely @extend (to reduce their later maintenance) */
 }
-:--c-message--type-info:--c-message--scope-section {
+@define-mixin message--type-info---message--scope-section {
   background-color: var(--global-color-info--x-light);
   border-color: var(--global-color-info--normal);
 }
-:--c-message--type-success:--c-message--scope-section {
+:--c-message--type-info:--c-message--scope-section {
+  @mixin message--type-info---message--scope-section;
+}
+
+@define-mixin message--type-success---message--scope-section {
   background-color: var(--global-color-success--x-light);
   border-color: var(--global-color-success--normal);
 }
-:--c-message--type-warning:--c-message--scope-section {
+
+:--c-message--type-success:--c-message--scope-section {
+  @mixin message--type-success---message--scope-section;
+}
+
+@define-mixin message--type-warning---message--scope-section {
   background-color: var(--global-color-warning--x-light);
   border-color: var(--global-color-warning--normal);
 }
-:--c-message--type-error:--c-message--scope-section {
+:--c-message--type-warning:--c-message--scope-section {
+  @mixin message--type-warning---message--scope-section;
+}
+
+@define-mixin message--type-error---message--scope-section {
   background-color: var(--global-color-danger--x-light);
   border-color: var(--global-color-danger--normal);
 }
-:--c-message--type-tip:--c-message--scope-section {
+:--c-message--type-error:--c-message--scope-section {
+  @mixin message--type-error---message--scope-section;
+}
+
+@define-mixin message--type-tip---message--scope-section {
   background-color: var(--global-color-extra--x-light);
   border-color: var(--global-color-extra--normal);
 }
+:--c-message--type-tip:--c-message--scope-section {
+  @mixin message--type-tip---message--scope-section;
+}
 
-:--c-message--scope-global {
+@define-mixin message--scope-global {
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-accent--secondary);
   border-color: var(--global-color-primary--dark);
 }
+:--c-message--scope-global {
+  @mixin message--scope-global;
+}

package/src/lib/_imports/components/c-see-all-link.css

@@ -25,7 +25,7 @@ Styleguide Components.SeeAllLink
   padding-bottom: 1.0em;
   margin-bottom: -1.0em; /* to "undo" space added from `padding-bottom` */
 
-  @extend %x-truncate--one-line;
+  @mixin truncate--one-line;
   max-width: 100%; /* SEE: https://stackoverflow.com/a/44521595 */
 
   font-size: 1.2rem;

package/src/lib/_imports/components/c-show-more.css

@@ -17,18 +17,18 @@ Styleguide: Components.ShowMore
 
 /* Many Lines */
 .c-show-more--many-lines .c-show-more__target {
-  @extend .x-truncate--many-lines;
+  @mixin truncate--many-lines;
 }
 .c-show-more--many-lines .c-show-more__state:checked ~ .c-show-more__target {
-  @extend .x-untruncate--many-lines;
+  @mixin untruncate--many-lines;
 }
 
 /* One Line */
 .c-show-more--one-line .c-show-more__target {
-  @extend .x-truncate--one-line;
+  @mixin truncate--one-line;
 }
 .c-show-more--one-line .c-show-more__state:checked ~ .c-show-more__target {
-  @extend .x-untruncate--one-line;
+  @mixin untruncate--one-line;
 }
 
 /* Show More / Show Less */

package/src/lib/_imports/components/django-cms-forms.hacks.css

@@ -11,7 +11,6 @@ Styleguide Components.DjangoCMS.Forms.Hacks
 */
 @custom-selector :--django-cms-logged-in   .cms-ready;
 @custom-selector :--django-cms-edit-mode   [class*="cms-structure-mode-"];
-/* IDEA: @import and @mixin `.c-message(...)` */
 /* IDEA: WP-280 use postcss mixin for message styles */
 /* @tacc/core-styles/src/lib/_imports/components/c-message.css */
 

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

@@ -14,25 +14,25 @@ body {
 
 /* Organize Content */
 
-main > dl {
+main > dl:not(.no-demo-styles) {
 
-  &:is(dt, dd):not(.no-demo-styles > *) {
+  &:is(dt, dd) {
     font-family: var(--global-font-family--sans);
     color: #484848;
     line-height: normal;
   }
-  & dt:not(.no-demo-styles > *) {
+  & dt {
     font-size: 1.6rem;
-    font-weight: var(--medium);
     margin-bottom: 10px;
   }
-  & > dt:not(.no-demo-styles > *) {
-    font-weight: var(--bold);
-  }
-  & dt:not(:first-of-type):not(.no-demo-styles > *) {
+  & dt { font-weight: var(--bold); }
+  & dl dt { font-weight: var(--medium); }
+  & dl dl dt { font-weight: var(--regular); }
+
+  & dt:not(:first-of-type) {
     margin-top: 20px;
   }
-  & dd:not(.no-demo-styles > *) {
+  & dd {
     margin-bottom: 10px;
     margin-left: 25px;
   }

package/src/lib/_imports/elements/irregular-link.css

@@ -5,11 +5,11 @@
 @import url('../tools/x-link.css');
 
 a {
-  @extend .x-link--irregular;
+  @mixin link--irregular;
 }
 a:hover {
-  @extend .x-link--irregular--hover;
+  @mixin link--irregular--hover;
 }
 a:active {
-  @extend .x-link--irregular--active;
+  @mixin link--irregular--active;
 }

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

@@ -3,14 +3,14 @@
 @import url('../tools/x-link.css');
 
 a:not(:--c-button) {
-  @extend .x-link;
+  @mixin link;
 }
 a:not([href]) {
-  @extend .x-link--disabled;
+  @mixin link--disabled;
 }
 a:not(:--c-button):hover {
-  @extend .x-link--hover;
+  @mixin link--hover;
 }
 a:not(:--c-button):active {
-  @extend .x-link--active;
+  @mixin link--active;
 }

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

@@ -1,5 +1,5 @@
 @import url("../tools/selectors.css");
-
+@import url('../tools/x-link.css');
 
 
 /* To share styles between component and elements without scoping components */
@@ -78,16 +78,16 @@ pre {
 
 /* To apply link styles */
 & :--monospace--inline:where(a > *) {
-  @extend .x-link;
+  @mixin link;
 }
 & :--monospace--inline:where(a:not([href]) > *) {
-  @extend .x-link--disabled;
+  @mixin link--disabled;
 }
 & :--monospace--inline:where(a:hover > *) {
-  @extend .x-link--hover;
+  @mixin link--hover;
 }
 & :--monospace--inline:where(a:active > *) {
-  @extend .x-link--active;
+  @mixin link--active;
 }
 
 

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

@@ -211,4 +211,4 @@ main > .container > :--o-section--dark:last-of-type {
 /* WARNING: This "feature" was not reviewed by design */
 :--o-section > *:last-child {
   margin-bottom: 0;
-}
+}

package/src/lib/_imports/objects/o-table-wrap/example.flexible-horz.css

@@ -16,5 +16,5 @@
 /* Truncate Cell Text - Mixin i.e. Standard */
 /*
 1. import @tacc/core-styles/src/lib/_imports/tools/x-truncate.css
-2. mixin, extend, or compose .x-truncate--one-line
+2. mixin or compose .x-truncate--one-line
 */

package/src/lib/_imports/tools/x-article-link.css

@@ -12,12 +12,11 @@ Styles that allow visible link hover for article lists.
 %x-article-link-active           - Give link an active (click, enter) state
 %x-article-link-text             - Hide link text
 
-Styleguide Tools.ExtendsAndMixins.ArticleLink
+Styleguide Tools.Mixins.ArticleLink
 */
 
 /* To expand link to cover container */
-.x-article-link-stretch,
-%x-article-link-stretch {
+@define-mixin article-link-stretch {
   position: absolute;
   height: 100%;
   width: 100%;
@@ -29,34 +28,54 @@ Styleguide Tools.ExtendsAndMixins.ArticleLink
   /* 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 {
+.x-article-link-stretch,
+%x-article-link-stretch {
+  @mixin article-link-stretch;
+}
+@define-mixin article-link-stretch--gapless {
   width: calc(100% + 30px);
   left: -15px;
 }
+.x-article-link-stretch--gapless,
+%x-article-link-stretch--gapless {
+  @mixin article-link-stretch--gapless;
+}
 
 /* To give link state (pseudo-class) feedback */
-.x-article-link-hover,
-%x-article-link-hover {
+@define-mixin article-link-hover {
   --outline-offset: 1em;
 
   outline: 1px solid var(--global-color-accent--normal);
 
   outline-offset: var(--outline-offset);
 }
+.x-article-link-hover,
+%x-article-link-hover {
+  @mixin article-link-hover;
+}
+@define-mixin article-link-hover--gapless {
+  --outline-offset: 0;
+}
 .x-article-link-hover--gapless,
 %x-article-link-hover--gapless {
-  --outline-offset: 0;
+  @mixin article-link-hover--gapless;
 }
 
 /* To give link active state feedback */
-%x-article-link-active {
+@define-mixin article-link-active {
   outline: 1px dotted var(--global-color-accent--normal);
 }
 
+%x-article-link-active {
+  @mixin article-link-active;
+}
+
 /* To hide link text but retain link element */
-%x-article-link-text {
+@define-mixin article-link-text {
   line-height: 0;
   font-size: 0;
   color: transparent;
 }
+%x-article-link-text {
+  @mixin article-link-text;
+}

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

@@ -14,7 +14,7 @@ Reference:
 .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
+Styleguide Tools.Mixins.Center
 */
 
 /* Horizontal */

package/src/lib/_imports/tools/x-fake-border.css

@@ -9,7 +9,7 @@ Fake borders that have features unavailable to regular borders
 %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
+Styleguide Tools.Mixins.Overlay
 */
 
 /*

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

@@ -16,7 +16,7 @@ Reference:
 %x-grid--layout-cols-equal-min-width-max-count  - Same width columns, default min. width, max. column count (custom properties: `--min-width`, `--max-cols`, `--row-height`, `--gap`)
 %x-grid--content-align-center         - Align content vert.ly and horz.ly center
 
-Styleguide Tools.ExtendsAndMixins.Grid
+Styleguide Tools.Mixins.Grid
 */
 
 

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

@@ -9,7 +9,7 @@ Styles that allow re-usable layouts.
 %x-layout--d - Widest: three even columns
 %x-layout--e - (deprecated) Always: multiple even rows
 
-Styleguide Tools.ExtendsAndMixins.Layout
+Styleguide Tools.Mixins.Layout
 */
 @import url("../tools/media-queries.css");
 

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

@@ -0,0 +1,30 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+/* NOTE: This code is required for demo only after
+         `.x-` classes are removed from Core-Styles */
+/*
+.x-link {
+  @mixin link;
+}
+.x-link--disabled {
+  @mixin link--disabled;
+}
+.x-link--hover {
+  @mixin link--hover;
+}
+.x-link--active {
+  @mixin link--active;
+}
+.x-link--irregular {
+  @mixin link--irregular;
+}
+.x-link--irregular--disabled {
+  @mixin link--irregular--disabled;
+}
+.x-link--irregular--hover {
+  @mixin link--irregular--hover;
+}
+.x-link--irregular--active {
+  @mixin link--irregular--active;
+}
+*/

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

@@ -2,9 +2,9 @@ UI states of [`<a>` anchor element](https://developer.mozilla.org/en-US/docs/Web
 
 | Mixin | Description
 | - | -
-| `.x-link`         | default state
-| `.x-link--disabled`| "disabled" state (e.g. no `href` attribute)
-| `.x-link--hover`  | `:hover` state
-| `.x-link--active` | `:active` (click) state
+| `link`         | default state
+| `link--disabled`| "disabled" state (e.g. no `href` attribute)
+| `link--hover`  | `:hover` state
+| `link--active` | `:active` (click) state
 
 <script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

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

@@ -1,5 +1,3 @@
-{{!-- FAQ: The `class` var may be set by patterns including this template --}}
-
 <dl>
   <dt>Standard</dt>
   <dd><span class="x-link">default</span></dd>

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

@@ -1,15 +1,25 @@
-.x-link {
+@define-mixin link {
   color: var(--global-color-accent--normal);
 
   text-decoration: none;
   text-underline-offset: 0.2em;
   text-decoration-thickness: var(--global-border-width--normal);
 }
-.x-link--disabled {
+/* DEPRECATED */
+.x-link {
+  @mixin link;
+}
+
+@define-mixin link--disabled {
   opacity: 0.5;
   pointer-events: none;
 }
-.x-link--hover {
+/* DEPRECATED */
+.x-link--disabled {
+  @mixin link--disabled;
+}
+
+@define-mixin link--hover {
   text-decoration-line: underline;
   text-decoration-style: solid;
 
@@ -17,26 +27,55 @@
   color: var(--global-color-accent--normal);
   text-decoration-thickness: var(--global-border-width--normal);
 }
-.x-link--active {
+/* DEPRECATED */
+.x-link--hover {
+  @mixin link--hover;
+}
+
+@define-mixin link--active {
   text-decoration-line: underline;
   text-decoration-style: dotted;
 }
+/* DEPRECATED */
+.x-link--active {
+  @mixin link--active;
+}
 
-.x-link--irregular {
-  @extend .x-link;
+@define-mixin link--irregular {
+  @mixin link;
 
   text-decoration-line: underline;
 }
+/* DEPRECATED */
+.x-link--irregular {
+  @mixin link--irregular;
+}
+
+@define-mixin link--irregular--disabled {
+  @mixin link--disabled;
+}
+/* DEPRECATED */
 .x-link--irregular--disabled {
-  @extend .x-link--disabled;
+  @mixin link--irregular--disabled;
 }
-.x-link--irregular--hover {
-  @extend .x-link--hover;
+
+
+@define-mixin link--irregular--hover {
+  @mixin link--hover;
 
   text-decoration-style: dashed;
 }
-.x-link--irregular--active {
-  @extend .x-link--active;
+/* DEPRECATED */
+.x-link--irregular--hover {
+  @mixin link--irregular--hover;
+}
+
+@define-mixin link--irregular--active {
+  @mixin link--active;
 
   text-decoration-style: dotted;
 }
+/* DEPRECATED */
+.x-link--irregular--active {
+  @mixin link--irregular--active;
+}

package/src/lib/_imports/tools/x-mailto-text-replace.css

@@ -3,7 +3,7 @@ Mailto Link Text Replacement
 
 Replace mailto link rendered text with virtual text from data-attributes
 
-Styleguide Tools.ExtendsAndMixins.MailtoTextReplace
+Styleguide Tools.Mixins.MailtoTextReplace
 */
 
 /* To replace actual link text with generated link text */

package/src/lib/_imports/tools/x-message/_x-message--classes.hbs

@@ -0,0 +1,5 @@
+| Mixin                 | Usage
+| - | - |
+| `message`             | base class required only for `message--` modifiers
+| `message--type-...`   | express reason for message
+| `message--scope-...`  | define context of message

package/src/lib/_imports/tools/x-message/_x-message--intro.hbs

@@ -0,0 +1 @@
+To notify users for different reasons (type) and at different contexts (scope).