@tacc/core-styles 2.0.1 → 2.1.0

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

@@ -0,0 +1,66 @@
+@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 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 {
+  @extend .x-link--irregular;
+}
+:--c-message a:hover,
+:--c-message :--c-button--as-link:hover {
+  @extend .x-link--irregular--hover;
+}
+:--c-message a:active,
+:--c-message :--c-button--as-link:active {
+  @extend .x-link--irregular--active;
+}
+
+
+
+/* Modifiers */
+
+/* Structure */
+
+:--c-message--scope-inline,
+:--c-message--scope-section,
+:--c-message--scope-global {
+  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;
+}
+
+/* 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-error:not(:--c-message--scope-global) {
+  color: var(--global-color-danger--dark);
+}
+:--c-message--type-tip:not(:--c-message--scope-global) {
+  color: var(--global-color-extra--dark);
+}

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

@@ -0,0 +1,82 @@
+@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 {
+  @extend .x-link--irregular;
+}
+:--c-message--scope-global a:hover,
+:--c-message--scope-global :--c-button--as-link:hover {
+  @extend .x-link--irregular--hover;
+}
+:--c-message--scope-global a:active,
+:--c-message--scope-global :--c-button--as-link:active {
+  @extend .x-link--irregular--active;
+}
+
+
+
+/* Modifiers */
+
+/* Structure */
+
+:--c-message--scope-section {
+  --pad-vert: 20px;
+  --pad-horz: 30px;
+
+  border-width: var(--global-border-width--normal);
+  border-style: solid;
+}
+
+/* Skin */
+
+:--c-message--scope-section {
+  color: var(--global-color-primary--dark);
+}
+
+:--c-message--type-info:--c-message--scope-inline {
+  color: var(--global-color-info--x-dark);
+}
+:--c-message--type-success:--c-message--scope-inline {
+  color: var(--global-color-success--x-dark);
+}
+:--c-message--type-warning:--c-message--scope-inline {
+  color: var(--global-color-warning--x-dark);
+}
+:--c-message--type-error:--c-message--scope-inline {
+  color: var(--global-color-danger--x-dark);
+}
+:--c-message--type-tip:--c-message--scope-inline {
+  color: var(--global-color-extra--x-dark);
+}
+
+/* To support icons (if needed) */
+/* SEE: ./admonition.css */
+:--c-message--type-info::before {
+  background-color: var(--global-color-info--normal);
+}
+:--c-message--type-success::before {
+  background-color: var(--global-color-success--normal);
+}
+:--c-message--type-warning::before {
+  background-color: var(--global-color-warning--normal);
+}
+:--c-message--type-error::before {
+  background-color: var(--global-color-danger--normal);
+}
+:--c-message--type-tip::before {
+  background-color: var(--global-color-extra--normal);
+}

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

@@ -1,119 +1,75 @@
-@import url('../tools/x-link.css');
+@import url("./c-message.selectors.css");
 
 
 
 /* Elements */
 
 /* To prevent excess space at top and bottom of message */
-.c-message > *:first-child {
+:--c-message > *:first-child {
   margin-top: 0;
 }
-.c-message > *:last-child {
+:--c-message > *:last-child {
   margin-bottom: 0;
 }
 
-/* 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 {
-  @extend .x-link--irregular;
-}
-.c-message a:hover,
-.c-message .c-button--as-link:hover {
-  @extend .x-link--irregular--hover;
-}
-.c-message a:active,
-.c-message .c-button--as-link:active {
-  @extend .x-link--irregular--active;
-}
-
 
 
 /* Modifiers */
 
 /* Structure */
 
-.c-message--scope-inline {
-  /* no styles yet *//* FAQ: added so alt. class name @extend does not fail */
+:--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-section,
-.c-message--scope-global {
-  padding: 15px 20px;
-  border: var(--global-border--thick);
+:--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--scope-global {
+  --pad-vert: 15px;
+  --pad-horz: 20px;
+
+  border-width: var(--global-border-width--thick);
 
-.c-message--scope-global {
   text-align: center;
 }
 
 /* Skin */
 
-.c-message--type-info {
-  color: var(--global-color-info--dark);
-}
-.c-message--type-success {
-  color: var(--global-color-success--dark);
+:--c-message--type {
+  /* To let clients prematurely @extend (to reduce their later maintenance) */
 }
-.c-message--type-warning {
-  color: var(--global-color-warning--dark);
-}
-.c-message--type-error {
-  color: var(--global-color-danger--dark);
-}
-
-.c-message--type-info.c-message--scope-section {
+:--c-message--type-info:--c-message--scope-section {
   background-color: var(--global-color-info--x-light);
   border-color: var(--global-color-info--normal);
 }
-.c-message--type-success.c-message--scope-section {
+:--c-message--type-success:--c-message--scope-section {
   background-color: var(--global-color-success--x-light);
   border-color: var(--global-color-success--normal);
 }
-.c-message--type-warning.c-message--scope-section {
+:--c-message--type-warning:--c-message--scope-section {
   background-color: var(--global-color-warning--x-light);
   border-color: var(--global-color-warning--normal);
 }
-.c-message--type-error.c-message--scope-section {
+:--c-message--type-error:--c-message--scope-section {
   background-color: var(--global-color-danger--x-light);
   border-color: var(--global-color-danger--normal);
 }
+:--c-message--type-tip:--c-message--scope-section {
+  background-color: var(--global-color-extra--x-light);
+  border-color: var(--global-color-extra--normal);
+}
 
-.c-message--scope-global {
+:--c-message--scope-global {
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-accent--secondary);
   border-color: var(--global-color-primary--dark);
 }
-
-
-
-/* Alternate Class Names */
-
-[class*="message--"]:not(.c-message) { @extend .c-message; }
-
-.message--inline { @extend .c-message--scope-inline; }
-.message--section { @extend .c-message--scope-section; }
-.message--global { @extend .c-message--scope-global; }
-
-.message--success { @extend .c-message--type-success; }
-.message--info { @extend .c-message--type-info; }
-.message--warning { @extend .c-message--type-warning; }
-.message--error { @extend .c-message--type-error; }
-
-.message--success.message--section {
-  @extend .c-message--type-success.c-message--scope-section;
-}
-.message--info.message--section {
-  @extend .c-message--type-info.c-message--scope-section;
-}
-.message--warning.message--section {
-  @extend .c-message--type-warning.c-message--scope-section;
-}
-.message--error.message--section {
-  @extend .c-message--type-error.c-message--scope-section;
-}

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

@@ -0,0 +1,32 @@
+@import url("../tools/selectors.css");
+
+@custom-selector :--c-message
+    .c-message,
+    [class*="message--"];
+
+@custom-selector :--c-message--type
+    [class*="message--type-"];
+@custom-selector :--c-message--type-info
+    .c-message--type-info,
+    .message--type-info;
+@custom-selector :--c-message--type-success
+    .c-message--type-success,
+    .message--type-success;
+@custom-selector :--c-message--type-warning
+    .c-message--type-warning,
+    .message--type-warning;
+@custom-selector :--c-message--type-error
+    .c-message--type-error,
+    .message--type-error;
+
+@custom-selector :--c-message--scope
+    [class*="message--scope-"];
+@custom-selector :--c-message--scope-inline
+    .c-message--scope-inline,
+    .message--scope-inline;
+@custom-selector :--c-message--scope-section
+    .c-message--scope-section,
+    .message--scope-section;
+@custom-selector :--c-message--scope-global
+    .c-message--scope-global,
+    .message--scope-global;

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

@@ -7,6 +7,7 @@ Markup: c-page.html
 
 Styleguide Components.Pagination
 */
+@import url('../components/c-button.selectors.css');
 
 
 
@@ -52,7 +53,7 @@ ul.c-page-list {
   top: var(--vert-offset);
   bottom: var(--vert-offset);
 }
-.c-page-link--always-click.c-button {
+.c-page-link--always-click:--c-button {
   overflow: visible; /* overwrite `.c-button` so pseudo elements show */
 }
 .c-page-link--always-click::before { right: var(--horz-offset) }

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

@@ -65,16 +65,13 @@ Styleguide Components.Recognition
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-primary--xx-dark);
 }
-.c-recognition--style-dark a {
-  color: var(--global-color-link-on-dark--normal);
-}
 .c-recognition--style-dark h1,
 .c-recognition--style-dark h2,
 .c-recognition--style-dark h3,
 .c-recognition--style-dark h4,
 .c-recognition--style-dark h5,
 .c-recognition--style-dark h6 {
-  color: var(--global-color-accent--normal);
+  color: var(--global-color-accent--dark);
 }
 
 
@@ -89,9 +86,6 @@ Styleguide Components.Recognition
   border-style: solid;
   border-color: var(--global-color-primary--xx-dark);
 }
-.c-recognition--style-light a {
-  color: var(--global-color-link-on-light--normal);
-}
 .c-recognition--style-light h1,
 .c-recognition--style-light h2,
 .c-recognition--style-light h3,

package/src/lib/_imports/components/django-cms-forms--errors-via-c-message.css

@@ -0,0 +1,23 @@
+@import url("../components/c-message.css");
+@import url("../components/c-message--expanded.css");
+
+
+
+/* Errors */
+
+.form-errors {
+  @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;
+}
+.field-errors 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;
+}

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

@@ -1,8 +1,9 @@
 @import url("../components/c-button.css");
 @import url("../components/c-message.css");
-@import url('../tools/x-link.css');
+@import url("../components/c-message--expanded.css");
 
 @import url("./django-cms-forms.hacks.css");
+@import url("./django-cms-forms--errors-via-c-message.css");
 
 
 
@@ -132,18 +133,6 @@ ul.checkboxselectmultiple li:last-child label {
   padding-inline: 0;
 }
 
-.form-errors {
-  @extend .c-message;
-  @extend .c-message--type-error;
-  @extend .c-message--scope-section;
-  @extend .c-message--type-error.c-message--scope-section;
-}
-.field-errors li {
-  @extend .c-message;
-  @extend .c-message--type-error;
-  @extend .c-message--scope-inline;
-}
-
 
 
 /* Lists */
@@ -169,19 +158,19 @@ ul.checkboxselectmultiple {
 
 /* To style obvious buttons that neglect class */
 .button-wrapper button[type="submit"] {
-  @extend .c-button;
-  @extend .c-button--primary;
+  @extend :--c-button;
+  @extend :--c-button--primary;
 }
 
 .form-button {
-  @extend .c-button;
+  @extend :--c-button;
 }
 .form-button[type="submit"] {
-  @extend .c-button--primary;
+  @extend :--c-button--primary;
 }
 .form-button:where(:not([type="submit"], [type="reset"])) {
-  @extend .c-button--secondary;
+  @extend :--c-button--secondary;
 }
 .form-button[type="reset"] {
-  @extend .c-button--tertiary;
+  @extend :--c-button--tertiary;
 }

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 */
@@ -36,7 +37,6 @@
 @import url("./components/c-form.css");
 @import url("./components/c-nav.css");
 @import url("./components/c-page.css");
-@import url("./components/c-message.css");
 @import url("./components/c-recognition.css");
 @import url("./components/c-see-all-link.css");
 

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

@@ -29,6 +29,9 @@
 /* COMPONENTS */
 @import url("./components/cortal.icon.css");
 @import url("./components/c-card.css");
+@import url("./components/c-form--cms.css");
+@import url("./components/c-message.css");
+@import url("./components/c-message--expanded.css");
 /* TODO: Move to TACC/Core-CMS-Resources:/frontera-cms
         or — alternatively — TACC/Core-CMS */
 @import url("./components/c-card--frontera-about-page.css");

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

@@ -7,6 +7,7 @@
 /* SETTINGS */
 /* To get most settings, client should load `./base.css` first */
 @import url("./settings/font--portal.css");
+@import url("./settings/color--portal.css");
 
 /* GENERICS */
 /* Mostly from Bootstrap */
@@ -22,7 +23,9 @@
 /* COMPONENTS */
 @import url("./components/cortal.icon.css");
 @import url("./components/mui.tabs.css");
-@import url("./components/c-message.portal.css");
+@import url("./components/c-form--portal.css");
+@import url("./components/c-message.css");
+@import url("./components/c-message--compact.css");
 
 /* TRUMPS */
 /* (none) */

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/elements/monospace.css

@@ -47,14 +47,10 @@
 }
 
 /* Skin */
-& :--monospace--block {
-  background-color: var(--global-color-primary--x-light);
-  color: var(--global-color-primary--xx-dark);
-  border: var(--global-border-width--normal) solid var(--global-color-primary--light);
-}
+& :--monospace--block,
 & :--monospace--inline {
-  color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-primary--x-light);
+  color: var(--global-color-primary--x-dark);
   border: var(--global-border--normal);
 }
 & :--monospace--output:not(:--monospace--boxed) {

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-in-dark-context
+  :where(:--dark-context :--light-context);
+@custom-selector :--dark-context-in-light-context
+  :where(:--dark-context:not(:--light-context *));
+
+:--dark-context-in-light-context {
+  --global-color-accent--xxx-light: #f6f3fe;
+  --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-in-dark-context {
+  --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;
+}