@tacc/core-styles 2.0.1 → 2.0.2

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

@@ -0,0 +1,81 @@
+@import url('../tools/x-link.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/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 */

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

@@ -36,7 +36,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/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/settings/color--portal.css

@@ -0,0 +1,31 @@
+: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);
+
+  --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,10 @@
   --global-color-primary--xxx-dark: #000000;
     --global-color-primary--xxx-dark-rgb: 0, 0, 0;
 
+
+
   /* Accent */
+
   --global-color-accent--x-light: #e3d7fd;
   --global-color-accent--light: #a387ed;
   --global-color-accent--normal: #784fe8;
@@ -63,43 +68,56 @@
   /* 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 */
+
   --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/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);
-}