@tacc/core-styles 2.30.0 → 2.31.0

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/settings/color--portal.css

@@ -13,28 +13,4 @@
   --global-color-accent--alt: #d2cce7;
   /* TODO: Update clients to use --global-color-accent--x-light instead */
   --global-color-accent--weak: #6039cc40; /* similar to #E3D7FD on #f4f4f4 */
-
-  --global-color-success--x-light: #E7F9E5;
-  --global-color-success--light: #AFECA7;
-  --global-color-success--normal: #43d130;
-  --global-color-success--dark: #237119;
-  --global-color-success--x-dark: #263824;
-
-  --global-color-success--weak: #43d13020;
-
-  --global-color-warning--x-light: #FDFDEA;
-  --global-color-warning--light: #F2F06F;
-  --global-color-warning--normal: #E9E000;
-  --global-color-warning--dark: #735911;
-  --global-color-warning--x-dark: #3A3320;
-
-  --global-color-warning--weak: #DFA70C20;
-
-  --global-color-danger--x-light: #FDF1F1;
-  --global-color-danger--light: #F8C9C9;
-  --global-color-danger--normal: #F09393;
-  --global-color-danger--dark: #AF1818;
-  --global-color-danger--x-dark: #3C3030;
-
-  --global-color-danger--weak: #F0939320;
 }

package/src/lib/_imports/settings/font.css

@@ -28,6 +28,7 @@ Styleguide Settings.CustomProperties.Font
   --sans--portal: "Roboto", sans-serif;
   --serif: sans-serif;
   --mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+  --icon: "Hiragino Sans", monospace;
 
   /* Weight */
   /* https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */

package/src/lib/_imports/tools/x-drop-cap/config.yml

@@ -0,0 +1,4 @@
+status: ready
+context:
+  supportStyles:
+    - ../../assets/tools/x-drop-cap.demo.css

package/src/lib/_imports/tools/x-drop-cap/readme.md

@@ -0,0 +1,3 @@
+Create a "drop-cap", [a type of an initial](https://en.wikipedia.org/wiki/Initial#Types_of_initial), a letter at the beginning of a word, a chapter, or a paragraph that is larger than the rest of the text.
+
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/tools/x-drop-cap/x-drop-cap.hbs

@@ -0,0 +1,4 @@
+<dl>
+  <dt>Via (<code>-webkit</code>)<code>initial-letter</code></dt>
+  <dd><p class="x-drop-cap">The first letter of this sentence will be a drop-cap on modern updated browsers. {{> @text-of-one-paragraph-short }}</p></dd>
+</dl>

package/src/lib/_imports/tools/x-drop-cap.css

@@ -0,0 +1,11 @@
+@define-mixin drop-cap {
+  @supports (initial-letter: 3) {
+    padding-right: 1em;
+    initial-letter: 3;
+  }
+  @supports (-webkit-initial-letter: 3) {
+    padding-right: 1em;
+    -webkit-initial-letter: 3;
+    font-family: Arial;
+  }
+}

package/src/lib/_imports/tools/x-drop-cap.demo.css

@@ -0,0 +1,9 @@
+@import url("./x-drop-cap.css");
+
+/* FAQ: Wrapped to deter clients from using `.x-message` */
+/* HACK: Not in `x-message/demo.css` because it is not processed */
+#demo {
+  .x-drop-cap::first-letter {
+    @mixin drop-cap;
+  }
+}

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

@@ -3,6 +3,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/tools/x-message/config.yml

@@ -1,12 +1,12 @@
-status: wip
+status: ready
 context:
   supportStyles:
     - ../../assets/tools/x-message.demo.css
   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
@@ -25,31 +25,7 @@ variants:
     hidden: true
   - name: type
     label: by Type
-    status: prototype
-  - name: type-portal
-    label: by Type (Portal)
-    status: ready
-    view: 'x-message--type.hbs'
-    context:
-      shouldLoadPortal: true
-  - name: type-cms
-    label: by Type (CMS)
     status: ready
-    view: 'x-message--type.hbs'
-    context:
-      shouldLoadCMS: true
   - name: scope
     label: by Scope
-    status: prototype
-  - name: scope-portal
-    label: by Scope (Portal)
-    status: ready
-    view: 'x-message--scope.hbs'
-    context:
-      shouldLoadPortal: true
-  - name: scope-cms
-    label: by Scope (CMS)
     status: ready
-    view: 'x-message--scope.hbs'
-    context:
-      shouldLoadCMS: true

package/src/lib/_imports/tools/x-message/x-message--scope.hbs

@@ -2,14 +2,26 @@
   {{#each scopes}}
   <dt>Scope <strong>{{ this.name }}</strong></dt>
   <dd>
-    {{> @x-message--single scope=this.name
-        type="success" title="Success" content=this.content}}
     {{> @x-message--single scope=this.name
         type="info" title="Info" content=this.content}}
+    {{> @x-message--single scope=this.name
+        type="success" title="Success" content=this.content}}
     {{> @x-message--single scope=this.name
         type="warning" title="Warning" content=this.content}}
     {{> @x-message--single scope=this.name
         type="error" title="Error" content=this.content}}
   </dd>
+  {{#if (eq this.name "section")}}
+  <dd>
+    {{> @x-message--single scope=this.name
+        type="info" title="Info" needs="icon" content=this.content}}
+    {{> @x-message--single scope=this.name
+        type="success" title="Success" needs="icon" content=this.content}}
+    {{> @x-message--single scope=this.name
+        type="warning" title="Warning" needs="icon" content=this.content}}
+    {{> @x-message--single scope=this.name
+        type="error" title="Error" needs="icon" content=this.content}}
+  </dd>
+  {{/if}}
   {{/each}}
 </dl>

package/src/lib/_imports/tools/x-message/x-message--type.hbs

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