@tacc/core-styles 2.0.2 → 2.1.0

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

@@ -1,6 +1,9 @@
+@import url("../objects/o-section.selectors.css");
 @import url("../tools/x-truncate.css");
 @import url('../tools/x-link.css');
 
+@import url("./c-button.selectors.css");
+
 @custom-selector :--disabled
   :disabled,
   :where(a[disabled]);
@@ -11,7 +14,7 @@
 
 /* Base */
 
-.c-button {
+:--c-button {
   --min-width: 75px;
   --mid-width: 110px;
   --max-width: 130px;
@@ -24,34 +27,39 @@
   border-width: var(--global-border-width--normal);
   border-style: solid;
 
-  @extend %x-truncate--one-line;
+  @extend .x-truncate--one-line;
+}
+:--c-button:not(:--disabled) {
+  cursor: pointer; /* WARNING: Opinionated */
 }
-.c-button:not(.c-button--as-link) {
+:--c-button:not(:--c-button--as-link) {
   font-weight: var(--medium);
 }
-a.c-button {
+
+a:--c-button {
   text-decoration: none;
   text-align: center;
 }
-a.c-button--is-busy {
+a:--c-button--is-busy {
   cursor: default;
 }
-.c-button:--disabled {
-  /* WARNING: Opinionated */
-  -webkit-user-select: none;
-  user-select: none;
-}
 
-.c-button:not(:--disabled) {
-  cursor: pointer; /* WARNING: Opinionated */
+:--c-button:--disabled {
+  -webkit-user-select: none;
+  user-select: none; /* WARNING: Opinionated */
 }
-.c-button:--disabled:not(.c-button--is-busy) {
+:--c-button:--disabled:not(
+  :--c-button--is-busy
+) {
   color: var(--global-color-primary--dark);
   border-color: var(--global-color-primary--dark);
 
   pointer-events: none;
 }
-.c-button:--disabled:not(.c-button--is-busy, .c-button--as-link) {
+:--c-button:--disabled:not(
+  :--c-button--is-busy,
+  :--c-button--as-link
+) {
   background-color: var(--global-color-primary--xx-light);
 }
 
@@ -65,10 +73,10 @@ a.c-button--is-busy {
 
 /* Modifiers: Types */
 
-.c-button--primary,
-.c-button--secondary,
-.c-button--tertiary,
-.c-button--is-active {
+:--c-button--primary,
+:--c-button--secondary,
+:--c-button--tertiary,
+:--c-button--is-active {
   padding: 6px 18px;
   min-width: var(--min-width);
   max-width: var(--max-width);
@@ -76,13 +84,15 @@ a.c-button--is-busy {
 
 /* Modifiers: Types: Primary */
 
-.c-button--primary:hover {
+:--c-button--primary:hover {
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-accent--dark);
   border-color: var(--global-color-accent--dark);
 }
 
-.c-button--primary:active:not(.c-button--is-busy) {
+:--c-button--primary:active:not(
+  :--c-button--is-busy
+) {
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-accent--x-dark);
   border-color: var(--global-color-accent--dark);
@@ -92,7 +102,10 @@ a.c-button--is-busy {
     var(--global-color-accent--dark);
 }
 
-.c-button--primary:focus:not(:active, .c-button--is-busy) {
+:--c-button--primary:focus:not(
+  :active,
+  :--c-button--is-busy
+) {
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-accent--normal);
   border-color: var(--global-color-primary--xx-light);
@@ -101,12 +114,12 @@ a.c-button--is-busy {
     var(--global-color-accent--light);
 }
 
-.c-button--primary.c-button--is-busy,
-.c-button--primary:not(
-  .c-button:hover,
-  .c-button:focus,
-  .c-button:active,
-  .c-button:--disabled
+:--c-button--primary:--c-button--is-busy,
+:--c-button--primary:not(
+  :hover,
+  :focus,
+  :active,
+  :--disabled
 ) {
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-accent--normal);
@@ -115,13 +128,15 @@ a.c-button--is-busy {
 
 /* Modifiers: Types: Secondary */
 
-.c-button--secondary:hover {
+:--c-button--secondary:hover {
   color: var(--global-color-primary--xx-dark);
-  background-color: var(--global-color-accent--weak);
+  background-color: var(--global-color-accent--x-light);
   border-color: var(--global-color-accent--normal);
 }
 
-.c-button--secondary:active:not(.c-button--is-busy) {
+:--c-button--secondary:active:not(
+  :--c-button--is-busy
+) {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-accent--x-light);
   border-color: var(--global-color-accent--dark);
@@ -131,35 +146,48 @@ a.c-button--is-busy {
     var(--global-color-accent--dark);
 }
 
-.c-button--secondary:focus:not(:active, .c-button--is-busy) {
+:--c-button--secondary:focus:not(
+  :active,
+  :--c-button--is-busy
+) {
   color: var(--global-color-primary--xx-dark);
-  background-color: var(--global-color-accent--weak);
+  background-color: var(--global-color-accent--x-light);
   border-color: var(--global-color-primary--xx-dark);
 
   outline: var(--global-border-width--thick) solid
     var(--global-color-accent--light);
 }
 
-.c-button--secondary.c-button--is-busy,
-.c-button--secondary:not(.c-button:hover, .c-button:focus, .c-button:active, .c-button:--disabled) {
+:--c-button--secondary:--c-button--is-busy,
+:--c-button--secondary:not(
+  :hover,
+  :focus,
+  :active,
+  :--disabled
+) {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-primary--x-light);
   border-color: var(--global-color-primary--xx-dark);
 }
 
-.c-button/* for specificity to override */.c-button--secondary:--disabled {
+/* To handle (what?) edge case */
+/* FAQ: Extra specificity is to override (...what?) */
+/* HELP: Document this fix */
+:--c-button:--c-button--secondary:--disabled {
   background-color: var(--global-color-primary--x-light);
 }
 
 /* Modifiers: Types: Tertiary */
 
-.c-button--tertiary:hover {
+:--c-button--tertiary:hover {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-primary--light);
   border-color: var(--global-color-accent--dark);
 }
 
-.c-button--tertiary:active:not(.c-button--is-busy) {
+:--c-button--tertiary:active:not(
+  :--c-button--is-busy
+) {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-accent--x-light);
   border-color: var(--global-color-accent--dark);
@@ -169,7 +197,10 @@ a.c-button--is-busy {
     var(--global-color-accent--dark);
 }
 
-.c-button--tertiary:focus:not(:active, .c-button--is-busy) {
+:--c-button--tertiary:focus:not(
+  :active,
+  :--c-button--is-busy
+) {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-primary--light);
   border-color: var(--global-color-primary--xx-dark);
@@ -178,12 +209,12 @@ a.c-button--is-busy {
     var(--global-color-accent--light);
 }
 
-.c-button--tertiary.c-button--is-busy,
-.c-button--tertiary:not(
-  .c-button:hover,
-  .c-button:focus,
-  .c-button:active,
-  .c-button:--disabled
+:--c-button--tertiary:--c-button--is-busy,
+:--c-button--tertiary:not(
+  :hover,
+  :focus,
+  :active,
+  :--disabled
 ) {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-primary--xx-light);
@@ -192,13 +223,13 @@ a.c-button--is-busy {
 
 /* Modifiers: Types: Is Active */
 
-.c-button--is-active:hover {
+:--c-button--is-active:hover {
   color: var(--global-color-primary--xx-dark);
-  background-color: var(--global-color-accent--alt);
+  background-color: var(--global-color-accent--xx-light);
   border-color: var(--global-color-accent--dark);
 }
 
-.c-button--is-active:active {
+:--c-button--is-active:active {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-accent--x-light);
   border-color: var(--global-color-accent--dark);
@@ -208,21 +239,23 @@ a.c-button--is-busy {
     var(--global-color-accent--dark);
 }
 
-.c-button--is-active:focus:not(:active) {
+:--c-button--is-active:focus:not(
+  :active
+) {
   color: var(--global-color-primary--xx-dark);
-  background-color: var(--global-color-accent--alt);
+  background-color: var(--global-color-accent--xx-light);
   border-color: var(--global-color-primary--xx-dark);
 
   outline: var(--global-border-width--thick) solid
     var(--global-color-accent--light);
 }
 
-.c-button--is-active.c-button--is-busy,
-.c-button--is-active:not(
-  .c-button:hover,
-  .c-button:focus,
-  .c-button:active,
-  .c-button:--disabled
+:--c-button--is-active:--c-button--is-busy,
+:--c-button--is-active:not(
+  :hover,
+  :focus,
+  :active,
+  :--disabled
 ) {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-accent--x-light);
@@ -231,7 +264,7 @@ a.c-button--is-busy {
 
 /* Modifiers: Types: As Link */
 
-.c-button--as-link {
+:--c-button--as-link {
   @extend .x-link;
 
   background: unset;
@@ -241,19 +274,19 @@ a.c-button--is-busy {
   font-size: inherit;
   font-family: inherit;
 }
-.c-button--as-link:where(:not(:--disabled)):hover {
+:--c-button--as-link:where(:not(:--disabled)):hover {
   @extend .x-link--hover;
 }
-.c-button--as-link:where(:not(:--disabled)):active {
+:--c-button--as-link:where(:not(:--disabled)):active {
   @extend .x-link--active;
 }
 
 /* Modifiers: Types: Is Busy */
 
-.c-button--is-busy {
+:--c-button--is-busy {
   opacity: 0.5;
 }
-.c-button--is-busy .c-button__text {
+:--c-button--is-busy :--c-button__text {
   opacity: 0.3;
 }
 
@@ -261,26 +294,26 @@ a.c-button--is-busy {
 
 /* Modifiers: Sizes */
 
-.c-button:not(
-  .c-button--width-short,
-  .c-button--width-medium,
-  .c-button--width-long,
-  .c-button--size-small,
-  .c-button--as-link
+:--c-button:not(
+  :--c-button--width-short,
+  :--c-button--width-medium,
+  :--c-button--width-long,
+  :--c-button--size-small,
+  :--c-button--as-link
 ) {
   width: auto;
   --max-width: auto;
 }
-.c-button--width-short {
+:--c-button--width-short {
   width: var(--min-width);
 }
-.c-button--width-medium {
+:--c-button--width-medium {
   width: var(--mid-width);
 }
-.c-button--width-long {
+:--c-button--width-long {
   width: var(--max-width);
 }
-.c-button--size-small {
+:--c-button--size-small {
   min-width: 0;
   padding: 4px 9px;
   line-height: 1;
@@ -292,13 +325,13 @@ a.c-button--is-busy {
 
 /* Elements */
 
-.c-button > * {
+:--c-button > * {
   vertical-align: middle;
 }
 
-.c-button__icon--before {
+:--c-button__icon--before {
   margin-right: 0.5em;
 }
-.c-button__icon--after {
+:--c-button__icon--after {
   margin-left: 0.5em;
 }

package/src/lib/_imports/components/c-button.selectors.css

@@ -0,0 +1,44 @@
+@import url("../tools/selectors.css");
+
+@custom-selector :--c-button
+    .c-button,
+    [class*="button--"];
+
+@custom-selector :--c-button--primary
+    .c-button--primary,
+    .button--1;
+@custom-selector :--c-button--secondary
+    .c-button--secondary,
+    .button--2;
+@custom-selector :--c-button--tertiary
+    .c-button--tertiary,
+    .button--3;
+
+@custom-selector :--c-button--is-active
+    [class*="button--is-active"];
+@custom-selector :--c-button--is-busy
+    [class*="button--is-busy"];
+@custom-selector :--c-button--as-link
+    [class*="button--as-link"];
+
+@custom-selector :--c-button--width-long
+    [class*="button--width-long"];
+@custom-selector :--c-button--width-medium
+    [class*="button--width-medium"];
+@custom-selector :--c-button--width-short
+    [class*="button--width-short"];
+@custom-selector :--c-button--width
+    [class*="button--width-"];
+
+@custom-selector :--c-button--size-small
+    [class*="button--size-small"];
+
+@custom-selector :--c-button__text
+    [class*="button__text"];
+
+@custom-selector :--c-button__icon
+    [class*="button__icon"];
+@custom-selector :--c-button__icon--before
+    [class*="button__icon--before"];
+@custom-selector :--c-button__icon--after
+    [class*="button__icon--after"];

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

@@ -141,7 +141,7 @@ Styleguide Components.Callout
 /* Style */
 
 .c-callout {
-  background-color: var(--global-color-link-on-light--normal);
+  background-color: var(--global-color-accent--normal);
 }
 
 /* Make all headings look the same */

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

@@ -1,6 +1,7 @@
 @import url("../objects/o-section.selectors.css");
 @import url("../tools/selectors.css");
 
+@import url("./c-button.selectors.css");
 @import url("./c-card.selectors.css");
 
 
@@ -104,7 +105,7 @@
 /* Structure */
 
 /* Elements */
-:--c-card > a:not(.c-button) {
+:--c-card > a:not(:--c-button) {
     display: inline-block; /* FAQ: for actions that do not yet have this */
 }
 :--c-card > :is(:--action) {
@@ -172,7 +173,7 @@
 
 /* To make buttons bold */
 /* TODO: Determine whether this should apply to all CMS buttons */
-:--c-card a.c-button {
+:--c-card a:--c-button {
     font-weight: var(--bold);
 }
 

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

@@ -144,19 +144,19 @@ ul.c-form__errors {
 
 /* To style obvious buttons that neglect class */
 .c-form__buttons button[type="submit"] {
-  @extend .c-button;
-  @extend .c-button--primary;
+  @extend :--c-button;
+  @extend :--c-button--primary;
 }
 
 .c-form__button {
-  @extend .c-button;
+  @extend :--c-button;
 }
 .c-form__button[type="submit"] {
-  @extend .c-button--primary;
+  @extend :--c-button--primary;
 }
 .c-form__button:where(:not([type="submit"], [type="reset"])) {
-  @extend .c-button--secondary;
+  @extend :--c-button--secondary;
 }
 .c-form__button[type="reset"] {
-  @extend .c-button--tertiary;
+  @extend :--c-button--tertiary;
 }

package/src/lib/_imports/components/c-message/_c-message--single.hbs

@@ -1,3 +1,3 @@
 <div class="c-message c-message--type-{{ type }} c-message--scope-{{ scope }}">
-  <p><strong>{{ title }}:</strong> {{{ content }}}</p>
+  <p><strong>{{ title }}:</strong> {{{ content }}} <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.</p>
 </div>

package/src/lib/_imports/components/c-message/config.yml

@@ -2,22 +2,22 @@ status: wip
 context:
   types:
     - name: success
-      content: Notify user of a successful event. <a href>Sample link.</a>
+      content: Notify user of a successful event.
     - name: info
-      content: Notify user of any details that are <strong>not</strong> a problem. <a href>Sample link.</a>
+      content: Notify user of any details that are <strong>not</strong> a problem.
     - name: warning
-      content: Notify user of an <strong>un</strong>successful event that <em>could prevent</em> functionality. <a href>Sample link.</a>
+      content: Notify user of an <strong>un</strong>successful event that <em>could prevent</em> functionality.
     - name: error
-      content: Notify user of an <strong>un</strong>successful event that <em>does prevent</em> functionality. <a href>Sample link.</a>
+      content: Notify user of an <strong>un</strong>successful event that <em>does prevent</em> functionality.
   scopes:
     - name: inline
-      content: 	An inline message. <a href>Sample link.</a>
+      content: 	An inline message.
     - name: section
-      content: A wide block message. <a href>Sample link.</a>
+      content: A wide block message.
     # - name: app
-    #   content: A floating block message. <a href>Sample link.</a>
+    #   content: A floating block message.
     - name: global
-      content: A site-wide banner message. <a href>Sample link.</a>
+      content: A site-wide banner message.
 variants:
   - name: default
     hidden: true

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

@@ -1,5 +1,6 @@
 @import url('../tools/x-link.css');
 
+@import url("./c-button.selectors.css");
 @import url("./c-message.selectors.css");
 
 
@@ -8,21 +9,21 @@
 
 /* To avoid clash of link color with message color */
 :--c-message a,
-:--c-message .c-button--as-link {
+:--c-message :--c-button--as-link {
   color: inherit !important; /* override :hover and :active */
 }
 
 /* To distinguish link from message text */
 :--c-message a,
-:--c-message .c-button--as-link {
+:--c-message :--c-button--as-link {
   @extend .x-link--irregular;
 }
 :--c-message a:hover,
-:--c-message .c-button--as-link:hover {
+:--c-message :--c-button--as-link:hover {
   @extend .x-link--irregular--hover;
 }
 :--c-message a:active,
-:--c-message .c-button--as-link:active {
+:--c-message :--c-button--as-link:active {
   @extend .x-link--irregular--active;
 }
 

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

@@ -1,5 +1,6 @@
 @import url('../tools/x-link.css');
 
+@import url("./c-button.selectors.css");
 @import url("./c-message.selectors.css");
 
 
@@ -8,21 +9,21 @@
 
 /* To avoid clash of link color with message color */
 :--c-message--scope-global a,
-:--c-message--scope-global .c-button--as-link {
+:--c-message--scope-global :--c-button--as-link {
   color: inherit !important; /* override :hover and :active */
 }
 
 /* To distinguish link from message text */
 :--c-message--scope-global a,
-:--c-message--scope-global .c-button--as-link {
+:--c-message--scope-global :--c-button--as-link {
   @extend .x-link--irregular;
 }
 :--c-message--scope-global a:hover,
-:--c-message--scope-global .c-button--as-link:hover {
+:--c-message--scope-global :--c-button--as-link:hover {
   @extend .x-link--irregular--hover;
 }
 :--c-message--scope-global a:active,
-:--c-message--scope-global .c-button--as-link:active {
+:--c-message--scope-global :--c-button--as-link:active {
   @extend .x-link--irregular--active;
 }
 

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

@@ -7,6 +7,7 @@ Markup: c-page.html
 
 Styleguide Components.Pagination
 */
+@import url('../components/c-button.selectors.css');
 
 
 
@@ -52,7 +53,7 @@ ul.c-page-list {
   top: var(--vert-offset);
   bottom: var(--vert-offset);
 }
-.c-page-link--always-click.c-button {
+.c-page-link--always-click:--c-button {
   overflow: visible; /* overwrite `.c-button` so pseudo elements show */
 }
 .c-page-link--always-click::before { right: var(--horz-offset) }

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

@@ -65,16 +65,13 @@ Styleguide Components.Recognition
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-primary--xx-dark);
 }
-.c-recognition--style-dark a {
-  color: var(--global-color-link-on-dark--normal);
-}
 .c-recognition--style-dark h1,
 .c-recognition--style-dark h2,
 .c-recognition--style-dark h3,
 .c-recognition--style-dark h4,
 .c-recognition--style-dark h5,
 .c-recognition--style-dark h6 {
-  color: var(--global-color-accent--normal);
+  color: var(--global-color-accent--dark);
 }
 
 
@@ -89,9 +86,6 @@ Styleguide Components.Recognition
   border-style: solid;
   border-color: var(--global-color-primary--xx-dark);
 }
-.c-recognition--style-light a {
-  color: var(--global-color-link-on-light--normal);
-}
 .c-recognition--style-light h1,
 .c-recognition--style-light h2,
 .c-recognition--style-light h3,

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

@@ -158,19 +158,19 @@ ul.checkboxselectmultiple {
 
 /* To style obvious buttons that neglect class */
 .button-wrapper button[type="submit"] {
-  @extend .c-button;
-  @extend .c-button--primary;
+  @extend :--c-button;
+  @extend :--c-button--primary;
 }
 
 .form-button {
-  @extend .c-button;
+  @extend :--c-button;
 }
 .form-button[type="submit"] {
-  @extend .c-button--primary;
+  @extend :--c-button--primary;
 }
 .form-button:where(:not([type="submit"], [type="reset"])) {
-  @extend .c-button--secondary;
+  @extend :--c-button--secondary;
 }
 .form-button[type="reset"] {
-  @extend .c-button--tertiary;
+  @extend :--c-button--tertiary;
 }