@tacc/core-styles 2.30.1 → 2.32.0

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

@@ -1,5 +1,4 @@
-@import url("../components/c-message.css");
-@import url("../components/c-message--expanded.css");
+@import url("../tools/x-message.css");
 @import url("../tools/selectors.form.css");
 
 
@@ -7,18 +6,12 @@
 /* Errors */
 
 :--form__errors--form {
-  @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;
+  @mixin message;
+  @mixin message--scope-section;
+  @mixin message--type-error---message--scope-section;
 }
 :--form__errors--field 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;
+  @mixin message;
+  @mixin message--scope-inline;
+  @mixin message--type-error---message--scope-inline;
 }

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

@@ -1,5 +1,4 @@
-@import url("../components/c-message.css");
-@import url("../components/c-message--compact.css");
+@import url("../tools/x-message.css");
 @import url("../tools/selectors.form.css");
 
 
@@ -7,17 +6,12 @@
 /* Errors */
 
 :--form__errors--form {
-  @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;
+  @mixin message;
+  @mixin message--scope-section;
+  @mixin message--type-error---message--scope-section;
 }
 :--form__errors--field li {
-  @extend :--c-message;
-  @extend :--c-message--type;
-  @extend :--c-message--type-error;
-  @extend :--c-message--scope;
-  @extend :--c-message--scope-inline;
+  @mixin message;
+  @mixin message--scope-inline;
+  @mixin message--type-error---message--scope-inline;
 }

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

@@ -2,6 +2,7 @@
     type=this.type
     scope=this.scope
     title=this.title
+    needs=this.needs
     content=this.content
     extra_content='<a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.'
 }}

package/src/lib/_imports/components/c-message/c-message--scope.hbs

@@ -2,10 +2,10 @@
   {{#each scopes}}
   <dt>Scope <strong>{{ this.name }}</strong></dt>
   <dd>
-    {{> @c-message--single scope=this.name
-        type="success" title="Success" content=this.content}}
     {{> @c-message--single scope=this.name
         type="info" title="Info" content=this.content}}
+    {{> @c-message--single scope=this.name
+        type="success" title="Success" content=this.content}}
     {{> @c-message--single scope=this.name
         type="warning" title="Warning" content=this.content}}
     {{> @c-message--single scope=this.name

package/src/lib/_imports/components/c-message/c-message--type.hbs

@@ -6,8 +6,6 @@
         scope="inline" title="Inline" content=this.content}}
     {{> @c-message--single type=this.name
         scope="section" title="Section" content=this.content}}
-    <!--{{> @c-message--single type=this.name
-        scope="app" title="App" content=this.content}}-->
     {{> @c-message--single type=this.name
         scope="global" title="Global" content=this.content}}
   </dd>

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

@@ -1,29 +1,27 @@
-status: wip
+status: ready
 context:
   types:
-    - name: success
-      content: Notify user of a successful event.
     - name: info
       content: Notify user of any details that are <strong>not</strong> a problem.
+    - name: success
+      content: Notify user of a successful event.
     - name: warning
       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.
   scopes:
     - name: inline
-      content: 	An inline message.
+      content: An inline message.
     - name: section
       content: A wide block message.
-    # - name: app
-    #   content: A floating block message.
     - name: global
       content: A site-wide banner message.
 variants:
   - name: default
     hidden: true
   - name: type
-    label: by Type (Shared)
-    status: prototype
+    label: by Type
+    status: ready
   - name: type-portal
     label: by Type (Portal)
     status: ready
@@ -36,8 +34,8 @@ variants:
     context:
       shouldLoadCMS: true
   - name: scope
-    label: by Scope (Shared)
-    status: prototype
+    label: by Scope
+    status: ready
   - name: scope-portal
     label: by Scope (Portal)
     status: ready

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

@@ -1,66 +1,29 @@
-@import url('../tools/x-link.css');
+@import url('../tools/x-message.css');
 
-@import url("./c-button.selectors.css");
 @import url("./c-message.selectors.css");
 
 
 
-/* Elements */
-
-/* To avoid clash of link color with message color */
-:--c-message a,
-:--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 {
-  @mixin link--irregular;
-}
-:--c-message a:hover,
-:--c-message :--c-button--as-link:hover {
-  @mixin link--irregular--hover;
-}
-:--c-message a:active,
-:--c-message :--c-button--as-link:active {
-  @mixin link--irregular--active;
-}
-
-
-
-/* Modifiers */
-
-/* Structure */
-
-:--c-message--scope-inline,
-:--c-message--scope-section,
-:--c-message--scope-global {
+:--c-message {
   font-size: var(--global-font-size--small);
 }
 
-:--c-message--scope-section {
-  --pad-vert: 15px;
-  --pad-horz: 20px;
-
-  border-width: var(--global-border-width--thick);
-  border-style: solid;
+:--c-message--type-info:--c-message--scope-section:--c-message--has-icon {
+  &::before { display: none; }
 }
 
-/* Skin */
-
-:--c-message--type-info:not(:--c-message--scope-global) {
-  color: var(--global-color-info--dark);
-}
-:--c-message--type-success:not(:--c-message--scope-global) {
-  color: var(--global-color-success--dark);
-}
-:--c-message--type-warning:not(:--c-message--scope-global) {
-  color: var(--global-color-warning--dark);
+:--c-message--type-success:--c-message--scope-section {
+  @mixin message--has-icon---message--type-success;
+  @mixin message--has-icon---message--scope-section;
+  @mixin message--has-icon;
 }
-:--c-message--type-error:not(:--c-message--scope-global) {
-  color: var(--global-color-danger--dark);
+:--c-message--type-warning:--c-message--scope-section {
+  @mixin message--has-icon---message--type-warning;
+  @mixin message--has-icon---message--scope-section;
+  @mixin message--has-icon;
 }
-:--c-message--type-tip:not(:--c-message--scope-global) {
-  color: var(--global-color-extra--dark);
+:--c-message--type-error:--c-message--scope-section {
+  @mixin message--has-icon---message--type-error;
+  @mixin message--has-icon---message--scope-section;
+  @mixin message--has-icon;
 }

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

@@ -1,133 +1,7 @@
-@import url('../tools/x-link.css');
-
-@import url("./c-button.selectors.css");
 @import url("./c-message.selectors.css");
 
-
-
-/* Elements */
-
-/* To avoid clash of link color with message color */
-:--c-message--scope-global a,
-:--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 {
-  @mixin link--irregular;
-}
-:--c-message--scope-global a:hover,
-:--c-message--scope-global :--c-button--as-link:hover {
-  @mixin link--irregular--hover;
-}
-:--c-message--scope-global a:active,
-:--c-message--scope-global :--c-button--as-link:active {
-  @mixin link--irregular--active;
-}
-
-
-
-/* Modifiers */
-
-/* Structure */
-@define-mixin message--scope-section {
-  color: var(--global-color-primary--dark);
-
-  --pad-vert: 20px;
-  --pad-horz: 30px;
-
-  border-width: var(--global-border-width--normal);
-  border-style: solid;
-}
-:--c-message--scope-section {
-  @mixin message--scope-section;
-}
-
-@define-mixin message--type-info---message--scope-inline {
-  color: var(--global-color-info--x-dark);
-}
-:--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-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-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-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 */
-@define-mixin message--type-info {
-  &::before {
-    background-color: var(--global-color-info--normal);
-  }
-}
-
-:--c-message--type-info {
-  @mixin message--type-info;
-}
-
-@define-mixin message--type-success {
-  &::before {
-    background-color: var(--global-color-success--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-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--scope-section,
+:--c-message--scope-global {
+  padding-block: 20px;
+  padding-inline: 30px;
 }

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

@@ -1,106 +1,57 @@
-@import url("./c-message.selectors.css");
-
-
-
-/* Elements */
+@import url('../tools/x-message.css');
 
-/* To prevent excess space at top and bottom of message */
+@import url("./c-message.selectors.css");
 
-@define-mixin message {
-  & > *:first-child {
-    margin-top: 0;
-  }
 
-  & > *:last-child {
-    margin-bottom: 0;
-  }
-}
 
 :--c-message {
   @mixin message;
 }
 
-
-
-/* Modifiers */
-
-/* Modifiers: Structure */
-
-:--c-message--scope-inline,
-:--c-message--scope-section,
-:--c-message--scope-global,
-:--c-message--type-info,
-:--c-message--type-success,
-:--c-message--type-warning,
-:--c-message--type-error,
-:--c-message--type-tip {
-  /* FAQ: So alternate class name @extend can not fail on missing selectors */
+:--c-message--scope-inline {
+  @mixin message--scope-inline;
 }
-:--c-message--scope {
-  /* FAQ: Variables allow using this values outside of parent padding */
-  /* SEE: ./admonition.css */
-  padding: var(--pad-vert, 0) var(--pad-horz, 0);
+:--c-message--type-info:--c-message--scope-inline {
+  @mixin message--type-info---message--scope-inline;
 }
-:--c-message--scope-global {
-  --pad-vert: 15px;
-  --pad-horz: 20px;
-
-  border-width: var(--global-border-width--thick);
-
-  text-align: center;
+:--c-message--type-success:--c-message--scope-inline {
+  @mixin message--type-success---message--scope-inline;
+  @mixin message--has-icon---message--type-success;
+  @mixin message--has-icon;
 }
-
-/* Modifiers: Skin */
-
-:--c-message--type {
-  /* To let clients prematurely @extend (to reduce their later maintenance) */
+:--c-message--type-warning:--c-message--scope-inline {
+  @mixin message--type-warning---message--scope-inline;
+  @mixin message--has-icon---message--type-warning;
+  @mixin message--has-icon;
 }
-@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-error:--c-message--scope-inline {
+  @mixin message--type-error---message--scope-inline;
+  @mixin message--has-icon---message--type-error;
+  @mixin message--has-icon;
 }
-:--c-message--type-info:--c-message--scope-section {
-  @mixin message--type-info---message--scope-section;
+:--c-message--type-extra:--c-message--scope-inline {
+  @mixin message--type-extra---message--scope-inline;
 }
 
-@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--scope-section {
+  @mixin message--scope-section;
+}
+:--c-message--type-info:--c-message--scope-section {
+  @mixin message--type-info---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-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-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--type-extra:--c-message--scope-section {
+  @mixin message--type-extra---message--scope-section;
 }
 
-@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-message.selectors.css

@@ -18,6 +18,9 @@
 @custom-selector :--c-message--type-error
     .c-message--type-error,
     .message--type-error;
+@custom-selector :--c-message--type-extra
+    .c-message--type-extra,
+    .message--type-extra;
 
 @custom-selector :--c-message--scope
     [class*="message--scope-"];
@@ -30,3 +33,7 @@
 @custom-selector :--c-message--scope-global
     .c-message--scope-global,
     .message--scope-global;
+
+@custom-selector :--c-message--has-icon
+    .c-message--has-icon,
+    .message--has-icon;

package/src/lib/_imports/core-styles.demo.css

@@ -20,7 +20,6 @@
 
 /* COMPONENTS */
 @import url("./components/c-message.css");
-@import url("./components/c-message--expanded.css");
 @import url("./components/demo.css");
 
 /* TRUMPS */

package/src/lib/_imports/generics/fonts.css

@@ -62,7 +62,7 @@ Styleguide Generics.Fonts
 @font-face {
   font-family: 'Benton Sans';
   src: url("../../fonts/BentonSans-Black.otf") format("opentype");
-  font-weight: 800;
+  font-weight: 900;
   font-style: normal;
   font-display: swap;
 }

package/src/lib/_imports/settings/color/color.hbs

@@ -51,7 +51,7 @@
             {{> @color--swatch name="--global-color-accent--xxx-dark"}}
           </div>
         </dd>
-        <dt>Alternatives</dt>
+        <dt>Deprecated</dt>
         <dd>
           <div class="demo-palette">
             {{> @color--swatch name="--global-color-accent--secondary"}}
@@ -84,7 +84,7 @@
             {{> @color--swatch name="--global-color-secondary--xxx-dark"
                 not-available="true"}}
         </dd>
-        <dt>Alias</dt>
+        <dt>Deprecated</dt>
         <dd>
           <div class="demo-palette">
             {{> @color--swatch name="--global-color-accent--secondary"}}
@@ -117,7 +117,7 @@
                 not-available="true"}}
           </div>
         </dd>
-        <dt>Alias</dt>
+        <dt>Deprecated</dt>
         <dd>
           <div class="demo-palette">
             {{> @color--swatch name="--global-color-accent--tertiary"}}
@@ -141,7 +141,7 @@
             {{> @color--swatch name="--global-color-info--x-dark"}}
           </div>
         </dd>
-        <dt>Alternates</dt>
+        <dt>Deprecated</dt>
         <dd>
           <div class="demo-palette">
             {{> @color--swatch name="--global-color-info--weak"
@@ -167,7 +167,7 @@
             {{> @color--swatch name="--global-color-danger--x-dark"}}
           </div>
         </dd>
-        <dt>Alternates</dt>
+        <dt>Deprecated</dt>
         <dd>
           <div class="demo-palette">
             {{> @color--swatch name="--global-color-danger--weak"
@@ -193,7 +193,7 @@
             {{> @color--swatch name="--global-color-warning--x-dark"}}
           </div>
         </dd>
-        <dt>Alternates</dt>
+        <dt>Deprecated</dt>
         <dd>
           <div class="demo-palette">
             {{> @color--swatch name="--global-color-warning--weak"
@@ -219,7 +219,7 @@
             {{> @color--swatch name="--global-color-success--x-dark"}}
           </div>
         </dd>
-        <dt>Alternates</dt>
+        <dt>Deprecated</dt>
         <dd>
           <div class="demo-palette">
             {{> @color--swatch name="--global-color-success--weak"
@@ -245,7 +245,7 @@
             {{> @color--swatch name="--global-color-extra--x-dark"}}
           </div>
         </dd>
-        <dt>Alternates</dt>
+        <dt>Deprecated</dt>
         <dd>
           <div class="demo-palette">
             {{> @color--swatch name="--global-color-extra--weak"

package/src/lib/_imports/settings/color/config.yml

@@ -1,19 +1,4 @@
-variants:
-  - name: default
-  - name: cms
-    status: ready
-    label: (CMS) Color
-    context:
-      shouldLoadCMS: true
-      shouldLoadBootstrap: true
-  - name: docs
-    status: ready
-    label: (Docs) Color
-    context:
-      shouldLoadDocs: true
-  - name: portal
-    status: wip
-    label: (Portal) Color
-    context:
-      shouldLoadPortal: true
-      shouldLoadBootstrap: true
+context:
+  # FAQ: Demo looks nicer with CMS styles
+  shouldLoadCMS: true
+  shouldLoadBootstrap: true

package/src/lib/_imports/settings/color--cms.css

@@ -1,2 +1,21 @@
-/* Support the default accent color in all the scopes */
-@import url("./color--demo.css");
+@import url("../settings/color.accent.css");
+@import url("../objects/o-section.selectors.css");
+@import url("../components/c-card.selectors.css");
+
+/* Set scope for accent colors */
+
+@custom-selector :--light-context
+  .c-recognition--style-light,
+  :--o-section--muted,
+  :--o-section--light,
+  :--c-card--standard,
+  :--c-card--standard-N,
+  :--c-card--plain;
+@custom-selector :--dark-context
+  .c-recognition--style-dark,
+  :--o-section--dark;
+
+@custom-selector :--light-context-safe
+  :where(:--dark-context :--light-context);
+@custom-selector :--dark-context-safe
+  :where(:--dark-context:not(:--light-context *));