GH-98: Typography

taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css

@@ -2,9 +2,8 @@
 /* TODO: Convert to a component */
 
 /* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)…
-            No `em` nor `rem` allowed, because they aren't consitently reliable.
-            - On Frontera CMS, `1rem` = `10px` and `body { font-size: 15px }`
-            - On any other CMS, `1rem` = `16px` (browser default). */
+            `em` nor `rem` was not allowed because results were not consistent.
+            UPDATE: As of PR #312, this has likely changed (untested). */
 
 /* Shared by All Templates */
 

taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css

@@ -18,7 +18,7 @@ Styleguide Elements.MainSectioningRoots
 html {
   /* Set base font but support user-defined browser font size */
   /* SEE: https://snook.ca/archives/html_and_css/font-size-with-rem */
-  font-size: 100%; /* 16px */
+  font-size: 62.5%; /* 16px */
 }
 
 /* The webpage must be at least as tall as the viewport */
@@ -31,9 +31,11 @@ body {
   /* To avoid negative whitespace at right on horz scroll on tiny screen */
   min-width: 290px; /* developer-decided value */
 
+  /* To overwrite Bootstrap */
+  color: var(--global-color-primary--dark);
   font-family: var(--global-font-family);
-
-  line-height: 1.4; /* overwrite Bootstrap */
+  font-size: var(--global-font-size--medium);
+  line-height: 1.4;
 }
 
 
@@ -60,6 +62,27 @@ main {
   padding-bottom: var(--global-space-beneath-main-content);
 }
 
+h1, h2, h3, h4, h5, h6 {
+  font-weight: var(--bold);
+  color: var(--global-color-primary--xx-dark);
+}
+h1 {
+  font-size: var(--global-font-size--xxx-large);
+}
+h2 {
+  font-size: var(--global-font-size--xx-large);
+}
+h3 {
+  font-size: var(--global-font-size--x-large);
+  margin-bottom: 15px; /* overwrite Bootstrap */
+}
+h4, h5, h6 {
+  font-size: var(--global-font-size--small);
+  margin-bottom: 7px; /* overwrite Bootstrap */
+
+  text-transform: uppercase;
+}
+
 
 
 
@@ -89,7 +112,8 @@ ol ol, ol ul, ul ol, ul ul {
 }
 /* Add space between `dt` and `dd` */
 dt {
-  margin-bottom: .5rem; /* Mirror's Bootstrap `margin-bottom` */
+  margin-bottom: .5rem; /* overwrite Bootstrap */
+  font-weight: initial; /* overwrite Bootstrap */
 }
 
 
@@ -112,6 +136,21 @@ Reference:
 Styleguide Elements.InlineTextSemantics
 */
 
+/* Links */
+
+a,
+a:hover { color: var(--global-color-link-on-light--normal); /* overwrite Bootstrap */ }
+a:focus { text-decoration: underline dotted; }
+a:active { position: relative; top: 0.1em; /* to simulate "depress" of link */ }
+
+/* FAQ: Bootstrap already provides basic text-decoration */
+/*
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+*/
+
+/* Monospace */
+
 var,
 /* Overwrite Bootstrap (which does not use its `--font-family-monospace`) */
 code, kbd, pre, samp {

taccsite_cms/static/site_cms/css/src/_imports/objects/o-section.css

@@ -97,6 +97,9 @@ Styleguide Objects.Section
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-primary--xx-dark);
 }
+.o-section--style-dark a {
+  color: var(--global-color-link-on-dark--normal);
+}
 /* FAQ: Banners should not touch a border of the following section */
 .o-section--style-dark:not(.o-section--banner)
 + .o-section--style-dark:not(.o-section--banner) {
@@ -108,6 +111,9 @@ Styleguide Objects.Section
   color: var(--global-color-primary--dark);
   background-color: var(--global-color-primary--xx-light);
 }
+.o-section--style-light a {
+  color: var(--global-color-link-on-light--normal);
+}
 /* FAQ: Banners should not touch a border of the following section */
 .o-section--style-light:not(.o-section--banner)
 + .o-section--style-light:not(.o-section--banner) {

taccsite_cms/static/site_cms/css/src/_imports/settings/color.css

@@ -17,42 +17,25 @@
 */
 
 :root {
-    /* Primary (Text, Layout) */
-    /* WARNING: Do not use `-alt-` hues; "round up" to nearest color, instead */
-    --global-color-primary--xx-light: #FFFFFF;
-    --global-color-primary--x-light: #F4F4F4;
-    --global-color-primary--x-light-rgb: 244, 244, 244;
-    --global-color-primary--light: #C6C6C6;/*
-        --global-color-primary--light-alt-2: #DBDBDB;
-        --global-color-primary--light-alt-2: #D8D8D8; */
-    --global-color-primary--normal: #AFAFAF;/*
-        --global-color-primary--normal-alt-2: #B7B7B7;
-        --global-color-primary--normal-alt-1: #9B9B9B; */
-    --global-color-primary--dark: #707070;/*
-        --global-color-primary--dark-alt-1: #696666;
-        --global-color-primary--dark-alt-2: #5F5C5C; */
-    --global-color-primary--x-dark: #484848;
-    --global-color-primary--x-dark-rgb: 72, 72, 72;/*
-        --global-color-primary--x-dark-alt-1: #464646; */
-    --global-color-primary--xx-dark: #222222; /*
-        --global-color-primary--xx-dark-alt-1: #2C2C2B;
-        --global-color-primary--xx-dark-alt-2: #1C1B1B; */
-
-    /* Distinct Hues */
-    --global-color-accent--normal: #9D85EF;
-        --global-color-accent--weak: #9D85EF20;
-        --global-color-accent--light: #dfdaf5;
-        --global-color-accent--x-light: #D2CCE7;
-    --global-color-info--normal: var(--global-color-primary--x-dark);
-        --global-color-info--weak: var(--global-color-primary--x-light);
-    --global-color-warning--normal: #C7CE1D;
-        --global-color-warning--weak: #C7CE1D20;
-        --global-color-warning--alt: var(--global-color-accent--normal);
-        --global-color-warning--alt-weak: var(--global-color-accent--weak);
-    --global-color-danger--normal: #EB6E6E;
-        --global-color-danger--weak: #EB6E6E20;
-    --global-color-success--normal: #43D130;
-        --global-color-success--weak: #43D13020;
-        --global-color-success--alt: var(--global-color-warning--normal);
-        --global-color-success--alt-weak: var(--global-color-warning--weak);
+  /* Primary (Text, Layout) */
+
+  --global-color-primary--xx-light: #FFFFFF;
+  --global-color-primary--x-light: #F4F4F4;
+  --global-color-primary--light: #C6C6C6;
+  --global-color-primary--normal: #AFAFAF;
+  --global-color-primary--dark: #707070;
+  --global-color-primary--x-dark: #484848;
+  --global-color-primary--xx-dark: #222222;
+
+  /* Distinct Hues */
+
+  /* FAQ: This placeholder accent color came from Portal */
+  /* CAVEAT: A standard accent color definition is pending more designs */
+  /* NOTE: The new Frontera and TACC designs both have brown and blue accents */
+  --global-color-accent--normal: #877453;
+
+  /* CAVEAT: Not accessible within paragraph text (edge case as of 2021-08) */
+  --global-color-link-on-light--normal: #003399;
+  /* WARNING: This color is from Dev not Design (not rendered as of 2021-08) */
+  --global-color-link-on-dark--normal: #0088FF;
 }

taccsite_cms/static/site_cms/css/src/_imports/settings/font.css

@@ -40,17 +40,16 @@ Styleguide Settings.CustomProperties.Font
 
 
   /* Size */
-  /* NOTE: Defined with Design in 2020, but not yet used for 2021 UI work */
-  /*
-  --global-font-size--xx-small: 0.625rem;  /* 10px (if base is 16px) *\/
-  --global-font-size--x-small: 0.8125rem;  /* 13px (if base is 16px) *\/
-  --global-font-size--small: 1.0rem;       /* 16px (if base is 16px) *\/
-  --global-font-size--normal: 1.25rem;     /* 20px (if base is 16px) *\/
-  --global-font-size--large: 1.5rem;       /* 24px (if base is 16px) *\/
-  --global-font-size--x-large: 2.0rem;     /* 32px (if base is 16px) *\/
-  --global-font-size--xx-large: 2.5rem;    /* 40px (if base is 16px) *\/
-  --global-font-size--xxx-large: 3.0rem;   /* 48px (if base is 16px) *\/
-  */
+  /* SEE: https://confluence.tacc.utexas.edu/x/nh4FDg */
+  /* CAVEAT: These font sizes assume root font is 10px or an equivalent value */
+
+  --global-font-size--x-small: 1.1rem;
+  --global-font-size--small: 1.4rem;
+  --global-font-size--medium: 1.6rem;
+  --global-font-size--large: 2.0rem;
+  --global-font-size--x-large: 2.4rem;
+  --global-font-size--xx-large: 3.2rem;
+  --global-font-size--xxx-large: 4.1rem;
 
 
 

taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css

@@ -17,9 +17,8 @@ Styleguide Trumps.Scopes.Header
 */
 
 /* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)…
-            No `em` nor `rem` allowed, because they aren't consitently reliable.
-            - On Frontera CMS, `1rem` = `10px` and `body { font-size: 15px }`
-            - On any other CMS, `1rem` = `16px` (browser default). */
+            `em` nor `rem` was not allowed because results were not consistent.
+            UPDATE: As of PR #312, this has likely changed (untested). */
 
 .s-header {
   --text-color: var(--global-color-primary--xx-light);
@@ -160,3 +159,11 @@ Styleguide Trumps.Scopes.Header
     width: 27px; /* NO-R/EM: 1.25em (from Portal `.fa`—FP-228 will deprecate it) */
     text-align: center;
 }
+
+
+
+/* Dropdown */
+
+.dropdown-menu {
+  font-size: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.dropdown-menu`) */
+}

taccsite_cms/static/site_cms/css/src/_imports/trumps/s-portal-nav.css

@@ -11,14 +11,10 @@ Styleguide Trumps.Scopes.PortalNav
 */
 
 /* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)…
-            No `em` nor `rem` allowed, because they aren't consitently reliable.
-            - On Frontera CMS, `1rem` = `10px` and `body { font-size: 15px }`
-            - On any other CMS, `1rem` = `16px` (browser default). */
+            `em` nor `rem` was not allowed because results were not consistent.
+            UPDATE: As of PR #312, this has likely changed (untested). */
 
 .s-portal-nav {
   /* Override `.navbar` */
   text-transform: none;
 }
-.s-portal-nav .dropdown-menu {
-  font-size: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.dropdown-menu`) */
-}

taccsite_cms/static/site_cms/css/src/site.css

@@ -6,8 +6,8 @@
 /* SETTINGS */
 /* Shared with Portal */
 @import url("_imports/settings/border.css");
-@import url("_imports/settings/color.css");
 /* Unique to CMS */
+@import url("_imports/settings/color.css");
 @import url("_imports/settings/props.max-width.css");
 @import url("_imports/settings/props.space.css");
 @import url("_imports/settings/font.css");

taccsite_cms/templates/snippets/typography-guide.html

@@ -0,0 +1,123 @@
+<h1>Typography</h1>
+
+<hr />
+
+<section>
+
+  <h2>Typefaces</h2>
+  <style>
+    .c-family { letter-spacing: 0.5em; }
+
+    .c-family--mono { font-family: var(--global-font-family--mono); }
+    .c-family--serif { font-family: var(--global-font-family--serif); }
+    .c-family--sans { font-family: var(--global-font-family--sans); }
+  </style>
+
+  <section>
+    <h3>Sans</h3>
+    <p class="c-family--sans">
+      The quick brown fox jumps over the lazy dog.</p>
+    <div class="c-family c-family--sans">
+      <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
+      <p>abcdefghijklmnopqrstuvwxyz</p>
+      <p>0123456789</p>
+    </div>
+  </section>
+  <section>
+    <h3>Mono</h3>
+    <p class="c-family--mono">
+      The quick brown fox jumps over the lazy dog.</p>
+    <div class="c-family c-family--mono">
+      <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
+      <p>abcdefghijklmnopqrstuvwxyz</p>
+      <p>0123456789</p>
+    </div>
+  </section>
+
+</section>
+<section>
+
+  <h2>Font Sizes</h2>
+
+  <section>
+    <h3>All Sizes</h3>
+    <div>
+      <p style="font-size: var(--global-font-size--xxx-large);">
+        XXX Large</p>
+      <p style="font-size: var(--global-font-size--xx-large);">
+        XX Large</p>
+      <p style="font-size: var(--global-font-size--x-large);">
+        Extra Large</p>
+      <p style="font-size: var(--global-font-size--large);">
+        Large</p>
+      <p style="font-size: var(--global-font-size--medium);">
+        Medium</p>
+      <p style="font-size: var(--global-font-size--small);">
+        Small</p>
+      <p style="font-size: var(--global-font-size--x-small);">
+        Extra Small</p>
+    </div>
+  </section>
+  <section>
+    <h3>Headings</h3>
+    <div>
+      <h1>Heading One</h1>
+      <h2>Heading Two</h2>
+      <h3>Heading Three</h3>
+      <h4>Heading Four</h4>
+      <h5>Heading Five</h5>
+      <h6>Heading Six</h6>
+    </div>
+  </section>
+
+</section>
+<section>
+
+  <h2>Font Weights</h2>
+  <style>
+    .c-weight {
+      border: var(--global-border--normal);
+      padding: 1em;
+      text-align: center;
+      display: inline-block;
+    }
+    .c-weight + .c-weight {
+      margin-left: 1em;
+    }
+
+    .c-weight__sample { font-size: var(--global-font-size--xxx-large); }
+
+    .c-weight--regular .c-weight__sample { font-weight: var(--regular); }
+    .c-weight--medium .c-weight__sample { font-weight: var(--medium); }
+    .c-weight--bold .c-weight__sample { font-weight: var(--bold); }
+  </style>
+
+<section class="c-weight-list">
+    <h3>Sans</h3>
+    <figure class="c-weight c-weight--regular">
+      <p class="c-weight__sample c-family--sans">Aa</p>
+      <figcaption>Sans Regular</figcaption>
+    </figure>
+    <figure class="c-weight c-weight--medium">
+      <p class="c-weight__sample c-family--sans">Aa</p>
+      <figcaption>Sans Medium</figcaption>
+    </figure>
+    <figure class="c-weight c-weight--bold">
+      <p class="c-weight__sample c-family--sans">Aa</p>
+      <figcaption>Sans Bold</figcaption>
+    </figure>
+  </section>
+
+  <section class="c-weight-list">
+    <h3>Mono</h3>
+    <figure class="c-weight c-weight--regular">
+      <p class="c-weight__sample c-family--mono">Aa</p>
+      <figcaption>Mono Regular</figcaption>
+    </figure>
+    <figure class="c-weight c-weight--bold">
+      <p class="c-weight__sample c-family--mono">Aa</p>
+      <figcaption>Mono Bold</figcaption>
+    </figure>
+  </section>
+
+</section>