@tacc/core-styles 2.6.0 → 2.6.2

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

@@ -5,6 +5,16 @@
   --global-color-info--dark: var(--global-color-primary--x-dark);
   --global-color-info--x-dark: var(--global-color-primary--xx-dark);
 
+  --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;
+  --global-color-accent--dark: #6039cc;
+  --global-color-accent--x-dark: #3d189b;
+  --global-color-accent--xx-dark: #281066;
+  --global-color-accent--xxx-dark: #1E0C4C;
+
   /* DEPRECATED */
   /* TODO: Update clients to use --global-color-accent--xx-light instead */
   --global-color-accent--alt: #d2cce7;

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

@@ -11,6 +11,7 @@
     --(…)dark:  darker value
     --(…)rgb:   "R, G, B" value partial (ex. usage: `rgba(var(--...-rgb), 0.5)`)
 */
+/* SEE: https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIAqBBAwmkAaEALArjAM4IDaoksCIADgPYBOALhADYC02IAxna4yXikQAYgBmEMQBYxYruICMMAEZiAJvJgBmNQHZ18tQFZVs%2BRC0AOXTA04RuyzJiX5ANgAMWgJzdu8nQVLb2V5ACZLBQ83N3klD24pfwBdAF8sCmg4RAg-GDAmThxefgZBYXEtMX04ezUxGEla0W4INXrmkQhc-Tl7SzcIGDN7Dy8fb3kxsLCYqY8FBS0tKbCFMK0PeY8IGZA0jPAs6iIYXjA1CAYATyKePgEyUUsPF5f5N9et%2BzFuMTczpojHpuN9RMZlEZdP5%2BrpdFIjCt7EYFFItBEAujuAo%2Bs8vu9%2BvitgdMlREEwYMwAJZXW5cEqPIR4z4fImafQ4sEiZQKNQKbidbxhPzcIzuBQWXzyKTRNRuVz2JTLLQKVkswksklHMkgKlgMR0O4MspPESfAnMr5qq0-GR2wy6PR6eS6Dyu13Spxe8IzX3Wi1mtlayjZECXMAAc0pRoeJqZgfVloD5q5vxgUjUoR%2BrTE3lV9lsSUW8m4GwgXnk3nRymi-q5Kf26VJoYA7lcwHqIzHSuUk-W2RqbaJ1GIPGokcPbJYA2Iwsp0boS2pvLp%2BZXvG5RxA6zvg8dEER8HkiERu4yKg3B8mB6JlJJLGoYaIq-9uHZRFFqhBJvYdAKheE8qWEYuIJkOYHvHuOowAAHkwDAQGecYXjeEH9om4geP8IwtGEmYSAEYjAdI4RGCYPJxPC34-n2u6pMkOBMHQYDEE8UAQDB7CsFSEa4EwXAwYJXE8XxAmcdxvH8Tg4kiVJIASaJOBgIw7GsFwlwMAA1gJ7Aadp0mcXpYmGVc2lpEAA */
 
 :root {
 
@@ -39,18 +40,18 @@
 
   /* 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;
-  --global-color-accent--dark: #6039cc;
-  --global-color-accent--x-dark: #3d189b;
-  --global-color-accent--xx-dark: #281066;
-  --global-color-accent--xxx-dark: #1E0C4C;
+  --global-color-accent--xxx-light: #dfeafe;
+  --global-color-accent--xx-light: #caddfe;
+  --global-color-accent--x-light: #AAC7FF;
+  --global-color-accent--light: #86aeff;
+  --global-color-accent--normal: #003399;
+  --global-color-accent--dark: #002266;
+  --global-color-accent--x-dark: #001133;
+  --global-color-accent--xx-dark: #021230;
+  --global-color-accent--xxx-dark: #000a22;
 
   /* DEPRECATED */
-  /* TODO: DO not use these in TUP CMS (Snippet) CSS */
+  /* 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,9 +64,9 @@
   /* 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--xx-light: #e7f1f0; /* from designer */
+  --global-color-tertiary--x-light: #b1d1ce;
+  --global-color-tertiary--light: #92ccc5;
   --global-color-tertiary--normal: #61A39C; /* from designer */
   --global-color-tertiary--dark: #406d68;
   --global-color-tertiary--x-dark: #1E3331; /* from designer */
@@ -75,7 +76,6 @@
 
 
   /* State */
-  /* https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIAqBBAwmkAaEALArjAM4IDaoksCIAlmAGYD2AtNiAMaMA2jATifFIgAxPQAs48W2EATAOzz50uQAZVq6WIAc27dIBMhoyAC6AXywVocRDIhgA5jF6scnHvzIj67GGJkARtI%2BEPQAnACM0jAyYuwRUTjC8WJy%2BirSYRBiEfpyphZWVIgA7hC8YHQOrhzcfAJCojL0MjAQwQCs9ADMYQBs0WEwKiPS7B0B9PpwSVphWn3d%2BgWW4NbURPjsvkRENe71XsIBoVoy7Jnd9H3sMtIRKvRyEGHS3ecwYctJ%2Bn1aWl0VkUbCAYAAPAAuvAg%2BzqnkE3kefXo9GkAX8j1eSSuAKkPw6EwCiREETkYher3MJhwEMYYGIXjBzC4NAcuAhbBZbI5ODAfCgEC4bDsvAA1mwmSLxeYgA */
 
   --global-color-info--x-light: var(--global-color-primary--x-light);
   --global-color-info--light: var(--global-color-primary--light);

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

@@ -51,7 +51,7 @@ Styleguide Settings.CustomProperties.Space
     var(--global-space--section-left);
 
   /* CMS Pages */
-  --global-space--hr-buffer-above: 10px;
+  --global-space--hr-buffer-above: 30px;
   --global-space--hr-buffer-below: 30px;
   --global-space--p-buffer-above: 0; /* origin: Bootstrap _reboot.css */
   --global-space--p-buffer-below: 2rem; /* origin: html-elements.cms.css */

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

@@ -0,0 +1,27 @@
+@import url('../tools/x-figure.css');
+
+.x-blockquote {
+    @extend .x-figure;
+
+    --buffer-above: 3.0rem;
+    --buffer-below: 3.0rem;
+
+    width: fit-content;
+    padding-left: 1em;
+
+    color: var(--global-color-tertiary--normal);
+    font-size: var(--global-font-size--large);
+    line-height: 1.7;
+
+    border-left-width: 5px;
+    border-left-style: solid;
+    border-left-color: currentcolor;
+}
+.x-blockquote-caption {
+    @extend .x-figure-caption;
+
+    --buffer-above: 0; /* FAQ: cuz .x-blockquote line-height is enough */
+    --buffer-below: 0; /* FAQ: cuz .x-blockquote-caption has no border */
+
+    border-bottom: unset; /* to undo .x-figure-caption */
+}

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

@@ -0,0 +1,25 @@
+/* To add space above and below small text beneath these patterns */
+.x-figure {
+    --buffer-above: 0;
+    --buffer-below: 1.5rem;
+
+    margin-block: var(--buffer-above) var(--buffer-below);
+}
+
+.x-figure-caption {
+    --buffer-above: 1.0rem;
+    --buffer-below: 1.0rem;
+
+    color: var(--global-color-primary--dark);
+
+    line-height: 1.7;
+    font-style: italic;
+    font-size: var(--global-font-size--small);
+
+    margin-top: var(--buffer-above);
+    padding-bottom: var(--buffer-below);
+
+    border-bottom-width: var(--global-border-width--normal);
+    border-bottom-style: solid;
+    border-bottom-color: var(--global-color-primary--normal);
+}

package/dist/core-styles.wysiwig.css

@@ -1,4 +0,0 @@
-/*! @tacc/core-styles 2.6.0+ | MIT | github.com/TACC/Core-Styles */@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
-/*! core-styles.wysiwig.css */
-/*! core-styles.settings.css → */:root{--global-border-width--normal:1px;--global-border--normal:var(--global-border-width--normal) solid var(--global-color-primary--normal);--global-border-width--thick:2px;--global-border--thick:var(--global-border-width--thick) solid var(--global-color-primary--normal);--global-border-width--x-thick:3px;--global-border--x-thick:var(--global-border-width--x-thick) solid var(--global-color-primary--normal)}:root{--global-color-primary--xx-light:#fff;--global-color-primary--xx-light-rgb:255,255,255;--global-color-primary--x-light:#f4f4f4;--global-color-primary--x-light-rgb:244,244,244;--global-color-primary--light:#d7d7d7;--global-color-primary--light-rgb:198,198,198;--global-color-primary--normal:#afafaf;--global-color-primary--normal-rgb:175,175,175;--global-color-primary--dark:#707070;--global-color-primary--dark-rgb:112,112,112;--global-color-primary--x-dark:#484848;--global-color-primary--x-dark-rgb:72,72,72;--global-color-primary--xx-dark:#222;--global-color-primary--xx-dark-rgb:34,34,34;--global-color-primary--xxx-dark:#000;--global-color-primary--xxx-dark-rgb:0,0,0;--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;--global-color-accent--dark:#6039cc;--global-color-accent--x-dark:#3d189b;--global-color-accent--xx-dark:#281066;--global-color-accent--xxx-dark:#1e0c4c;--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;--global-color-secondary--normal:#877453;--global-color-secondary--dark:#514328;--global-color-secondary--x-dark:#332c1f;--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;--global-color-tertiary--dark:#406d68;--global-color-tertiary--x-dark:#1e3331;--global-color-tertiary--xxx-dark:var(--global-color-tertiary--x-dark);--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:#fce4db;--global-color-danger--light:#fcaf91;--global-color-danger--normal:#ed4c11;--global-color-danger--dark:#c23a03;--global-color-danger--x-dark:#932b06;--global-color-warning--x-light:#fdf0d3;--global-color-warning--light:#fed880;--global-color-warning--normal:#f2b327;--global-color-warning--dark:#cd971c;--global-color-warning--x-dark:#996f0a;--global-color-success--x-light:#baf8dc;--global-color-success--light:#93f6cd;--global-color-success--normal:#10f7a9;--global-color-success--dark:#3dce92;--global-color-success--x-dark:#26885f;--global-color-extra--x-light:#f0f6ff;--global-color-extra--light:#b4d0f9;--global-color-extra--normal:#3f85f4;--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-background--app:var(--global-color-primary--xx-light);--global-color-link-on-light--normal:var(--global-color-accent--normal);--global-color-link-on-dark--normal:var(--global-color-accent--light)}@font-face{font-display:swap;font-family:Benton Sans;font-style:normal;font-weight:400;src:url(fonts/BentonSans-Regular.otf) format("opentype")}@font-face{font-display:swap;font-family:Benton Sans;font-style:italic;font-weight:400;src:url(fonts/BentonSans-RegularItalic.otf) format("opentype")}@font-face{font-display:swap;font-family:Benton Sans;font-style:normal;font-weight:500;src:url(fonts/BentonSans-Medium.otf) format("opentype")}@font-face{font-display:swap;font-family:Benton Sans;font-style:italic;font-weight:500;src:url(fonts/BentonSans-MediumItalic.otf) format("opentype")}@font-face{font-display:swap;font-family:Benton Sans;font-style:normal;font-weight:700;src:url(fonts/BentonSans-Bold.otf) format("opentype")}@font-face{font-display:swap;font-family:Benton Sans;font-style:normal;font-weight:800;src:url(fonts/BentonSans-Black.otf) format("opentype")}:root{--global-font-family--sans--cms:"Benton Sans","Roboto",sans-serif;--global-font-family--sans--portal:"Roboto",sans-serif;--global-font-family--serif:Times,sans-serif;--global-font-family--mono:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace;--sans--cms:var(--global-font-family--sans--cms);--sans--portal:var(--global-font-family--sans--portal);--serif:var(--global-font-family--serif);--mono:var(--global-font-family--mono);--global-font-weight--regular:400;--global-font-weight--medium:500;--global-font-weight--bold:700;--global-font-weight--black:800;--regular:var(--global-font-weight--regular);--medium:var(--global-font-weight--medium);--bold:var(--global-font-weight--bold);--black:var(--global-font-weight--black)}:root{--global-max-width--x-narrow:540px;--global-max-width--narrow:720px;--global-max-width--medium:960px;--global-max-width--wide:1140px;--global-max-width--x-wide:1320px;--global-max-width--xx-wide:1580px;--global-max-width--xxx-wide:1800px}:root{--global-space--xx-small:2px;--global-space--x-small:4px;--global-space--small:8px;--global-space--normal:16px;--global-space--large:24px;--global-space--x-large:48px;--global-space--list-indent:40px;--global-space--section-gap:60px;--global-space--grid-gap:30px;--global-space--above-breadcrumbs:45px;--global-space--under-breadcrumbs:40px;--global-space--section-top:12px;--global-space--section-bottom:0;--global-space--section-left:24px;--global-space--section-right:36px;--global-space--section:var(--global-space--section-top) var(--global-space--section-right) var(--global-space--section-bottom) var(--global-space--section-left);--global-space--hr-buffer-above:10px;--global-space--hr-buffer-below:30px;--global-space--p-buffer-above:0;--global-space--p-buffer-below:2rem}
-/*! ← core-styles.settings.css */.c-island,.island{background-color:var(--global-color-primary--x-light);border-top:var(--global-border-width--thick) solid var(--global-color-tertiary--normal);font-style:italic;padding:1em 2em}.c-island hr,.island hr{border-bottom:var(--global-border-width--normal) solid;border-top:none;margin-block:2em}