Alert / Admonition redesign #155

slorber · 2021-07-20T08:46:14Z

Fix #55

Changes

Redesign Infima alerts so that we can redesign Docusaurus admonitions:

Reuse existing Infima colors
Add new color variants --ifm-color-$(color)-contrast background + --ifm-color-$(color)-contrast-emphasis`
Emphasis on background pass WCAG contrast tests with AAA
Keep dark mode support
Make it easy to customize alerts/admonitions through CSS variables
Also redesign blockquotes to be consistent with alert design (and fix highly inaccessible contrast)
Support for tabs

Not directly related:

Simplify existing verbose color declaration with @each
Apply missing .clean-btn class on Alert doc page, issue appearing after refactor: remove redundant CSS declarations #150
Add anchor links to Infima demo sections

To review

Alerts: https://deploy-preview-155--infima.netlify.app/demo/#alerts
Alerts dark: https://deploy-preview-155--infima.netlify.app/demo/?dark=true#alerts
Alerts in Docusaurus: https://deploy-preview-155--infima.netlify.app/docs/components/alert
Quotes: https://deploy-preview-155--infima.netlify.app/demo/#typography
Quotes dark: https://deploy-preview-155--infima.netlify.app/demo/?dark=true#typography

Screenshots

Will try to keep them up-to-date with current code:

Infima alerts

Docusaurus admonitions

Quotes

github-actions · 2021-07-20T08:47:29Z

Dist CSS Diff

diff --git a/packages/core/dist/css/default/default.css b/packages/core/dist-branch/css/default/default.css
index 935b651..f8b1dc3 100644
--- a/packages/core/dist/css/default/default.css
+++ b/packages/core/dist-branch/css/default/default.css
@@ -32,53 +32,72 @@
   --ifm-lighter-value: 30%;
   --ifm-lightest-value: 50%;
 
-  --ifm-color-primary: #3578e5;
-  --ifm-color-primary-dark: rgb(48, 108, 206);
-  --ifm-color-primary-darker: rgb(45, 102, 195);
-  --ifm-color-primary-darkest: rgb(37, 84, 160);
-  --ifm-color-primary-light: rgb(83, 140, 233);
-  --ifm-color-primary-lighter: rgb(114, 161, 237);
-  --ifm-color-primary-lightest: rgb(154, 188, 242);
+  /*
+  This seems like a lot, but we want to ensure enough contrast.
+  Goal is to have a min score of 3 on https://www.myndex.com/APCA/fullmatrix
+  For fontWeight 400 + score 3, the cell must show a value < 16px (fontsize we use in places like alerts)
+  See also https://github.com/facebookincubator/infima/issues/55#issuecomment-884023075
+   */
+  --ifm-contrast-background-value: 90%;
+  --ifm-contrast-emphasis-value: 70%;
+  /* Using slightly different values for dark mode */
+  --ifm-contrast-background-dark-value: 70%;
+  --ifm-contrast-emphasis-dark-value: 90%;
 
+  --ifm-color-primary: #3578e5;
   --ifm-color-secondary: #ebedf0;
-  --ifm-color-secondary-dark: rgb(212, 213, 216);
-  --ifm-color-secondary-darker: rgb(200, 201, 204);
-  --ifm-color-secondary-darkest: rgb(164, 166, 168);
-  --ifm-color-secondary-light: rgb(238, 240, 242);
-  --ifm-color-secondary-lighter: rgb(241, 242, 245);
-  --ifm-color-secondary-lightest: rgb(245, 246, 248);
-
   --ifm-color-success: #00a400;
-  --ifm-color-success-dark: rgb(0, 148, 0);
-  --ifm-color-success-darker: rgb(0, 139, 0);
-  --ifm-color-success-darkest: rgb(0, 115, 0);
-  --ifm-color-success-light: rgb(38, 178, 38);
-  --ifm-color-success-lighter: rgb(77, 191, 77);
-  --ifm-color-success-lightest: rgb(128, 210, 128);
-
   --ifm-color-info: #54c7ec;
-  --ifm-color-info-dark: rgb(76, 179, 212);
-  --ifm-color-info-darker: rgb(71, 169, 201);
-  --ifm-color-info-darkest: rgb(59, 139, 165);
-  --ifm-color-info-light: rgb(110, 207, 239);
-  --ifm-color-info-lighter: rgb(135, 216, 242);
-  --ifm-color-info-lightest: rgb(170, 227, 246);
-
   --ifm-color-warning: #ffba00;
-  --ifm-color-warning-dark: rgb(230, 167, 0);
-  --ifm-color-warning-darker: rgb(217, 158, 0);
-  --ifm-color-warning-darkest: rgb(179, 130, 0);
-  --ifm-color-warning-light: rgb(255, 196, 38);
-  --ifm-color-warning-lighter: rgb(255, 207, 77);
-  --ifm-color-warning-lightest: rgb(255, 221, 128);
-
   --ifm-color-danger: #fa383e;
-  --ifm-color-danger-dark: rgb(225, 50, 56);
-  --ifm-color-danger-darker: rgb(213, 48, 53);
-  --ifm-color-danger-darkest: rgb(175, 39, 43);
-  --ifm-color-danger-light: rgb(251, 86, 91);
-  --ifm-color-danger-lighter: rgb(251, 116, 120);
-  --ifm-color-danger-lightest: rgb(253, 156, 159);
+    --ifm-color-primary-dark: rgb(48, 108, 206);
+    --ifm-color-primary-darker: rgb(45, 102, 195);
+    --ifm-color-primary-darkest: rgb(37, 84, 160);
+    --ifm-color-primary-light: rgb(83, 140, 233);
+    --ifm-color-primary-lighter: rgb(114, 161, 237);
+    --ifm-color-primary-lightest: rgb(154, 188, 242);
+    --ifm-color-primary-contrast-background: rgb(235, 242, 252);
+    --ifm-color-primary-contrast-emphasis: rgb(16, 36, 69);
+    --ifm-color-secondary-dark: rgb(212, 213, 216);
+    --ifm-color-secondary-darker: rgb(200, 201, 204);
+    --ifm-color-secondary-darkest: rgb(164, 166, 168);
+    --ifm-color-secondary-light: rgb(238, 240, 242);
+    --ifm-color-secondary-lighter: rgb(241, 242, 245);
+    --ifm-color-secondary-lightest: rgb(245, 246, 248);
+    --ifm-color-secondary-contrast-background: rgb(253, 253, 254);
+    --ifm-color-secondary-contrast-emphasis: rgb(71, 71, 72);
+    --ifm-color-success-dark: rgb(0, 148, 0);
+    --ifm-color-success-darker: rgb(0, 139, 0);
+    --ifm-color-success-darkest: rgb(0, 115, 0);
+    --ifm-color-success-light: rgb(38, 178, 38);
+    --ifm-color-success-lighter: rgb(77, 191, 77);
+    --ifm-color-success-lightest: rgb(128, 210, 128);
+    --ifm-color-success-contrast-background: rgb(230, 246, 230);
+    --ifm-color-success-contrast-emphasis: rgb(0, 49, 0);
+    --ifm-color-info-dark: rgb(76, 179, 212);
+    --ifm-color-info-darker: rgb(71, 169, 201);
+    --ifm-color-info-darkest: rgb(59, 139, 165);
+    --ifm-color-info-light: rgb(110, 207, 239);
+    --ifm-color-info-lighter: rgb(135, 216, 242);
+    --ifm-color-info-lightest: rgb(170, 227, 246);
+    --ifm-color-info-contrast-background: rgb(238, 249, 253);
+    --ifm-color-info-contrast-emphasis: rgb(25, 60, 71);
+    --ifm-color-warning-dark: rgb(230, 167, 0);
+    --ifm-color-warning-darker: rgb(217, 158, 0);
+    --ifm-color-warning-darkest: rgb(179, 130, 0);
+    --ifm-color-warning-light: rgb(255, 196, 38);
+    --ifm-color-warning-lighter: rgb(255, 207, 77);
+    --ifm-color-warning-lightest: rgb(255, 221, 128);
+    --ifm-color-warning-contrast-background: rgb(255, 248, 230);
+    --ifm-color-warning-contrast-emphasis: rgb(77, 56, 0);
+    --ifm-color-danger-dark: rgb(225, 50, 56);
+    --ifm-color-danger-darker: rgb(213, 48, 53);
+    --ifm-color-danger-darkest: rgb(175, 39, 43);
+    --ifm-color-danger-light: rgb(251, 86, 91);
+    --ifm-color-danger-lighter: rgb(251, 116, 120);
+    --ifm-color-danger-lightest: rgb(253, 156, 159);
+    --ifm-color-danger-contrast-background: rgb(255, 235, 236);
+    --ifm-color-danger-contrast-emphasis: rgb(75, 17, 19);
 
   --ifm-color-white: #fff;
   --ifm-color-black: #000;
@@ -163,7 +182,7 @@
   --ifm-code-background: rgb(246, 247, 248);
   --ifm-code-border-radius: var(--ifm-global-radius);
   --ifm-code-font-size: 90%;
-  --ifm-code-padding-horizontal: 0.3rem;
+  --ifm-code-padding-horizontal: 0.1rem;
   --ifm-code-padding-vertical: 0.1rem;
 
   --ifm-pre-background: var(--ifm-color-emphasis-100);
@@ -216,10 +235,19 @@
   --ifm-paragraph-margin-bottom: var(--ifm-leading);
 
   /* Blockquotes. */
-  --ifm-blockquote-color: #6a737d;
   --ifm-blockquote-font-size: var(--ifm-font-size-base);
-  --ifm-blockquote-padding-horizontal: 1rem;
-  --ifm-blockquote-padding-vertical: 1rem;
+  --ifm-blockquote-border-radius: var(--ifm-global-radius);
+  --ifm-blockquote-border-width: 0px; /* For users that want to easily add a border */
+  --ifm-blockquote-border-left-width: 5px;
+  --ifm-blockquote-color: var(--ifm-font-color-base);
+  --ifm-blockquote-padding-horizontal: var(--ifm-spacing-horizontal);
+  --ifm-blockquote-padding-vertical: var(--ifm-spacing-vertical);
+  --ifm-blockquote-shadow: var(--ifm-global-shadow-lw);
+  --ifm-blockquote-background-color: var(
+    --ifm-color-secondary-contrast-background
+  );
+  --ifm-blockquote-emphasis-color: var(--ifm-color-secondary-contrast-emphasis);
+  --ifm-blockquote-border-color: var(--ifm-color-secondary-dark);
 
   /* Horizontal Rules. */
   --ifm-hr-border-color: var(--ifm-color-emphasis-500);
@@ -232,10 +260,12 @@
   --ifm-alert-background-color: inherit; /* Set a default which will be overridden later. */
   --ifm-alert-border-color: inherit; /* Set a default which will be overridden later. */
   --ifm-alert-border-radius: var(--ifm-global-radius);
-  --ifm-alert-border-width: var(--ifm-global-border-width);
-  --ifm-alert-color: var(--ifm-font-color-base-inverse);
+  --ifm-alert-border-width: 0px; /* For users that want to easily add a border */
+  --ifm-alert-border-left-width: 5px;
+  --ifm-alert-color: var(--ifm-font-color-base);
   --ifm-alert-padding-horizontal: var(--ifm-spacing-horizontal);
   --ifm-alert-padding-vertical: var(--ifm-spacing-vertical);
+  --ifm-alert-shadow: var(--ifm-global-shadow-lw);
   --ifm-avatar-intro-margin: 1rem;
   --ifm-avatar-intro-alignment: inherit;
   --ifm-avatar-photo-size-sm: 2rem;
@@ -335,6 +365,7 @@
   --ifm-pills-spacing: 0.0625rem;
   --ifm-tabs-color: var(--ifm-font-color-secondary);
   --ifm-tabs-color-active: var(--ifm-color-primary);
+  --ifm-tabs-color-active-border: var(--ifm-tabs-color-active);
   --ifm-tabs-padding-horizontal: 1rem;
   --ifm-tabs-padding-vertical: 1rem;
   --ifm-tabs-spacing: 0.0625rem;
@@ -1271,8 +1302,20 @@ p {
 /* Blockquotes */
 
 blockquote {
-  border-left: 6px solid var(--ifm-color-emphasis-300);
-  color: var(--ifm-blockquote-color);
+  --ifm-code-background: rgba(235, 237, 240, 0.15);
+  --ifm-link-color: var(--ifm-blockquote-emphasis-color);
+  --ifm-link-hover-color: var(--ifm-blockquote-emphasis-color);
+  --ifm-link-decoration: underline;
+
+  background-color: var(--ifm-blockquote-background-color);
+  border-color: var(--ifm-blockquote-border-color);
+  border-style: solid;
+  border-width: var(--ifm-blockquote-border-width);
+  border-left-width: var(--ifm-blockquote-border-left-width);
+  border-radius: var(--ifm-blockquote-border-radius);
+  box-shadow: var(--ifm-blockquote-shadow);
+  color: var(--ifm-blockquote-emphasis-color);
+
   font-size: var(--ifm-blockquote-font-size);
   margin: 0 0 var(--ifm-spacing-vertical);
   padding: var(--ifm-blockquote-padding-vertical)
@@ -1287,6 +1330,16 @@ blockquote > :last-child {
     margin-bottom: 0;
   }
 
+blockquote a {
+    -webkit-text-decoration-color: var(--ifm-blockquote-border-color);
+            text-decoration-color: var(--ifm-blockquote-border-color);
+  }
+
+blockquote a:hover,
+    blockquote a:focus {
+      text-decoration-thickness: 2px;
+    }
+
 /* Horizontal Rules */
 
 hr {
@@ -1456,58 +1509,107 @@ hr:after {
  * LICENSE file in the root directory of this source tree.
  */
 
-.alert {
-  --ifm-code-background: rgba(0, 0, 0, 0.05);
-  background-color: var(--ifm-alert-background-color);
-  border-color: var(--ifm-alert-border-color);
-  border-radius: var(--ifm-alert-border-radius);
-  border-style: solid;
-  border-width: var(--ifm-alert-border-width);
-  color: var(--ifm-alert-color);
-  padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal);
-}
-
 .alert--primary {
-      --ifm-alert-background-color: var(--ifm-color-primary);
-      --ifm-alert-border-color: var(--ifm-color-primary);
+      --ifm-alert-background-color: var(
+        --ifm-color-primary-contrast-background
+      );
+      --ifm-alert-background-color-highlight: rgba(53, 120, 229, 0.15);
+      --ifm-alert-emphasis-color: var(--ifm-color-primary-contrast-emphasis);
+      --ifm-alert-border-color: var(--ifm-color-primary-dark);
     }
 
 .alert--secondary {
-      --ifm-alert-background-color: var(--ifm-color-secondary);
-      --ifm-alert-border-color: var(--ifm-color-secondary);
-    --ifm-alert-color: var(--ifm-color-gray-900);
+      --ifm-alert-background-color: var(
+        --ifm-color-secondary-contrast-background
+      );
+      --ifm-alert-background-color-highlight: rgba(235, 237, 240, 0.15);
+      --ifm-alert-emphasis-color: var(--ifm-color-secondary-contrast-emphasis);
+      --ifm-alert-border-color: var(--ifm-color-secondary-dark);
     }
 
 .alert--success {
-      --ifm-alert-background-color: var(--ifm-color-success);
-      --ifm-alert-border-color: var(--ifm-color-success);
+      --ifm-alert-background-color: var(
+        --ifm-color-success-contrast-background
+      );
+      --ifm-alert-background-color-highlight: rgba(0, 164, 0, 0.15);
+      --ifm-alert-emphasis-color: var(--ifm-color-success-contrast-emphasis);
+      --ifm-alert-border-color: var(--ifm-color-success-dark);
     }
 
 .alert--info {
-      --ifm-alert-background-color: var(--ifm-color-info);
-      --ifm-alert-border-color: var(--ifm-color-info);
+      --ifm-alert-background-color: var(
+        --ifm-color-info-contrast-background
+      );
+      --ifm-alert-background-color-highlight: rgba(84, 199, 236, 0.15);
+      --ifm-alert-emphasis-color: var(--ifm-color-info-contrast-emphasis);
+      --ifm-alert-border-color: var(--ifm-color-info-dark);
     }
 
 .alert--warning {
-      --ifm-alert-background-color: var(--ifm-color-warning);
-      --ifm-alert-border-color: var(--ifm-color-warning);
+      --ifm-alert-background-color: var(
+        --ifm-color-warning-contrast-background
+      );
+      --ifm-alert-background-color-highlight: rgba(255, 186, 0, 0.15);
+      --ifm-alert-emphasis-color: var(--ifm-color-warning-contrast-emphasis);
+      --ifm-alert-border-color: var(--ifm-color-warning-dark);
     }
 
 .alert--danger {
-      --ifm-alert-background-color: var(--ifm-color-danger);
-      --ifm-alert-border-color: var(--ifm-color-danger);
+      --ifm-alert-background-color: var(
+        --ifm-color-danger-contrast-background
+      );
+      --ifm-alert-background-color-highlight: rgba(250, 56, 62, 0.15);
+      --ifm-alert-emphasis-color: var(--ifm-color-danger-contrast-emphasis);
+      --ifm-alert-border-color: var(--ifm-color-danger-dark);
     }
 
-.alert a {
-    color: var(--ifm-alert-color);
-    text-decoration: underline;
-  }
+.alert {
+
+  --ifm-code-background: var(--ifm-alert-background-color-highlight);
+  --ifm-link-color: var(--ifm-alert-emphasis-color);
+  --ifm-link-hover-color: var(--ifm-alert-emphasis-color);
+  --ifm-link-decoration: underline;
+  --ifm-tabs-color: var(--ifm-alert-emphasis-color);
+  --ifm-tabs-color-active: var(--ifm-alert-emphasis-color);
+  --ifm-tabs-color-active-border: var(--ifm-alert-border-color);
+
+  background-color: var(--ifm-alert-background-color);
+  border-color: var(--ifm-alert-border-color);
+  border-style: solid;
+  border-width: var(--ifm-alert-border-width);
+  border-left-width: var(--ifm-alert-border-left-width);
+  border-radius: var(--ifm-alert-border-radius);
+  box-shadow: var(--ifm-alert-shadow);
+  color: var(--ifm-alert-emphasis-color);
+  padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal);
+}
 
 .alert .close {
+    color: var(--ifm-alert-emphasis-color);
     margin: calc(var(--ifm-alert-padding-vertical) * -1)
       calc(var(--ifm-alert-padding-horizontal) * -1) 0 0;
+
+    opacity: 0.75;
   }
 
+.alert .close:hover {
+      opacity: 1;
+    }
+
+.alert .close:focus {
+      opacity: 1;
+    }
+
+.alert a {
+    -webkit-text-decoration-color: var(--ifm-alert-border-color);
+            text-decoration-color: var(--ifm-alert-border-color);
+  }
+
+.alert a:hover,
+    .alert a:focus {
+      text-decoration-thickness: 2px;
+    }
+
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
@@ -2858,7 +2960,7 @@ html[data-theme='dark'],
   }
 
 .tabs__item--active {
-      border-bottom-color: var(--ifm-tabs-color-active);
+      border-bottom-color: var(--ifm-tabs-color-active-border);
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
       color: var(--ifm-tabs-color-active);
@@ -2916,6 +3018,18 @@ html[data-theme='dark'] {
   --ifm-scrollbar-track-background-color: #444444;
   --ifm-scrollbar-thumb-background-color: #686868;
   --ifm-scrollbar-thumb-hover-background-color: #7a7a7a;
+    --ifm-color-primary-contrast-background: rgb(16, 36, 69);
+    --ifm-color-primary-contrast-emphasis: rgb(235, 242, 252);
+    --ifm-color-secondary-contrast-background: rgb(71, 71, 72);
+    --ifm-color-secondary-contrast-emphasis: rgb(253, 253, 254);
+    --ifm-color-success-contrast-background: rgb(0, 49, 0);
+    --ifm-color-success-contrast-emphasis: rgb(230, 246, 230);
+    --ifm-color-info-contrast-background: rgb(25, 60, 71);
+    --ifm-color-info-contrast-emphasis: rgb(238, 249, 253);
+    --ifm-color-warning-contrast-background: rgb(77, 56, 0);
+    --ifm-color-warning-contrast-emphasis: rgb(255, 248, 230);
+    --ifm-color-danger-contrast-background: rgb(75, 17, 19);
+    --ifm-color-danger-contrast-emphasis: rgb(255, 235, 236)
 }
 
 @media (min-width: 1440px) {

github-actions · 2021-07-20T08:47:57Z

Size Change: +41.1 kB (+8%) 🔍

Total Size: 579 kB

Filename	Size	Change
`./packages/core/dist/css/default-dark/default-dark-rtl.css`	84.3 kB	+6.21 kB (+8%)	🔍
`./packages/core/dist/css/default-dark/default-dark-rtl.min.css`	59.1 kB	+4.73 kB (+9%)	🔍
`./packages/core/dist/css/default-dark/default-dark.css`	84.2 kB	+6.21 kB (+8%)	🔍
`./packages/core/dist/css/default-dark/default-dark.min.css`	59.1 kB	+4.73 kB (+9%)	🔍
`./packages/core/dist/css/default/default-rtl.css`	82.7 kB	+5.46 kB (+7%)	🔍
`./packages/core/dist/css/default/default-rtl.min.css`	58 kB	+4.17 kB (+8%)	🔍
`./packages/core/dist/css/default/default.css`	82.7 kB	+5.46 kB (+7%)	🔍
`./packages/core/dist/css/default/default.min.css`	58 kB	+4.17 kB (+8%)	🔍

ℹ️ View Unchanged

Filename	Size
`./packages/core/dist/js/alerts.js`	409 B
`./packages/core/dist/js/alerts.min.js`	409 B
`./packages/core/dist/js/button-groups.js`	267 B
`./packages/core/dist/js/button-groups.min.js`	267 B
`./packages/core/dist/js/dropdowns.js`	1.01 kB
`./packages/core/dist/js/dropdowns.min.js`	1.01 kB
`./packages/core/dist/js/menu.js`	1.74 kB
`./packages/core/dist/js/menu.min.js`	1.74 kB
`./packages/core/dist/js/navbar.js`	926 B
`./packages/core/dist/js/navbar.min.js`	926 B
`./packages/core/dist/js/pills.js`	270 B
`./packages/core/dist/js/pills.min.js`	270 B
`./packages/core/dist/js/radio-behavior.js`	705 B
`./packages/core/dist/js/radio-behavior.min.js`	705 B
`./packages/core/dist/js/tabs.js`	267 B
`./packages/core/dist/js/tabs.min.js`	267 B

_{compressed-size-action}

netlify · 2021-07-20T08:48:51Z

✔️ Deploy Preview for infima ready!

🔨 Explore the source changes: 44487b4

🔍 Inspect the deploy log: https://app.netlify.com/sites/infima/deploys/60f8055e7d8db000071b06ea

😎 Browse the preview: https://deploy-preview-155--infima.netlify.app

HonkingGoose · 2021-07-20T10:30:54Z

This looks way better than what we have now! 🚀

I did notice 2 things though...

Edge case fixed with new design?

Does the new design fix this edge-case?

Another edge case admonitions redesign should take into account:

X text/button to close alert lacks contrast

Lowest contrast score for the X text on colored backgrounds is 2.49:1 in the non-active state.

Check the contrast for all icons.

Level AA compliance requires a contrast ratio of 3.0:1.

https://www.a11yproject.com/checklist/#color-contrast

Steps to reproduce:

Use latest Firefox browser
Open the preview https://deploy-preview-155--infima.netlify.app/demo/#alerts
Turn on developer toolbar with F12
Use the accessibility picker to hover over the X text of the alert
See contrast check fails AA contrast checks for the X text on all alerts

Chrome probably also has a accessibility tab with tools to detect the contrast of a element.

slorber · 2021-07-20T10:02:11Z

packages/core/styles/common/variables.pcss

+    --ifm-color-$(color)-contrast-background: color-mod(
+      var(--ifm-color-$(color)),
+      tint(var(--ifm-contrast-background-value))
+    );
+    --ifm-color-$(color)-contrast-emphasis: color-mod(
+      var(--ifm-color-$(color)),
+      shade(var(--ifm-contrast-emphasis-value))


New color variants.

We should be able to write text of color "contrast-emphasis" on background of color "contrast-background", passing WCAG AAA grade.

Not sure those names are the best though, let me know if you have ideas

slorber · 2021-07-20T10:02:33Z

packages/core/styles/common/variables.pcss

+    --ifm-color-$(color)-dark: color-mod(
+      var(--ifm-color-$(color)) shade(var(--ifm-dark-value))
+    );
+    --ifm-color-$(color)-darker: color-mod(
+      var(--ifm-color-$(color)),
+      shade(var(--ifm-darker-value))
+    );
+    --ifm-color-$(color)-darkest: color-mod(
+      var(--ifm-color-$(color)),
+      shade(var(--ifm-darkest-value))
+    );
+    --ifm-color-$(color)-light: color-mod(
+      var(--ifm-color-$(color)),
+      tint(var(--ifm-light-value))
+    );
+    --ifm-color-$(color)-lighter: color-mod(
+      var(--ifm-color-$(color)),
+      tint(var(--ifm-lighter-value))
+    );
+    --ifm-color-$(color)-lightest: color-mod(
+      var(--ifm-color-$(color)),
+      tint(var(--ifm-lightest-value))
+    );


Just refactor existing verbose color declaration

slorber · 2021-07-20T10:04:44Z

packages/core/styles/components/alert.pcss

+      );
+      --ifm-alert-emphasis-color: var(--ifm-color-$(color)-contrast-emphasis);
+      --ifm-alert-border-color: var(--ifm-color-$(color)-dark);
+      --ifm-code-background: color-mod(var(--ifm-color-$(color)) alpha(20%));


Finding a good background color for inline code blocks in alerts is not very easy. It's hard to make the inline code block visible without losing the WCAG AAA grade.
This is not perfect but always pass AA and gives a minimum contrast of 6 for text/background.

slorber · 2021-07-20T11:45:01Z

Thanks @HonkingGoose , these should be better now.

Added the tabs in alerts edge case to the demo page and screenshots.

Added a little hover effect on links, not very visible through but can't make it more visible without a lower contrast ratio, so it seems better to keep the link text readable.

HonkingGoose · 2021-07-20T12:01:31Z

Thanks @HonkingGoose , these should be better now.

The close button is way more visible now! 😄

Added the tabs in alerts edge case to the demo page and screenshots.

The alert component with tabs in them don't have a close button X, is that intended behavior?

slorber · 2021-07-20T12:02:26Z

@HonkingGoose not intended but not important. The close button is optional and Docusaurus doesn't even use it.

HonkingGoose · 2021-07-20T12:06:59Z

Added a little hover effect on links, not very visible through but can't make it more visible without a lower contrast ratio, so it seems better to keep the link text readable.

That hover effect is very subtle. I think it needs to be a lot clearer. 😉

Is it an option to make the link text a bit bolder when you hover over it?
Something like this, but in Infima:

a:hover {
  font-weight: 700;// bold
}

slorber · 2021-07-20T12:21:39Z

Is it an option to make the link text a bit bolder when you hover over it?

Not a good idea because link width will increase and this triggers potential layout changes on the alert (could create new lines)

I don't have much ideas how to make it more visible, because using a darker/lighter color is not very visible. Some things remain possible, like using text-shadow...

HonkingGoose · 2021-07-20T12:37:12Z

Some things remain possible, like using text-shadow...

I tried adding text-shadow to a tags in the browser, and it looks bad, and makes the text harder to read. 😞

I did try this in the browser, which looks nice:

a:hover {
  text-decoration-thickness: 2px,
}

But this is probably also a bad idea, because of possible layout shifts?

slorber · 2021-07-20T13:40:11Z

Thanks, will take a look at that solution.

Using link opacity is not too great for text selection, as @Simek mentioned, so I'd rather find another way:

slorber · 2021-07-20T13:55:18Z

Seems to work fine. Not perfect but a good enough solution.

Which is better, on link :hover ?

HonkingGoose · 2021-07-20T14:09:50Z

Which is better, on link :hover ?

I like the bottom variant the best, as it uses a dark hue of the background color. This way it feels like the underline belongs to the component.

slorber · 2021-07-20T14:24:06Z

I like the bottom variant the best, as it uses a dark hue of the background color. This way it feels like the underline belongs to the component.

Let's test this then, not too hard to revert if people disagree

@lex111 @yangshun I don't like too much having this inline code block horizontal padding, as it breaks the link underline and separates too much the word from the rest.

Going to reduce it (globally, not just in admonitions), let me know if that's a problem:

slorber added 2 commits July 20, 2021 10:32

POC of admonitions redesign

5f37aab

alert border / shadow

33f97ee

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jul 20, 2021

slorber added 5 commits July 20, 2021 11:02

upgrade website

74e5064

add missing clean-btn class

fbb8e77

update lockfile

b75b64b

update lockfile

a3be965

add anchor links to infima demo

885cb70

slorber linked an issue Jul 20, 2021 that may be closed by this pull request

Restyle admonitions #55

Closed

This was referenced Jul 20, 2021

Theme colors do not meet accessibility standards for color contrast #139

Open

Restyle admonitions #55

Closed

improve blockquotes demo

537ab05

slorber added 2 commits July 20, 2021 12:40

redesign blockquotes

3de49c4

polish + expose more flexibility through css variables

0430d7f

slorber commented Jul 20, 2021

View reviewed changes

slorber added 2 commits July 20, 2021 13:18

minor cleanup

13c5bdc

Polish close button + links

870abec

apply text-decoration-thickness on link hover

26d6e86

slorber added 2 commits July 20, 2021 16:25

reduce inline code block vertical padding

3155e95

apply color to link decoration

bcee8bd

slorber mentioned this pull request Jul 20, 2021

refactor: redesign admonitions/callouts/quotes facebook/docusaurus#5193

Merged

slorber and others added 8 commits July 21, 2021 10:12

make infima demo colors clickable

b9057d6

fix weird color copy issue

2c34ea2

useful comment

5052e67

adjust colors for more contrast

006ee4e

fix alert light colors

ba2179d

tweak close button opacity to make hover transition more visible

ea2200b

tweak close button opacity to make hover transition more visible

d17e630

chore: use correct website URL in Readme (#156)

44487b4

slorber merged commit 8b9d19f into master Jul 23, 2021

yangshun deleted the slorber/admonitions-redesign branch September 1, 2021 03:27

Josh-Cena mentioned this pull request Dec 21, 2021

Admonitions reverted back to pre-beta.4 design when using yarn 3 PnP facebook/docusaurus#6140

Closed

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Alert / Admonition redesign #155

Alert / Admonition redesign #155

slorber commented Jul 20, 2021 •

edited

Loading

github-actions bot commented Jul 20, 2021 •

edited

Loading

github-actions bot commented Jul 20, 2021 •

edited

Loading

netlify bot commented Jul 20, 2021 •

edited

Loading

HonkingGoose commented Jul 20, 2021

slorber Jul 20, 2021

slorber Jul 20, 2021

slorber Jul 20, 2021

slorber commented Jul 20, 2021 •

edited

Loading

HonkingGoose commented Jul 20, 2021

slorber commented Jul 20, 2021

HonkingGoose commented Jul 20, 2021

slorber commented Jul 20, 2021

HonkingGoose commented Jul 20, 2021

slorber commented Jul 20, 2021

slorber commented Jul 20, 2021 •

edited

Loading

HonkingGoose commented Jul 20, 2021

slorber commented Jul 20, 2021 •

edited

Loading

Alert / Admonition redesign #155

Alert / Admonition redesign #155

Conversation

slorber commented Jul 20, 2021 • edited Loading

Changes

To review

Screenshots

Infima alerts

Docusaurus admonitions

Quotes

github-actions bot commented Jul 20, 2021 • edited Loading

Dist CSS Diff

github-actions bot commented Jul 20, 2021 • edited Loading

netlify bot commented Jul 20, 2021 • edited Loading

HonkingGoose commented Jul 20, 2021

Edge case fixed with new design?

X text/button to close alert lacks contrast

slorber Jul 20, 2021

Choose a reason for hiding this comment

slorber Jul 20, 2021

Choose a reason for hiding this comment

slorber Jul 20, 2021

Choose a reason for hiding this comment

slorber commented Jul 20, 2021 • edited Loading

HonkingGoose commented Jul 20, 2021

slorber commented Jul 20, 2021

HonkingGoose commented Jul 20, 2021

slorber commented Jul 20, 2021

HonkingGoose commented Jul 20, 2021

slorber commented Jul 20, 2021

slorber commented Jul 20, 2021 • edited Loading

HonkingGoose commented Jul 20, 2021

slorber commented Jul 20, 2021 • edited Loading

slorber commented Jul 20, 2021 •

edited

Loading

github-actions bot commented Jul 20, 2021 •

edited

Loading

github-actions bot commented Jul 20, 2021 •

edited

Loading

netlify bot commented Jul 20, 2021 •

edited

Loading

slorber commented Jul 20, 2021 •

edited

Loading

slorber commented Jul 20, 2021 •

edited

Loading

slorber commented Jul 20, 2021 •

edited

Loading