@tacc/core-styles 0.5.1 → 0.5.2-alpha

package/README.md

@@ -2,12 +2,11 @@
 
 The shared styles for TACC WMA Workspace Portals & Websites
 
-> __Notice__: Currently only [Core CMS] is using these styles.
-
 
 ## Related Repositories
 
 - [Core CMS], the base CMS code for TACC WMA CMS Websites
+- [Core Portal], the base Portal code for TACC WMA CMS Websites
 
 
 ## External Project Usage
@@ -92,7 +91,7 @@ Notes:
 #### Build Script
 
 ```js
-const buildStylesheets = require('core-styles');
+const buildStylesheets = require('core-styles').buildStylesheets;
 
 buildStylesheets(
   // Parse CSS files from which directory (required)
@@ -112,8 +111,6 @@ buildStylesheets(
     verbose: true,
     // Print version of this software (optional, default: false)
     version: true,
-    // Extension of CSS files to parse (optional, default: "css")
-    fileExt: 'css',
     // Any value to help identify the build (optional, default: app version)
     buildId: process.env.npm_package_version + someUniqueId
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tacc/core-styles",
-  "version": "0.5.1",
+  "version": "0.5.2-alpha",
   "license": "MIT",
   "author": "TACC ACI WMA <wma-portals@gmail.com>",
   "description": "CSS source and processor for TACC Core-CMS and Core-Portal.",

package/source/_imports/components/c-button.css

@@ -5,7 +5,8 @@ A button that may have icon(s) before and/or after its text.
 
 .c-button--primary - A primary (expected) user action
 .c-button--secondary - For an optional user action
-.c-button--is-active - A button that represents the current state
+.c-button--tertiary - A button that represents inactive buttons among many
+.c-button--is-active - A button that represents the one active button among many
 .c-button--as-link - A button that visually resembles a link
 .c-button--is-busy - A clicked button that started an incomplete process
 
@@ -49,21 +50,18 @@ Styleguide Components.Button
   pointer-events: none;
 }
 
-.c-button:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
 
 
 
 
 /* Modifiers */
 
-
 /* Modifiers: Types */
 
 .c-button--primary,
-.c-button--secondary {
+.c-button--secondary,
+.c-button--tertiary,
+.c-button--is-active {
   padding: 6px 18px;
   min-width: var(--min-width);
   max-width: var(--max-width);
@@ -77,7 +75,7 @@ Styleguide Components.Button
   border-color: var(--global-color-accent--dark);
 }
 
-.c-button--primary:active {
+.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);
@@ -111,12 +109,50 @@ Styleguide Components.Button
 /* Modifiers: Types: Secondary */
 
 .c-button--secondary:hover {
+  color: var(--global-color-primary--xx-dark);
+  background-color: var(--global-color-accent--weak);
+  border-color: var(--global-color-accent--normal);
+}
+
+.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);
+
+  border-width: var(--global-border-width--normal);
+  outline: var(--global-border-width--normal) solid
+    var(--global-color-accent--dark);
+}
+
+.c-button--secondary:focus:not(:active) {
+  color: var(--global-color-primary--xx-dark);
+  background-color: var(--global-color-accent--weak);
+  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) {
+  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 {
+  background-color: var(--global-color-primary--x-light);
+}
+
+/* Modifiers: Types: Tertiary */
+
+.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--secondary:active {
+.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);
@@ -126,7 +162,7 @@ Styleguide Components.Button
     var(--global-color-accent--dark);
 }
 
-.c-button--secondary:focus:not(:active) {
+.c-button--tertiary:focus:not(:active) {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-primary--light);
   border-color: var(--global-color-primary--xx-dark);
@@ -135,8 +171,8 @@ Styleguide Components.Button
     var(--global-color-accent--light);
 }
 
-.c-button--secondary.c-button--is-busy,
-.c-button--secondary:not(
+.c-button--tertiary.c-button--is-busy,
+.c-button--tertiary:not(
   .c-button:hover,
   .c-button:focus,
   .c-button:active,
@@ -149,12 +185,41 @@ Styleguide Components.Button
 
 /* Modifiers: Types: Is Active */
 
+.c-button--is-active:hover {
+  color: var(--global-color-primary--xx-dark);
+  background-color: var(--global-color-accent--alt);
+  border-color: var(--global-color-accent--dark);
+}
+
+.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);
+
+  border-width: var(--global-border-width--normal);
+  outline: var(--global-border-width--normal) solid
+    var(--global-color-accent--dark);
+}
+
+.c-button--is-active:focus:not(:active) {
+  color: var(--global-color-primary--xx-dark);
+  background-color: var(--global-color-accent--alt);
+  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:active,
+  .c-button:disabled
 ) {
+  color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-accent--x-light);
+  border-color: var(--global-color-primary--xx-dark);
 }
 
 /* Modifiers: Types: As Link */
@@ -192,7 +257,7 @@ Styleguide Components.Button
 }
 .c-button--size-small {
   min-width: 0;
-  padding: 3px 9px;
+  padding: 4px 9px;
   line-height: 1;
 }
 

package/source/_imports/components/c-button.html

@@ -4,7 +4,7 @@
 </button>
 
 <button class="c-button c-button--primary">
-  <i class="c-button__icon" data-icon="✓">(check input)</i>
+  <i class="c-button__icon--before" data-icon="✓">(check input)</i>
   <span class="c-button__text">Confirm</span>
   <i class="c-button__icon--after" data-icon="→">(and exit)</i>
 </button>
@@ -14,6 +14,12 @@
   <i class="c-button__icon--after" data-icon="→">(and move to next form)</i>
 </button>
 
+<div class="display: flex; gap: 5px">
+  <button class="c-button c-button--tertiary">1</button>
+  <button class="c-button c-button--tertiary">2</button>
+  <button class="c-button c-button--tertiary">3</button>
+</div>
+
 <button class="c-button c-button--is-active">
   <span class="c-button__text">Current Item</span>
 </button>