@tacc/core-styles 2.6.1 → 2.6.2

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

@@ -0,0 +1,11 @@
+:root {
+  --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;
+}

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);
+}