@tacc/core-styles 2.0.1 → 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/c-form.hbs

@@ -1,6 +1,9 @@
+{{#warning}}
 <p class="c-message c-message--scope-global">
-  This component currently depends on CMS stylesheets. When this component is used on the Portal, the font size should not be this small. When this component is proven to work independent of CMS, its demo font will not match CMS and this message will be removed.
+  {{{ this }}}
 </p>
+{{/warning}}
+
 <form action="" method="POST" enctype="multipart/form-data" class="c-form">
 
   <h3 class="c-form__title">Title of Form</h3>

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

@@ -1,3 +1,16 @@
-context:
-  shouldLoadCMS: true 
-  📝 shouldLoadCMS: temporary dependence, until proven to work on Portal
+variants:
+  - name: default
+    status: prototype
+    context:
+      warning: This component looks better with <code>elements/form.cms.css</code>, but that styles is not loaded by default. To understand the problem, see "Portal" variant.
+      supportStyles:
+        - ../../assets/components/c-message.css
+  - name: portal
+    context:
+      shouldLoadPortal: true
+      warning: This component looks better with <code>elements/form.cms.css</code>, but that styles is not loaded for this variant. When this component is used on the Portal, those necessary CMS styles are loaded via <code>LoginComponent.module.css</code> specifically for Login page, but incidentally loaded for entire Portal (and thus depended on). When this component is styled accurately independent of CMS, this message should be removed. <small>The solution is likely to change <code>elements/form.cms.css</code> to be <code>elements/form.css</code>.</small>
+  - name: cms
+    label: CMS
+    status: ready
+    context:
+      shouldLoadCMS: true

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

@@ -0,0 +1,23 @@
+@import url("../components/c-message.css");
+@import url("../components/c-message--expanded.css");
+
+
+
+/* Errors */
+
+.c-form > .c-form__errors {
+  @extend :--c-message;
+  @extend :--c-message--type;
+  @extend :--c-message--type-error;
+  @extend :--c-message--scope;
+  @extend :--c-message--scope-section;
+  @extend :--c-message--type-error:--c-message--scope-section;
+}
+.c-form__field .c-form__errors li {
+  @extend :--c-message;
+  @extend :--c-message--type;
+  @extend :--c-message--type-error;
+  @extend :--c-message--scope;
+  @extend :--c-message--scope-inline;
+  @extend :--c-message--type-error:--c-message--scope-inline;
+}

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

@@ -0,0 +1,22 @@
+@import url("../components/c-message.css");
+@import url("../components/c-message--compact.css");
+
+
+
+/* Errors */
+
+.c-form > .c-form__errors {
+  @extend :--c-message;
+  @extend :--c-message--type;
+  @extend :--c-message--type-error;
+  @extend :--c-message--scope;
+  @extend :--c-message--scope-section;
+  @extend :--c-message--type-error:--c-message--scope-section;
+}
+.c-form__field .c-form__errors li {
+  @extend :--c-message;
+  @extend :--c-message--type;
+  @extend :--c-message--type-error;
+  @extend :--c-message--scope;
+  @extend :--c-message--scope-inline;
+}

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

@@ -1,6 +1,4 @@
 @import url("../components/c-button.css");
-@import url("../components/c-message.css");
-@import url('../tools/x-link.css');
 
 
 
@@ -126,18 +124,6 @@ ul.c-form__errors {
   padding-inline: 0;
 }
 
-.c-form > .c-form__errors {
-  @extend .c-message;
-  @extend .c-message--type-error;
-  @extend .c-message--scope-section;
-  @extend .c-message--type-error.c-message--scope-section;
-}
-.c-form__field .c-form__errors li {
-  @extend .c-message;
-  @extend .c-message--type-error;
-  @extend .c-message--scope-inline;
-}
-
 
 
 /* Lists */
@@ -158,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/c-message.hbs

@@ -1 +1 @@
-<!-- SEE: c-message--type(-…), c-message--scope(-…) -->
+<!-- SEE: c-message--type, c-message--scope -->

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

@@ -22,14 +22,30 @@ variants:
   - name: default
     hidden: true
   - name: type
+    label: by Type (Shared)
+    status: prototype
   - name: type-portal
-    label: Type (Portal)
+    label: by Type (Portal)
+    status: ready
     view: 'c-message--type.hbs'
     context:
       shouldLoadPortal: true
+  - name: type-cms
+    label: by Type (CMS)
+    view: 'c-message--type.hbs'
+    context:
+      shouldLoadCMS: true
   - name: scope
+    label: by Scope (Shared)
+    status: prototype
   - name: scope-portal
-    label: Scope (Portal)
+    label: by Scope (Portal)
+    status: ready
     view: 'c-message--scope.hbs'
     context:
       shouldLoadPortal: true
+  - name: scope-cms
+    label: by Scope (CMS)
+    view: 'c-message--scope.hbs'
+    context:
+      shouldLoadCMS: true