GIVCAMP-151 | Spacing options and other utilities updates (#919)

* Change centered-container to use max width and allow nesting of classes * Make the centered-container class more dynamic * fixed copy paste error. * switch back to addComponents * Fixups; use fog instead of foggy; use fontWeight.normal instead of regular; doc update * Extend gap values also; add more spacing values for convenience * Add "px" (1px) option to spacing so it honors the same TW option; doc clean up * Add some color variants that we use in many projects * Renamed new approach to centered container to .box; keep original centered container but add support for nested containers; add demo code for both for comparison * add font-basic.css for sites that don't need roboto slab and mono; update readme * Update static/index.html * Update static/index.html * Remove box utility for now since cc has added nested cc support; add cc section with documentation on preview site --------- Co-authored-by: pookmish <[email protected]> Co-authored-by: Sherakama <[email protected]>
SU-SWS · Jul 12, 2023 · 7bc59e1 · 7bc59e1
1 parent 9cf3275
commit 7bc59e1
Show file tree

Hide file tree

Showing 15 changed files with 132 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # [Decanter](https://github.com/SU-SWS/decanter)
-##### Version: 7.0.0-dev
+##### Version: 7
 
 Changelog: [CHANGELOG.md](CHANGELOG.md)
 
@@ -19,8 +19,11 @@ For Decanter v7, instead of using SASS/SCSS with the BEM naming convention, we u
 We have removed all assets from the repo in Decanter v7. Instead, we are using remote third party resources for our fonts and icons.
 
 ### Fonts
-- For Source Sans Pro, Source Serif Pro, Roboto Slab, Roboto Mono - we include them using the `@import` method from [Google Fonts](https://fonts.google.com/).
-- For the Stanford ligature font that we use for the logo, we link them from the [University Communications media CDN](https://www-media.stanford.edu/assets/fonts/stanford.woff).
+- We do not include any font assets with Decanter v7. If you want to use the Decanter fonts in your own projects, it is recommended that you use the font loading method that is optimized for your framework and only import the fonts that you need.
+- We provided two font css files that you can import into your own project so you get the latest update from us. `font.css` includes all the fonts that are referenced in the Decanter design system (sans-serif, serif, slab, monospace, Stanford ligature font for the logo). `font-basic.css` includes only the essential sans-serif, serif and Stanford ligature fonts.
+- For Source Sans 3, Source Serif 4, Roboto Slab, Roboto Mono - we include them using the `@import` method from [Google Fonts](https://fonts.google.com/).
+- The Stanford ligature font that we use for the logo is linked from the [University Communications media CDN](https://www-media.stanford.edu/assets/fonts/stanford.woff).
+
 
 ### Icons
 - We have removed FontAwesome (dependency and asset) completely from Decanter v7. For those who would like to continue using FontAwesome, please feel free to do so and include them using methods that are suitable for your own projects.

diff --git a/fonts-basic.css b/fonts-basic.css
@@ -0,0 +1,10 @@
+@charset "UTF-8";
+
+/** Source Sans 3, Source Serif 4 from Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
+@font-face {
+  font-family: "Stanford";
+  src: url("https://www-media.stanford.edu/assets/fonts/stanford.woff") format("woff"), url("https://www-media.stanford.edu/assets/fonts/stanford.ttf") format("truetype");
+  font-weight: 300;
+  font-display: swap;
+}
diff --git a/fonts.css b/fonts.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-/** Source Sans 3, Source Serif 4, Roboto Slab, Roboto Mono (regular only) */
+/** Source Sans 3, Source Serif 4, Roboto Slab, Roboto Mono (regular only) from Google Font */
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto+Slab:wght@300;400;700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
 @font-face {
   font-family: "Stanford";

diff --git a/src/plugins/components/form/buttons.js b/src/plugins/components/form/buttons.js
@@ -10,7 +10,7 @@ module.exports = function () {
         cursor: 'pointer',
         display: 'inline-block',
         border: 'none',
-        fontWeight: config('theme.fontWeight.regular'),
+        fontWeight: config('theme.fontWeight.normal'),
         lineHeight: '1',
         textAlign: 'center',
         textDecoration: 'none',

diff --git a/src/plugins/components/form/form-elements.js b/src/plugins/components/form/form-elements.js
@@ -33,19 +33,19 @@ module.exports = function () {
       '.textarea': {
         height: '16rem',
         display: 'block',
-        borderColor: theme('color.foggy-dark'),
+        borderColor: theme('colors.black.20'),
         color: theme('colors.black.DEFAULT'),
         fontSize: theme('decanter.base.inputFontSize'),
         lineHeight: theme('lineHeight.snug'),
       },
 
       '.select': {
         display: 'block',
-        borderColor: theme('color.foggy-dark'),
+        borderColor: theme('colors.black.20'),
         color: theme('colors.black.DEFAULT'),
         fontSize: theme('decanter.base.inputFontSize'),
         lineHeight: theme('lineHeight.snug'),
-        backgroundColor: theme('color.white'),
+        backgroundColor: theme('colors.white'),
       },
     };
 

diff --git a/src/plugins/components/form/input.js b/src/plugins/components/form/input.js
@@ -6,7 +6,7 @@ module.exports = function () {
     const components = {
       '.input': {
         display: 'block',
-        borderColor: theme('color.foggy-dark'),
+        borderColor: theme('colors.black.20'),
         color: theme('colors.black.DEFAULT'),
         fontSize: theme('decanter.base.inputFontSize'),
         lineHeight: theme('lineHeight.snug'),

diff --git a/src/plugins/components/layout/centered-container.js b/src/plugins/components/layout/centered-container.js
@@ -29,6 +29,10 @@ module.exports = function () {
           paddingLeft: 'calc((100% - 1500px)/2)',
           paddingRight: 'calc((100% - 1500px)/2)',
         },
+        '.centered-container, .cc': {
+          paddingLeft: 0,
+          paddingRight: 0,
+        },
       },
     };
 

diff --git a/src/plugins/components/logo/logo.js b/src/plugins/components/logo/logo.js
@@ -10,7 +10,7 @@ module.exports = function () {
       '.logo': {
         display: 'inline-block',
         fontFamily: stanford,
-        fontWeight: theme('fontWeight.regular'),
+        fontWeight: theme('fontWeight.normal'),
         lineHeight: '0.75',
         textDecoration: 'none',
         textTransform: 'none',

diff --git a/src/plugins/components/typography/wysiwyg.js b/src/plugins/components/typography/wysiwyg.js
@@ -3,7 +3,7 @@
  * within unstructured WYSIWYG content.
  */
 module.exports = function () {
-  return function ({ addComponents, theme }) {
+  return function ({ addComponents }) {
     const components = {
       '.wysiwyg': {
         '> *:first-child': {
@@ -13,7 +13,6 @@ module.exports = function () {
           marginBottom: '0',
         },
         'p, ol, ul, dl': {
-          color: theme('color.black.true'),
           marginBottom: '1.6em',
         },
         'li p': {

diff --git a/src/plugins/theme/colors.js b/src/plugins/theme/colors.js
@@ -10,6 +10,8 @@ module.exports = function () {
       DEFAULT: '#8C1515', // Stanford main brand color
       light: '#B83A4B',
       dark: '#820000',
+      xdark: '#7A0000', // Passed contrast test with digital-red-xlight as text
+      xxdark: '#541107', // Used for hover/focus color for xdark
     },
     // These replace the Tailwind default Black spectrum
     black: {
@@ -31,6 +33,7 @@ module.exports = function () {
     'digital-red': {
       DEFAULT: '#B1040E', // Same as old Bright Red in previous color palette
       light: '#E50808', // Same as old Vivid Red in previous color palette
+      xlight: '#F83535', // Passed contrast test as regular text on black background
       dark: '#820000', // Same as Dark Cardinal Red in previous color palette
     },
     'digital-blue': {
@@ -78,6 +81,9 @@ module.exports = function () {
       DEFAULT: '#007C92',
       light: '#009AB4',
       dark: '#006B81',
+      // Used for some form elements
+      20: '#CCEBF0',
+      40: '#8DD8E4',
     },
     poppy: {
       DEFAULT: '#E98300',

diff --git a/src/plugins/theme/fontSize.js b/src/plugins/theme/fontSize.js
@@ -4,7 +4,8 @@
  */
 module.exports = function () {
   return {
-    // text-11 to text-30 correspond to font sizes from 12px to 30px (in rem units)
+    // Font size under 10px (1rem) is not recommended
+    // text-11 to text-30 correspond to font sizes from 11px to 30px (in rem units)
     11: '1.1rem',
     12: '1.2rem',
     13: '1.3rem',
@@ -44,5 +45,6 @@ module.exports = function () {
     // text--m1 doesn't use the 1.25 scale factor.
     // Merely a convenience class for a slightly smaller font size than the base step
     '-m1': '0.9em',
+    '09em': '0.9em', // alias for text--m1
   };
 };
diff --git a/src/plugins/theme/gap.js b/src/plugins/theme/gap.js
@@ -3,6 +3,9 @@
  */
 module.exports = function () {
   return {
+    // Gap values honor all the options in plugins/theme/spacing plus the following
+    // These are the Decanter gap values that are tied to their corresponding breakpoints
+    // We also have a custom utility .grid-gap which is a combination of gap-xs lg:gap-lg xl:gap-xl 2xl:gap-2xl
     xs: '20px',
     lg: '36px',
     xl: '40px',

diff --git a/src/plugins/theme/spacing.js b/src/plugins/theme/spacing.js
@@ -1,8 +1,10 @@
 /**
- * Spacing - used in various classes such as margin and padding; individual values taken from Responsive Spacing map
+ * Spacing - used in various classes such as margin, padding, gap and width
+ * Values include curated steps from the modular (responsive) spacing system, plus some extra values for convenience
  */
 module.exports = function () {
   return {
+    px: '1px',
     0: '0',
     // Spacing utilities in em units are mostly used for typography elements,
     // e.g., spacing below headings, between paragraphs, list items, etc.
@@ -17,6 +19,7 @@ module.exports = function () {
     '09em': '0.9em',
     '1em': '1em',
     // Spacing utilities in rem units are mostly used for layout elements and do not scale with container font size
+    // From 1 to 50px in rem units, we have spacing values in 1px (0.1rem) increments
     1: '0.1rem',
     2: '0.2rem',
     3: '0.3rem',
@@ -47,43 +50,91 @@ module.exports = function () {
     28: '2.8rem',
     29: '2.9rem',
     30: '3rem',
+    31: '3.1em',
     32: '3.2rem',
+    33: '3.3rem',
     34: '3.4rem',
+    35: '3.5rem',
     36: '3.6rem',
+    37: '3.7rem',
     38: '3.8rem',
+    39: '3.9rem',
     40: '4rem',
+    41: '4.1rem',
+    42: '4.2rem',
+    43: '4.3rem',
+    44: '4.4rem',
     45: '4.5rem',
+    46: '4.6rem',
+    47: '4.7rem',
     48: '4.8rem',
+    49: '4.9rem',
     50: '5rem',
+    // From 50 to 100px in rem units, we have spacing values in 5px (0.5rem) increments
+    // plus curated values we have for our modular (responsive) spacing system, ie, in rs-p- rs-m- classes
+    55: '5.5rem',
     58: '5.8rem',
     60: '6rem',
     61: '6.1rem',
+    65: '6.5rem',
     70: '7rem',
     72: '7.2rem',
+    75: '7.5rem',
     76: '7.6rem',
     80: '8rem',
+    85: '8.5rem',
     90: '9rem',
     95: '9.5rem',
     100: '10rem',
     108: '10.8rem',
+    // From 100 to 300px in rem units, we have spacing values in 10px (1rem) increments
+    // plus curated values we have for our modular (responsive) spacing system, ie, in rs-p- rs-m- classes
+    110: '11rem',
     120: '12rem',
     114: '11.4rem',
     126: '12.6rem',
+    130: '13rem',
     133: '13.3rem',
     140: '14rem',
+    150: '15rem',
     160: '16rem',
     162: '16.2rem',
+    170: '17rem',
     171: '17.1rem',
+    180: '18rem',
+    190: '19rem',
     200: '20rem',
     216: '21.6rem',
+    220: '22rem',
     228: '22.8rem',
+    230: '23rem',
+    240: '24rem',
+    250: '25rem',
+    260: '26rem',
+    270: '27rem',
+    280: '28rem',
+    290: '29rem',
+    // From 300 to 1000px in rem units, we have spacing values in 50px (5rem) increments
     300: '30rem',
+    350: '35rem',
     400: '40rem',
+    450: '45rem',
     500: '50rem',
+    550: '55rem',
     600: '60rem',
+    650: '65rem',
     700: '70rem',
+    750: '75rem',
     800: '80rem',
+    850: '85rem',
     900: '90rem',
+    950: '95rem',
+    // From 1000 to 1500px in rem units, we have spacing values in 100px (10em) increments
     1000: '100rem',
+    1100: '110rem',
+    1200: '120rem',
+    1300: '130rem',
+    1400: '140rem',
+    1500: '150rem',
   };
 };
diff --git a/static/index.html b/static/index.html
@@ -12,18 +12,14 @@
 
   <!-- MAIN DEVELOPMENT AREA -->
   <a href="#top" class="skiplink">Skip to main content</a>
-  <div class="bg-digital-red pt-5 pb-1">
-    <div class="cc">
-      <a class="logo text-white hocus:text-white text-20" href="https://stanford.edu">Stanford
+  <div class="cc bg-digital-red pt-5 pb-1">
+    <a class="logo text-white hocus:text-white text-20" href="https://stanford.edu">Stanford
         University</a>
-    </div>
   </div>
-  <div role="banner" class="rs-py-6 bg-gradient-to-b from-black to-plum text-white">
-    <div class="centered-container">
-      <h1 class="splash-text">Decanter 7 With Tailwind Test Page.</h1>
-      <p class="intro-text">This is a test page filled with common HTML elements to be used to provide visual
-        feedback whilst building CSS systems and frameworks.</p>
-    </div>
+  <div role="banner" class="cc rs-py-6 bg-gradient-to-b from-black to-plum text-white">
+    <h1 class="splash-text">Decanter 7 With Tailwind Test Page.</h1>
+    <p class="intro-text">This is a test page filled with common HTML elements to be used to provide visual
+      feedback whilst building CSS systems and frameworks.</p>
   </div>
   <main id="top">
     <!-- Nav pills -->
@@ -141,6 +137,8 @@ <h2 class="type-5"><a href="#layouts" class="text-black hover:underline focus:un
             <li class="inline-block mb-12"><a href="#aspect-ratio"
                 class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Aspect
                 Ratio Containers</a></li>
+            <li class="inline-block mb-12"><a href="#cc"
+                  class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Centered Container</a></li>
           </ul>
         </nav>
       </div>
@@ -779,20 +777,20 @@ <h3 class="type-5 text-lagunita-light">Stone</h3>
             </div>
           </article>
 
-          <article id="color-palette-foggy" class="rs-mb-5">
+          <article id="color-palette-fog" class="rs-mb-5">
             <header>
-              <h3 class="type-5 text-lagunita-light">Foggy</h3>
+              <h3 class="type-5 text-lagunita-light">Fog</h3>
             </header>
             <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
               <div
-                class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-foggy">
+                class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-fog">
                 Default</div>
               <div
-                class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-foggy-dark">
-                foggy-dark</div>
+                class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-fog-dark">
+                fog-dark</div>
               <div
-                class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-foggy-light">
-                foggy-light</div>
+                class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-fog-light">
+                fog-light</div>
             </div>
           </article>
 
@@ -1291,10 +1289,30 @@ <h3 class="mb-0">2 x 1 Box</h3>
               </div>
             </div>
           </article>
+          <article id="cc" class="rs-mb-5">
+            <header>
+              <h3 class="type-5 text-lagunita-light">Centered container</h3>
+            </header>
+              <p class="max-w-prose-wide">
+                The centered container contains site content within a certain width. From the XS breakpoint up to 1700px device width, it creates a fluid container with spacing on each side of the screen (different for every breakpoint). At 1700px and above, it restricts the content within to a
+                box that maxes out at a width of 1500px, ie., at that point, it becomes a fixed-width container and is no longer fluid.
+              </p>
+            </header>
+            <div class="cc">
+              <div class="centered-container">
+                <div class="cc bg-spirited-light">
+                  <p class="rs-p-3">
+                    <strong>I'm a centered container.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae condimentum sem. Phasellus a ornare eros, eu scelerisque diam. Etiam lacinia, dui sit amet euismod malesuada, eros ante suscipit neque, vitae eleifend urna augue ac nunc. Suspendisse posuere fringilla nisi vel blandit. Vivamus arcu nisl, fermentum ut erat quis, condimentum sodales nulla. Sed sit amet cursus ipsum. Aliquam eleifend, neque vitae vehicula varius, lorem dui tincidunt sapien, a lacinia sapien augue non felis. Donec gravida auctor imperdiet. Maecenas hendrerit commodo congue. Cras libero neque, convallis eu cursus vitae, commodo posuere nunc. Fusce id tortor ex. Nullam tristique velit id mauris consequat, et pretium magna vestibulum. Etiam fringilla arcu bibendum, ornare sapien eget, mollis enim. Aliquam erat volutpat. Nulla facilisi.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </article>
         </div>
       </div>
     </section>
 
+
   </main>
   <div
     class='global-footer basefont-21 bg-digital-red rs-py-1 text-white link-white'>
@@ -1382,13 +1400,11 @@ <h3 class="mb-0">2 x 1 Box</h3>
       </div>
     </div>
   </div>
-  <footer role="contentinfo" class="bg-black text-white text-16 md:text-18 rs-py-2">
+  <footer role="contentinfo" class="cc bg-black text-white text-16 md:text-18 rs-py-2">
     <!-- HTML Test page based on sample provided by http://twitter.com/cbracco -->
-    <div class="cc">
-      <p class="mb-0">A TailwindCSS/Decanter v7 test page.</p>
-      <p><a href="https://www.netlify.com"><img src="https://www.netlify.com/img/global/badges/netlify-dark.svg"></a>
-      </p>
-    </div>
+    <p class="mb-0">A TailwindCSS/Decanter v7 test page.</p>
+    <p><a href="https://www.netlify.com"><img src="https://www.netlify.com/img/global/badges/netlify-dark.svg"></a>
+    </p>
     <a href="#top"
       class="hidden md:block fixed bottom-20 right-20 w-50 text-black hocus:text-plum transition-colors"><span
         class="sr-only">Back to top</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"