@tacc/core-styles 2.0.2 → 2.2.0

package/src/lib/_imports/components/django-cms-forms.hacks.css

@@ -17,7 +17,9 @@ Styleguide Components.DjangoCMS.Forms.Hacks
 @custom-selector :--problem-field
   .field-wrapper.checkboxselectmultiple.required;
 
-/* HACK: Messages about a required multi-checkbox field */
+/* To inform user or admin about unsupported required multi-checkbox field */
+/* HACK: This does not solve the problem; it just announces it */
+/* NOTE: Were we to @extend :--c-message, generated selectors become messy */
 :--problem-field > label::after {
   display: block;
   margin-top: 0.5em;
@@ -25,35 +27,23 @@ Styleguide Components.DjangoCMS.Forms.Hacks
   /* To override styles inherited from `django-cms-forms.css` */
   font-weight: normal;
 
-  /* To mimic c-message */
-  /* https://github.com/TACC/tup-ui/blob/main/libs/core-styles/src/lib/_imports/components/c-message.css */
   padding: 15px 20px;
   border: var(--global-border--thick);
   font-size: var(--global-font-size--small);
-  /* TACC/Core-CMS#531: When merged, import and extend `.c-message(...)` */
-  /* @extend .c-message; */
 }
 /* To give error to admin */
 html:--cms-edit-mode :--problem-field > label::after {
   content: 'A multi checkbox field that is required is not well implemented. Do not require this field or replace it with multiple required Yes/No radio fields.';
 
-  /* To mimic c-message c-message-error */
-  /* https://github.com/TACC/tup-ui/blob/main/libs/core-styles/src/lib/_imports/components/c-message.css */
   color: var(--global-color-danger--dark);
   background-color: var(--global-color-danger--weak);
   border-color: var(--global-color-danger--normal);
-  /* TACC/Core-CMS#531: When merged, import and extend `.c-message(...)` */
-  /* @extend .c-message--error; */
 }
 /* To give warning to user */
 html:not(:--cms-edit-mode) :--problem-field > label::after {
   content: 'This field is not well implemented. Select all boxes to bypass the error with this field.';
 
-  /* To mimic c-message c-message-warning */
-  /* https://github.com/TACC/tup-ui/blob/main/libs/core-styles/src/lib/_imports/components/c-message.css */
   color: var(--global-color-warning--dark);
   background-color: var(--global-color-warning--weak);
   border-color: var(--global-color-warning--normal);
-  /* TACC/Core-CMS#531: When merged, import and extend `.c-message(...)` */
-  /* @extend .c-message--warning; */
 }

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

@@ -10,6 +10,7 @@
 /* GENERICS */
 /* Mostly from Bootstrap */
 /* https://confluence.tacc.utexas.edu/x/b53tDg */
+@import url("./generics/color.css");
 
 /* ELEMENTS */
 /* To override Bootstrap */

package/src/lib/_imports/elements/headings--cms.css

@@ -7,14 +7,11 @@
 
 
 
-
-
-/*
-Content Sectioning: Headings
-*/
-
 /* Structure */
 
+&:is( h1, h2, h3, h4, h5, h6 ) {
+    line-height: unset;
+}
 & h1 {
     margin-bottom: 40px; /* rounded from design 42px */
     text-transform: uppercase;
@@ -27,10 +24,6 @@ Content Sectioning: Headings
     margin-top: 0; /* designs suggest component padding can give top spacing */
     margin-bottom: 20px; /* rounded from design 17px */
 }
-/* WARNING: No design available; these are just developer guesswork */
-& h5 {
-    text-transform: uppercase;
-}
 
 
 
@@ -54,17 +47,13 @@ Content Sectioning: Headings
     font-size: var(--global-font-size--medium);
     font-weight: var(--bold);
 }
-& h5 {
-    font-size: var(--global-font-size--small);
-    font-weight: var(--black);
-}
+/* To  deter use of "smaller" headings by making them match body font */
+& h5,
 & h6 {
-    font-size: var(--global-font-size--small);
-    font-weight: var(--bold);
+    font-size: inherit;
+    font-weight: var(--normal);
 }
 
 
 
-
-
 }

package/src/lib/_imports/elements/links/links.hbs

@@ -1,16 +1,18 @@
 <dl class="demo-narrow-paragraphs">
   <dt>Standard</dt>
   <dd>
-    {{> @text-and-link }}
-  </dd>
-  <dd>
-    {{> @text-and-link-no-href }}
+    {{> @text-and-link label="Normal" }}
+
+    {{> @text-and-link-no-href label="No <code>href</code>" }}
+
+    {{> @text-and-button label="Button" class="c-button c-button--as-link" }}
   </dd>
   <dt>Irregular</dt>
   <dd class="s-irregular-links">
-    {{> @text-and-link }}
-  </dd>
-  <dd>
-    {{> @text-and-link-no-href }}
+    {{> @text-and-link label="Normal" }}
+
+    {{> @text-and-link-no-href label="No <code>href</code>" }}
+
+    {{> @text-and-button label="Button as Link" class="c-button c-button--as-link" }}
   </dd>
 </dl>

package/src/lib/_imports/elements/links.css

@@ -1,15 +1,16 @@
+@import url('../components/c-button.selectors.css');
 @import url("../tools/selectors.css");
 @import url('../tools/x-link.css');
 
-:where(:--main-content) a:not(.c-button) {
+:where(:--main-content) a:not(:--c-button) {
   @extend .x-link;
 }
 :where(:--main-content) a:not([href]) {
   @extend .x-link--disabled;
 }
-:where(:--main-content) a:not(.c-button):hover {
+:where(:--main-content) a:not(:--c-button):hover {
   @extend .x-link--hover;
 }
-:where(:--main-content) a:not(.c-button):active {
+:where(:--main-content) a:not(:--c-button):active {
   @extend .x-link--active;
 }

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

@@ -0,0 +1,49 @@
+/*
+Colors (by Context)
+
+Change global colors depending on context.
+
+Styleguide Generics.Colors
+*/
+@import url("../objects/o-section.selectors.css");
+@import url("../components/c-card.selectors.css");
+
+@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 *));
+
+:--dark-context-safe {
+  --global-color-accent--xxx-light: #faf4ff;
+  --global-color-accent--xx-light: #f1ebfd;
+  --global-color-accent--x-light: #e3d7fd;
+  --global-color-accent--light: #d5bfff;
+  --global-color-accent--normal: #a387ed;
+  --global-color-accent--dark: #784fe8;
+  --global-color-accent--x-dark: #6039cc;
+  --global-color-accent--xx-dark: #3d189b;
+  --global-color-accent--xxx-dark: #281066;
+}
+
+:--light-context-safe {
+  --global-color-accent--xxx-light: #f1ebfd;
+  --global-color-accent--xx-light: #e3d7fd;
+  --global-color-accent--x-light: #d5bfff;
+  --global-color-accent--light: #a387ed;
+  --global-color-accent--normal: #784fe8;
+  --global-color-accent--dark: #6039cc;
+  --global-color-accent--x-dark: #3d189b;
+  --global-color-accent--xx-dark: #281066;
+  --global-color-accent--xxx-dark: #1E0C4C;
+}

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

@@ -5,6 +5,12 @@
   --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;

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

@@ -39,6 +39,8 @@
 
   /* Accent */
 
+  --global-color-accent--xxx-light: #faf4ff;
+  --global-color-accent--xx-light: #f1ebfd;
   --global-color-accent--x-light: #e3d7fd;
   --global-color-accent--light: #a387ed;
   --global-color-accent--normal: #784fe8;
@@ -47,11 +49,12 @@
   --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);
 
+  --global-color-secondary--xx-light: #fcf6ec;
   --global-color-secondary--x-light: #e5d7c0;
   --global-color-secondary--light: #d5b57c; /* from designer */
   --global-color-secondary--normal: #877453; /* from designer */
@@ -60,6 +63,7 @@
   /* HELP: Where is this used? Not Core-Styles nor TACC CMS global snippets… */
   --global-color-secondary--xxx-dark: var(--global-color-secondary--x-dark);
 
+  --global-color-tertiary--xx-light: #eafdfb;
   --global-color-tertiary--x-light: #b8f2eb;
   --global-color-tertiary--light: #7bd1c8;
   --global-color-tertiary--normal: #61A39C; /* from designer */
@@ -82,14 +86,14 @@
   --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-danger--dark: #c23a03;
+  --global-color-danger--x-dark: #932b06;
 
-  --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-warning--x-light: #FDF0D3; /* from designer */
+  --global-color-warning--light: #fed880;
+  --global-color-warning--normal: #F2B327; /* from designer */
+  --global-color-warning--dark: #cd971c;
+  --global-color-warning--x-dark: #996f0a;
 
   --global-color-success--x-light: #baf8dc; /* from designer */
   --global-color-success--light: #93f6cd;
@@ -117,6 +121,8 @@
 
 
   /* 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>