Alert / Admonition redesign

README.md

@@ -1,4 +1,4 @@
-# [Infima](https://facebookincubator.github.io/infima/) · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebookincubator/infima/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/infima.svg?style=flat)](https://www.npmjs.com/package/infima)
+# [Infima](https://infima.dev/) · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebookincubator/infima/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/infima.svg?style=flat)](https://www.npmjs.com/package/infima)
 
 > ⚠️ Infima is not yet ready for production use and is being developed alongside [Docusaurus 2](https://docusaurus.io/).
 

packages/core/demo/index.html

@@ -37,12 +37,16 @@
       }
 
       .main .color {
-        border-radius: 8px;
-        display: inline-block;
-        height: 3rem;
-        padding: 1rem;
-        text-align: center;
-        width: 3rem;
+          border-radius: 8px;
+          display: inline-block;
+          height: 3rem;
+          padding: 1rem;
+          text-align: center;
+          width: 3rem;
+      }
+      .main .color-contrast {
+          display: inline-block;
+          margin-left: 2rem;
       }
 
       .theme-switcher {
@@ -240,7 +244,7 @@ <h1 class="hero__title">Infima</h1>
     <div class="main">
       <div class="container">
         <div class="section">
-          <h1>Navbars</h1>
+          <h1>Navbars <a id="navbars" href="#navbars">#</a></h1>
           <div class="row">
             <div class="col">
               <nav class="navbar">
@@ -407,7 +411,7 @@ <h1>Navbars</h1>
           </div>
         </div>
         <div class="section">
-          <h1>Hero</h1>
+          <h1>Hero <a id="hero" href="#hero">#</a></h1>
           <div class="row">
             <div class="col">
               <div class="hero shadow--lw">
@@ -468,7 +472,7 @@ <h1 class="hero__title">Hero Title</h1>
           </div>
         </div>
         <div class="section">
-          <h1>Footer</h1>
+          <h1>Footer <a id="footer" href="#footer">#</a></h1>
           <div class="row">
             <div class="col">
               <footer class="footer">
@@ -669,7 +673,7 @@ <h4 class="footer__title">More</h4>
           </div>
         </div>
         <div class="section">
-          <h1>Menu and Contents</h1>
+          <h1>Menu and Contents <a id="menu-contents" href="#menu-contents">#</a></h1>
           <div class="row">
             <div class="col col--3">
               <div class="menu menu--responsive thin-scrollbar">
@@ -856,7 +860,7 @@ <h3>Why this is good</h3>
           </div>
         </div>
         <div class="section grid-demo">
-          <h1>Grid</h1>
+          <h1>Grid <a id="grid" href="#grid">#</a></h1>
           <h3>Twelve Column Layout</h3>
           <div class="row">
             <div class="col col--6">
@@ -1037,7 +1041,8 @@ <h3>No Gutters</h3>
           </div>
         </div>
         <div class="section">
-          <h1>Colors</h1>
+          <h1>Colors <a id="colors" href="#colors">#</a></h1>
+          <p>Click a color to copy its Hex code</p>
           <div class="row margin-vert--md">
             <div class="col col--3">
               <span class="text--bold">Primary</span>
@@ -1071,6 +1076,10 @@ <h1>Colors</h1>
                 class="color"
                 style="background-color: var(--ifm-color-primary-darkest);"
               ></div>
+              <div class="color-contrast">
+                <div class="color" style="background-color: var(--ifm-color-primary-contrast-background);"></div>
+                <div class="color" style="background-color: var(--ifm-color-primary-contrast-emphasis);"></div>
+              </div>
             </div>
           </div>
           <div class="row margin-vert--md">
@@ -1106,6 +1115,10 @@ <h1>Colors</h1>
                 class="color"
                 style="background-color: var(--ifm-color-secondary-darkest);"
               ></div>
+              <div class="color-contrast">
+                <div class="color" style="background-color: var(--ifm-color-secondary-contrast-background);"></div>
+                <div class="color" style="background-color: var(--ifm-color-secondary-contrast-emphasis);"></div>
+              </div>
             </div>
           </div>
           <div class="row margin-vert--md">
@@ -1141,6 +1154,10 @@ <h1>Colors</h1>
                 class="color"
                 style="background-color: var(--ifm-color-success-darkest);"
               ></div>
+              <div class="color-contrast">
+                <div class="color" style="background-color: var(--ifm-color-success-contrast-background);"></div>
+                <div class="color" style="background-color: var(--ifm-color-success-contrast-emphasis);"></div>
+              </div>
             </div>
           </div>
           <div class="row margin-vert--md">
@@ -1176,6 +1193,10 @@ <h1>Colors</h1>
                 class="color"
                 style="background-color: var(--ifm-color-info-darkest);"
               ></div>
+              <div class="color-contrast">
+                <div class="color" style="background-color: var(--ifm-color-info-contrast-background);"></div>
+                <div class="color" style="background-color: var(--ifm-color-info-contrast-emphasis);"></div>
+              </div>
             </div>
           </div>
           <div class="row margin-vert--md">
@@ -1211,6 +1232,10 @@ <h1>Colors</h1>
                 class="color"
                 style="background-color: var(--ifm-color-warning-darkest);"
               ></div>
+              <div class="color-contrast">
+                <div class="color" style="background-color: var(--ifm-color-warning-contrast-background);"></div>
+                <div class="color" style="background-color: var(--ifm-color-warning-contrast-emphasis);"></div>
+              </div>
             </div>
           </div>
           <div class="row margin-vert--md">
@@ -1246,6 +1271,10 @@ <h1>Colors</h1>
                 class="color"
                 style="background-color: var(--ifm-color-danger-darkest);"
               ></div>
+              <div class="color-contrast">
+                <div class="color" style="background-color: var(--ifm-color-danger-contrast-background);"></div>
+                <div class="color" style="background-color: var(--ifm-color-danger-contrast-emphasis);"></div>
+              </div>
             </div>
           </div>
           <div class="row margin-vert--md">
@@ -1301,7 +1330,7 @@ <h1>Colors</h1>
           </div>
         </div>
         <div class="section">
-          <h1>Buttons</h1>
+          <h1>Buttons <a id="buttons" href="#buttons">#</a></h1>
           <div class="row">
             <div class="col col--8">
               <div class="row margin-bottom--sm">
@@ -1539,7 +1568,7 @@ <h1>Buttons</h1>
           </div>
         </div>
         <div class="section">
-          <h1>Dropdown</h1>
+          <h1>Dropdown <a id="dropdown" href="#dropdown">#</a></h1>
           <div class="row">
             <div class="col">
               <div class="row">
@@ -1646,7 +1675,7 @@ <h1>Dropdown</h1>
           </div>
         </div>
         <div class="section">
-          <h1>Alerts</h1>
+          <h1>Alerts <a id="alerts" href="#alerts">#</a></h1>
           <div class="row">
             <div class="col">
               <div class="alert alert--primary" role="alert">
@@ -1696,9 +1725,39 @@ <h1>Alerts</h1>
               </div>
             </div>
           </div>
+
+          <div class="row">
+            <div class="col">
+              <div class="alert alert--info" role="alert">
+                Alert with tabs:
+                <ul class="tabs">
+                  <li class="tabs__item tabs__item--active">Timeline</li>
+                  <li class="tabs__item">About</li>
+                </ul>
+              </div>
+            </div>
+            <div class="col">
+              <div class="alert alert--warning" role="alert">
+                Alert with tabs:
+                <ul class="tabs">
+                  <li class="tabs__item tabs__item--active">Timeline</li>
+                  <li class="tabs__item">About</li>
+                </ul>
+              </div>
+            </div>
+            <div class="col">
+              <div class="alert alert--danger" role="alert">
+                Alert with tabs:
+                <ul class="tabs">
+                  <li class="tabs__item tabs__item--active">Timeline</li>
+                  <li class="tabs__item">About</li>
+                </ul>
+              </div>
+            </div>
+          </div>
         </div>
         <div class="section">
-          <h1>Badges</h1>
+          <h1>Badges <a id="badges" href="#badges">#</a></h1>
           <div class="row">
             <div class="col">
               <span class="badge badge--primary">Primary</span>
@@ -1741,7 +1800,7 @@ <h6>
         <div class="section">
           <div class="row">
             <div class="col">
-              <h1>Pills</h1>
+              <h1>Pills <a id="pills" href="#pills">#</a></h1>
               <h3>Standard Pills</h3>
               <div class="row margin-bottom--lg">
                 <div class="col">
@@ -1766,7 +1825,7 @@ <h3>Full-width Pills</h3>
               </div>
             </div>
             <div class="col">
-              <h1>Tabs</h1>
+              <h1>Tabs <a id="tabs" href="#tabs">#</a></h1>
               <h3>Standard Tabs</h3>
               <div class="row margin-bottom--lg">
                 <div class="col">
@@ -1795,7 +1854,7 @@ <h3>Full-Width Tabs</h3>
           </div>
         </div>
         <div class="section">
-          <h1>Pagination</h1>
+          <h1>Pagination <a id="pagination" href="#pagination">#</a></h1>
           <div class="row">
             <div class="col col--4">
               <ul class="pagination">
@@ -1869,7 +1928,7 @@ <h1>Pagination</h1>
           </div>
         </div>
         <div class="section">
-          <h1>Pagination Nav</h1>
+          <h1>Pagination Nav <a id="pagination-nav" href="#pagination-nav">#</a></h1>
           <div class="row">
             <div class="col col--5">
               <nav class="pagination-nav">
@@ -1943,7 +2002,7 @@ <h4 class="pagination-nav__label">
           </div>
         </div>
         <div class="section">
-          <h1>Breadcrumbs</h1>
+          <h1>Breadcrumbs <a id="breadcrumbs" href="#breadcrumbs">#</a></h1>
           <div class="row">
             <div class="col">
               <nav aria-label="breadcrumbs">
@@ -2006,7 +2065,7 @@ <h1>Breadcrumbs</h1>
           </div>
         </div>
         <div class="section">
-          <h1>Avatar</h1>
+          <h1>Avatar <a id="avatar" href="#avatar">#</a></h1>
           <h3>Horizontal Avatars</h3>
           <div class="row">
             <div class="col">
@@ -2126,7 +2185,7 @@ <h3>Vertical Avatars</h3>
           </div>
         </div>
         <div class="section">
-          <h1>Cards</h1>
+          <h1>Cards <a id="cards" href="#cards">#</a></h1>
           <div class="row">
             <div class="col">
               <div class="card">
@@ -2288,7 +2347,7 @@ <h4>Quaco Lighthouse</h4>
           </div>
         </div>
         <div class="section">
-          <h1>Typography</h1>
+          <h1>Typography <a id="typography" href="#typography">#</a></h1>
           <div class="row">
             <div class="col">
               <h1>Heading 1</h1>
@@ -2336,6 +2395,9 @@ <h2>Blockquotes</h2>
                   when it wraps. Oh boy let's keep writing to make sure this is
                   long enough to actually wrap for everyone. Oh, you can
                   <em>put</em> <strong>Markdown</strong> into a blockquote.
+                  Here's a
+                  <a href="#">link to <code>somewhere</code> else</a> and an
+                  <code>inline code block</code>
                 </p>
               </blockquote>
             </div>
@@ -2519,7 +2581,7 @@ <h3>You can use <code>code</code> in your headers.</h3>
           </div>
         </div>
         <div class="section">
-          <h1>Media</h1>
+          <h1>Media <a id="media" href="#media">#</a></h1>
           <div class="row">
             <div class="col col--6">
               <h2>Images</h2>
@@ -2539,7 +2601,7 @@ <h2>Images</h2>
           </div>
         </div>
         <div class="section grid-demo">
-          <h1>Shadows</h1>
+          <h1>Shadows <a id="shadows" href="#shadows">#</a></h1>
           <div class="row">
             <div class="col">
               <div class="col-inner shadow--lw">Low elevation</div>
@@ -2666,7 +2728,8 @@ <h4 class="footer__title">More</h4>
             rtl ? params.set("rtl",true) : params.delete("rtl");
             min ? params.set("min",true) : params.delete("min");
             const paramsString = params.toString();
-            history.pushState(null, null, `${window.location.pathname}${paramsString ? `?${paramsString}` : ''}`);
+            const newUrl = `${window.location.pathname}${paramsString ? `?${paramsString}` : ''}${window.location.hash}`
+            history.pushState(null, null, newUrl);
           }
 
           function syncRTL() {
@@ -2725,6 +2788,40 @@ <h4 class="footer__title">More</h4>
             toggleRTL();
           }
         });
+
+        // Make colors clickable to copy the hex code
+        // Convenient to debug color contrast accessibility issues
+        (function setupCopyColorClick() {
+          async function copyText(text) {
+            const result = await navigator.permissions.query({name: "clipboard-write"})
+            if (result.state === "granted" || result.state === "prompt") {
+              await navigator.clipboard.writeText(text)
+            }
+          }
+
+          // https://stackoverflow.com/a/3627747/82609
+          const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, '0').replace('NaN', '')).join('')}`
+
+          const colorElements = Array.from(document.getElementsByClassName('color'));
+          colorElements.forEach(colorElement => {
+            const computedStyle = window.getComputedStyle(colorElement);
+            const color = rgba2hex(computedStyle.backgroundColor);
+            colorElement.setAttribute('alt', `${color} (click to copy)`);
+            colorElement.setAttribute('title', `${color} (click to copy)`);
+            colorElement.style.cursor = "pointer";
+            colorElement.addEventListener('click', () => {
+              // Not sure why, need to redo that to get the good color reliably (otherwise it may copy #ffffff)
+              // Looks related to using themed css variables: the good color can only be obtained after stylesheet has loaded?
+              const clickedColor = rgba2hex(computedStyle.backgroundColor);
+              copyText(clickedColor).catch(console.error)
+              console.log(
+                "Color copied to clipboard",
+                {color,clickedColor,rgba: computedStyle.backgroundColor, var: colorElement.style.backgroundColor}
+              );
+            });
+          })
+        })();
+
       })();
     </script>
   </body>

packages/core/styles/common/dark-mode.pcss

@@ -37,4 +37,15 @@ html[data-theme='dark'] {
   --ifm-scrollbar-track-background-color: #444444;
   --ifm-scrollbar-thumb-background-color: #686868;
   --ifm-scrollbar-thumb-hover-background-color: #7a7a7a;
+
+  @each $color in (primary, secondary, success, info, warning, danger) {
+    --ifm-color-$(color)-contrast-background: color-mod(
+            var(--ifm-color-$(color)),
+            shade(var(--ifm-contrast-background-dark-value))
+    );
+    --ifm-color-$(color)-contrast-emphasis: color-mod(
+            var(--ifm-color-$(color)),
+            tint(var(--ifm-contrast-emphasis-dark-value))
+    );
+  }
 }