@tacc/core-styles 2.0.1 → 2.1.0

package/src/lib/_imports/objects/o-section/o-section.hbs

@@ -8,26 +8,31 @@
 
 <section class="o-section o-section--{{this._self.name}}">
     <h2>Section (First of a Pair)</h2>
-    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-with-actions }}</p>
+    {{> @button-samples }}
 </section>
 <section class="o-section o-section--{{this._self.name}}">
     <h2>Section (Second of a Pair)</h2>
-    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-with-actions }}</p>
+    {{> @button-samples }}
 </section>
 
 <hr />
 
 <section class="o-section o-section--{{this._self.name}}">
     <h2>Section (before Muted Section)</h2>
-    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-with-actions }}</p>
+    {{> @button-samples }}
 </section>
 <section class="o-section o-section--style-muted">
     <h2>Muted Section</h2>
-    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-with-actions }}</p>
+    {{> @button-samples }}
 </section>
 <section class="o-section o-section--{{this._self.name}}">
     <h2>Section (after Muted Section)</h2>
-    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-with-actions }}</p>
+    {{> @button-samples }}
 </section>
 
 <hr />
@@ -37,15 +42,18 @@
     <p>⚠️ These are not used in any design. They are minimally supported only to prevent layouts from breaking if accidentally used.</p>
     <div class="o-section o-section--style-dark">
         <h3>(Nested) Dark Section</h3>
-        <p>{{> @text-of-one-paragraph-short }}</p>
+        <p>{{> @text-of-one-paragraph-with-actions }}</p>
+        {{> @button-samples }}
     </div>
     <div class="o-section o-section--style-muted">
         <h3>(Nested) Muted Section</h3>
-        <p>{{> @text-of-one-paragraph-short }}</p>
+        <p>{{> @text-of-one-paragraph-with-actions }}</p>
+        {{> @button-samples }}
     </div>
     <div class="o-section o-section--style-light">
         <h3>(Nested) Light Section</h3>
-        <p>{{> @text-of-one-paragraph-short }}</p>
+        <p>{{> @text-of-one-paragraph-with-actions }}</p>
+        {{> @button-samples }}
     </div>
 </section>
 

package/src/lib/_imports/objects/o-section.css

@@ -1,5 +1,6 @@
-@import url("../tools/x-layout.css");
+@import url("../components/c-button.selectors.css");
 @import url("../components/c-card.selectors.css");
+@import url("../tools/x-layout.css");
 
 @import url("./o-section.selectors.css");
 
@@ -74,21 +75,18 @@
   --color--text-strong: var(--global-color-primary--xx-dark);
   --color--bkgd: var(--global-color-primary--xx-light);
   --color--line: var(--global-color-primary--normal);
-  --color--link: var(--global-color-link-on-light--normal);
 }
 :--o-section--muted {
   --color--text: var(--global-color-primary--x-dark);
   --color--text-strong: var(--global-color-primary--xx-dark);
   --color--bkgd: var(--global-color-primary--x-light);
   --color--line: var(--global-color-primary--dark);
-  --color--link: var(--global-color-link-on-light--normal);
 }
 :--o-section--dark {
   --color--text: var(--global-color-primary--xx-light);
   --color--text-strong: var(--global-color-primary--xx-light);
   --color--bkgd: var(--global-color-primary--xx-dark);
   --color--line: var(--global-color-primary--xx-light);
-  --color--link: var(--global-color-link-on-dark--normal);
 }
 
 /* Modifers: Style: Text & Background */
@@ -108,14 +106,7 @@
 
 /* Modifers: Style: Child Text */
 
-/* To color links, but not those within a nested pattern */
-:--o-section--style a:not(
-  :--c-card--plain *,
-  :--c-card--standard *,
-  :--c-card--standard-N *
-) {
-  color: var(--color--link);
-}
+/* To color text, but not those within certain contexts */
 :--o-section--style :is(h1, h2, h3, h4, h5, h6):not(
   :--c-card--plain *,
   :--c-card--standard *,

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

@@ -0,0 +1,37 @@
+:root {
+  --global-color-info--x-light: var(--global-color-primary--x-light);
+  --global-color-info--light: var(--global-color-primary--light);
+  --global-color-info--normal: var(--global-color-primary--normal);
+  --global-color-info--dark: var(--global-color-primary--x-dark);
+  --global-color-info--x-dark: var(--global-color-primary--xx-dark);
+
+  /* DEPRECATED */
+  /* TODO: Update clients to use --global-color-accent--xx-light instead */
+  --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/color.css

@@ -13,9 +13,11 @@
 */
 
 :root {
+
   /* Neutral */
   /* FAQ: Primary colors of an app (neutral text, borders, backgrounds) */
   /* IDEA: Rename these from `primary` to `neutral` */
+
   --global-color-primary--xx-light: #FFFFFF;
     --global-color-primary--xx-light-rgb: 255, 255, 255;
   --global-color-primary--x-light: #F4F4F4;
@@ -33,7 +35,12 @@
   --global-color-primary--xxx-dark: #000000;
     --global-color-primary--xxx-dark-rgb: 0, 0, 0;
 
+
+
   /* Accent */
+
+  --global-color-accent--xxx-light: #f6f3fe;
+  --global-color-accent--xx-light: #f1ebfd;
   --global-color-accent--x-light: #e3d7fd;
   --global-color-accent--light: #a387ed;
   --global-color-accent--normal: #784fe8;
@@ -42,8 +49,8 @@
   --global-color-accent--xx-dark: #281066;
   --global-color-accent--xxx-dark: #1E0C4C;
 
-  --global-color-accent--alt: #d2cce7;
-  --global-color-accent--weak: #6039cc40; /* similar to #E3D7FD on #f4f4f4 */
+  /* DEPRECATED */
+  /* TODO: DO not use these in TUP CMS (Snippet) CSS */
   --global-color-accent--secondary: var(--global-color-secondary--normal);
   --global-color-accent--tertiary: var(--global-color-tertiary--normal);
 
@@ -63,43 +70,58 @@
   /* HELP: Where is this used? Not Core-Styles nor TACC CMS global snippets… */
   --global-color-tertiary--xxx-dark: var(--global-color-tertiary--x-dark);
 
-  /* State */
-  --global-color-info--x-dark: var(--global-color-primary--xx-dark);
-  --global-color-info--dark: var(--global-color-primary--x-dark);
-  --global-color-info--normal: var(--global-color-primary--normal);
-  --global-color-info--light: var(--global-color-primary--light);
-  --global-color-info--x-light: var(--global-color-primary--x-light);
-
-  --global-color-info--weak: rgba( var(--global-color-primary--normal), 0.125 );
 
-  --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: #FBF4E1;
-  --global-color-warning--light: #FAE19E;
-  --global-color-warning--normal: #DFA70C;
-  --global-color-warning--dark: #735911;
-  --global-color-warning--x-dark: #3A3320;
+  /* State */
+  /* https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIAqBBAwmkAaEALArjAM4IDaoksCIAlmAGYD2AtNiAMaMA2jATifFIgAxPQAs48W2EATAOzz50uQAZVq6WIAc27dIBMhoyAC6AXywVocRDIhgA5jF6scnHvzIj67GGJkARtI%2BEPQAnACM0jAyYuwRUTjC8WJy%2BirSYRBiEfpyphZWVIgA7hC8YHQOrhzcfAJCojL0MjAQwQCs9ADMYQBs0WEwKiPS7B0B9PpwSVphWn3d%2BgWW4NbURPjsvkRENe71XsIBoVoy7Jnd9H3sMtIRKvRyEGHS3ecwYctJ%2Bn1aWl0VkUbCAYAAPAAuvAg%2BzqnkE3kefXo9GkAX8j1eSSuAKkPw6EwCiREETkYher3MJhwEMYYGIXjBzC4NAcuAhbBZbI5ODAfCgEC4bDsvAA1mwmSLxeYgA */
 
-  --global-color-warning--weak: #DFA70C20;
+  --global-color-info--x-light: var(--global-color-primary--x-light);
+  --global-color-info--light: var(--global-color-primary--light);
+  --global-color-info--normal: var(--global-color-primary--dark);
+  --global-color-info--dark: var(--global-color-primary--x-dark);
+  --global-color-info--x-dark: var(--global-color-primary--xx-dark);
 
-  --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--x-light: #fce4db; /* from designer */
+  --global-color-danger--light: #fcaf91;
+  --global-color-danger--normal: #ed4c11; /* from designer */
+  --global-color-danger--dark: #c14720;
+  --global-color-danger--x-dark: #9a4127;
+
+  --global-color-warning--x-light: #fdfdea; /* from designer */
+  --global-color-warning--light: #f5f396;
+  --global-color-warning--normal: #e9e000; /* from designer */
+  --global-color-warning--dark: #c5bf2e;
+  --global-color-warning--x-dark: #898632;
+
+  --global-color-success--x-light: #baf8dc; /* from designer */
+  --global-color-success--light: #93f6cd;
+  --global-color-success--normal: #10f7a9; /* from designer */
+  --global-color-success--dark: #3dce92;
+  --global-color-success--x-dark: #26885f;
+
+  --global-color-extra--x-light: #f0f6ff; /* from designer */
+  --global-color-extra--light: #b4d0f9;
+  --global-color-extra--normal: #3f85f4; /* from designer */
+  --global-color-extra--dark: #255bb1;
+  --global-color-extra--x-dark: #174a99;
+
+  --global-color-info--weak: rgba( var(--global-color-info--normal), 0.125 );
+  --global-color-danger--weak: rgba( var(--global-color-danger--normal), 0.125 );
+  --global-color-warning--weak: rgba( var(--global-color-warning--normal), 0.125 );
+  --global-color-success--weak: rgba( var(--global-color-success--normal), 0.125 );
+  --global-color-extra--weak: rgba( var(--global-color-extra--normal), 0.125 );
 
-  --global-color-danger--weak: #F0939320;
 
   /* Generic */
+
   --global-color-background--app: var(--global-color-primary--xx-light);
 
+
+
   /* Link */
+  /* DEPRECATED */
+  /* TODO: Rely on src/lib/_imports/generics/color.css to manage dark/light */
+
   --global-color-link-on-light--normal: var(--global-color-accent--normal);
   --global-color-link-on-dark--normal: var(--global-color-accent--light);
 }

package/src/lib/_imports/tools/x-link.css

@@ -1,5 +1,5 @@
 .x-link {
-  color: var(--global-color-link-on-light--normal);
+  color: var(--global-color-accent--normal);
 
   text-decoration: none;
   text-underline-offset: 0.2em;
@@ -14,7 +14,7 @@
   text-decoration-style: solid;
 
   /* To overwrite Bootstrap (on Client) */
-  color: var(--global-color-link-on-light--normal);
+  color: var(--global-color-accent--normal);
   text-decoration-thickness: var(--global-border-width--normal);
 }
 .x-link--active {

package/src/lib/_imports/trumps/s-irregular-links/s-irregular-links.hbs

@@ -1,22 +1,14 @@
 <dl class="demo-narrow-paragraphs s-irregular-links">
-  <dt>Links</dt>
+  <dt>Normal</dt>
   <dd>
     {{> @text-and-link }}
   </dd>
+  <dt>No <code>href</code></dt>
   <dd>
     {{> @text-and-link-no-href }}
   </dd>
+  <dt>Button as Link</dt>
   <dd>
-    {{> @text-and-button-as-link }}
-  </dd>
-  <dt>Buttons as Links</dt>
-  <dd>
-    {{> @text-and-link }}
-  </dd>
-  <dd>
-    {{> @text-and-link-no-href }}
-  </dd>
-  <dd>
-    {{> @text-and-button-as-link }}
+    {{> @text-and-button class="c-button c-button--as-link" }}
   </dd>
 </dl>

package/src/lib/_imports/trumps/s-irregular-links.css

@@ -1,14 +1,15 @@
+@import url('../components/c-button.selectors.css');
 @import url('../tools/x-link.css');
 
 .s-irregular-links a,
-.s-irregular-links .c-button--as-link {
+.s-irregular-links :--c-button--as-link {
   @extend .x-link--irregular;
 }
 .s-irregular-links a:hover,
-.s-irregular-links .c-button--as-link:hover {
+.s-irregular-links :--c-button--as-link:hover {
   @extend .x-link--irregular--hover;
 }
 .s-irregular-links a:active,
-.s-irregular-links .c-button--as-link:active {
+.s-irregular-links :--c-button--as-link:active {
   @extend .x-link--irregular--active;
 }

package/src/lib/_imports/_partials/text-and-button-as-link.hbs

@@ -1 +0,0 @@
-<p>Pack my red box with five dozen quality jugs. A quick brown fox jumps over the <button class="c-button c-button--as-link">lazy dog</button>. A waxy gent chuckled over my fab jazzy quips.</p>

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

@@ -1,5 +0,0 @@
-.c-message--scope-inline,
-.c-message--scope-section,
-.c-message--scope-global {
-  font-size: var(--global-font-size--small);
-}