cacao-css 3.17.0 → 3.19.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 3.19.0 (April 28, 2023)
+
+- Updated more hover states to only be applied if hover is supported by the device.
+
+## 3.18.0 (April 28, 2023)
+
+- Updated hover states to only be applied if hover is supported by the device.
+  
 ## 3.17.0 (July 28, 2022)
 
 - Added u-size1of1 as an alternate class to u-sizeFull.

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "cacao-css",
     "description": "A set of composable CSS modules that provide a solid foundation for starting a new project.",
-    "version": "3.17.0",
+    "version": "3.19.0",
     "main": "gulfile.js",
     "author": "Aptuitiv, Inc <hello@aptuitiv.com>",
     "license": "MIT",

package/src/css/base/base.css

@@ -103,13 +103,16 @@ textarea {
 /**
  * Work around a Firefox/IE bug where the transparent `button` background
  * results in a loss of the default `button` focus styles.
+ * Based on SUIT CSS: https://github.com/suitcss/base/blob/master/lib/base.css.
+ * Also see https://css-tricks.com/copy-the-browsers-native-focus-styles/ for "Highlight"
  */
-
-button:focus {
+ button:focus-visible {
     outline: 1px dotted;
     /* stylelint-disable */
-    outline: 5px auto -webkit-focus-ring-color;
+    outline: 2px auto Highlight;
+    outline: 2px auto -webkit-focus-ring-color;
     /* stylelint-enable */
+    outline-offset: 1px;
 }
 
 /**
@@ -130,3 +133,13 @@ button:focus {
 *::after {
     box-sizing: border-box;
 }
+
+/**
+ * Remove the focus outline for mouse uses but preserve for keyboard users with
+ * :focus-visible
+ * @link https://twitter.com/LeaVerou/status/1045768279753666562
+ * @link https://css-tricks.com/the-focus-visible-trick/
+ */
+:focus:not(:focus-visible) {
+    outline: none;
+}

package/src/css/components/button/button.css

@@ -64,32 +64,37 @@
 /**
  * Work around a Firefox/IE bug where the transparent `button` background
  * results in a loss of the default `button` focus styles.
+ * Based on SUIT CSS: https://github.com/suitcss/base/blob/master/lib/base.css.
+ * Also see https://css-tricks.com/copy-the-browsers-native-focus-styles/ for "Highlight"
  */
-
-.Button:focus {
+.Button:focus-visible {
     outline: 1px dotted;
     /* stylelint-disable */
-    outline: 5px auto -webkit-focus-ring-color;
+    outline: 2px auto Highlight;
+    outline: 2px auto -webkit-focus-ring-color;
     /* stylelint-enable */
+    outline-offset: 1px;
 }
 
 /**
  * UI States
  */
 
-.Button:hover,
-.Button:focus,
-.Button:active {
+/* Only show hover states if supported */
+@media (hover: hover) and (pointer: fine) {
+    .Button:hover:not(:disabled) {
+        background: var(--Button-backgroundHover);
+        color: var(--Button-colorHover);
+        text-decoration: none;
+    }
+}
+
+.Button:focus-visible {
     background: var(--Button-backgroundHover);
     color: var(--Button-colorHover);
     text-decoration: none;
 }
 
-.Button:focus,
-.Button:active {
-    box-shadow: inset 0 0 10px rgba(0, 0, 0, .5);
-}
-
 .Button:disabled,
 .Button.is-disabled {
     cursor: default;
@@ -118,9 +123,14 @@
     background: #555;
 }
 
-.Button--secondary:active,
-.Button--secondary:focus,
-.Button--secondary:hover {
+/* Only show hover states if supported */
+@media (hover: hover) and (pointer: fine) {
+    .Button--secondary:hover {
+        background: #333;
+    }
+}
+
+.Button--secondary:focus-visible {
     background: #333;
 }
 

package/src/css/components/navigation/responsive-overlay.css

@@ -54,10 +54,16 @@
         transform: translateY(-50%) rotate(90deg);
     }
 
+    @media (hover: hover) and (pointer: fine) {
+        .MainNav-link:hover {
+            background: rgba(0, 0, 0, .1);
+            color: inherit;
+            text-decoration: none;
+        }
+    }
+
     .MainNav-link.is-active,
-    .MainNav-link:active,
-    .MainNav-link:focus,
-    .MainNav-link:hover {
+    .MainNav-link:focus-visible {
         background: rgba(0, 0, 0, .1);
         color: inherit;
         text-decoration: none;
@@ -88,17 +94,28 @@
         white-space: normal;
     }
 
-    .Dropdown-link:active,
-    .Dropdown-link:hover,
-    .Dropdown-link:focus {
+    @media (hover: hover) and (pointer: fine) {
+        .Dropdown-link:hover {
+            color: var(--Dropdown-link-color);
+            text-decoration: none;
+        }
+    }
+
+    .Dropdown-link:focus-visible {
         color: var(--Dropdown-link-color);
         text-decoration: none;
     }
 
+    @media (hover: hover) and (pointer: fine) {
+        .Dropdown-link--parent:hover {
+            background: rgba(0, 0, 0, .1);
+            color: inherit;
+            text-decoration: none;
+        }
+    }
+
     .Dropdown-link--parent.is-active,
-    .Dropdown-link--parent:active,
-    .Dropdown-link--parent:focus,
-    .Dropdown-link--parent:hover,
+    .Dropdown-link--parent:focus-visible,
     .Dropdown-link--parent.is-active + .Dropdown-menu {
         background: rgba(0, 0, 0, .1);
         color: inherit;

package/src/css/components/navigation/responsive-pushdown.css

@@ -56,10 +56,16 @@
         transform: translateY(-50%) rotate(90deg);
     }
 
+    @media (hover: hover) and (pointer: fine) {
+        .MainNav-link:hover {
+            background: rgba(0, 0, 0, .1);
+            color: inherit;
+            text-decoration: none;
+        }
+    }
+
     .MainNav-link.is-active,
-    .MainNav-link:active,
-    .MainNav-link:focus,
-    .MainNav-link:hover {
+    .MainNav-link:focus-visible {
         background: rgba(0, 0, 0, .1);
         color: inherit;
         text-decoration: none;
@@ -90,17 +96,28 @@
         white-space: normal;
     }
 
-    .Dropdown-link:active,
-    .Dropdown-link:hover,
-    .Dropdown-link:focus {
+    @media (hover: hover) and (pointer: fine) {
+        .Dropdown-link:hover {
+            color: var(--Dropdown-link-color);
+            text-decoration: none;
+        }
+    }
+
+    .Dropdown-link:focus-visible {
         color: var(--Dropdown-link-color);
         text-decoration: none;
     }
 
+    @media (hover: hover) and (pointer: fine) {
+        .Dropdown-link--parent:hover {
+            background: rgba(0, 0, 0, .1);
+            color: inherit;
+            text-decoration: none;
+        }
+    }
+
     .Dropdown-link--parent.is-active,
-    .Dropdown-link--parent:active,
-    .Dropdown-link--parent:focus,
-    .Dropdown-link--parent:hover,
+    .Dropdown-link--parent:focus-visible,
     .Dropdown-link--parent.is-active + .Dropdown-menu {
         background: rgba(0, 0, 0, .1);
         color: inherit;

package/src/css/components/navigation/sidebar.css

@@ -25,9 +25,14 @@
     text-decoration: none;
 }
 
-.SidebarNav-link:active,
-.SidebarNav-link:focus,
-.SidebarNav-link:hover {
+@media (hover: hover) and (pointer: fine) {
+    .SidebarNav-link:hover {
+        color: #333;
+        text-decoration: none;
+    }
+}
+
+.SidebarNav-link:focus-visible {
     color: #333;
     text-decoration: none;
 }

package/src/css/components/navigation/small-screen-button.css

@@ -30,9 +30,15 @@
     }
 }
 
-.SmScBtn:active,
-.SmScBtn:focus,
-.SmScBtn:hover {
+/* Only show hover states if supported */
+@media (hover: hover) and (pointer: fine) {
+    .SmScBtn:hover {
+        color: #fff;
+        text-decoration: none;
+    }
+}
+
+.SmScBtn:focus-visible {
     color: #fff;
     text-decoration: none;
 }

package/src/css/components/pagination/pagination.css

@@ -17,9 +17,15 @@
     text-decoration: none;
 }
 
-.Pagination-item:active,
-.Pagination-item:focus,
-.Pagination-item:hover {
+@media (hover: hover) and (pointer: fine) {
+    .Pagination-item:hover {
+        background: #666;
+        color: #fff;
+        text-decoration: none;
+    }
+}
+
+.Pagination-item:focus-visible {
     background: #666;
     color: #fff;
     text-decoration: none;

package/src/css/utils/content/content.css

@@ -0,0 +1,11 @@
+/* =========================================================================== *\
+    Content Utilities
+\* =========================================================================== */
+
+/** @define utilities */
+
+/* Ensures the last child inside the container has no bottom margin or padding */
+.u-cleanContent > *:last-child {
+    margin-bottom: 0 !important;
+    padding-bottom: 0 !important;
+}

package/src/css/utils/content/index.css

@@ -0,0 +1 @@
+@import './content';

package/src/css/utils/index.css

@@ -1,5 +1,6 @@
 @import './align';
 @import './background';
+@import './content';
 @import './display';
 @import './flex';
 @import './image';

package/src/css/utils/link/link.css

@@ -9,10 +9,15 @@
  * Reset all link styles
  */
 
+@media (hover: hover) and (pointer: fine) {
+    .u-linkClean:hover {
+        color: inherit !important;
+        text-decoration: none !important;
+    }
+}
+
 .u-linkClean,
-.u-linkClean:hover,
-.u-linkClean:focus,
-.u-linkClean:active {
+.u-linkClean:focus-visible {
     color: inherit !important;
     text-decoration: none !important;
 }
@@ -66,15 +71,23 @@
  * </a>
  */
 
+@media (hover: hover) and (pointer: fine) {
+    .u-linkComplex:hover {
+        text-decoration: none !important;
+    }
+}
+
 .u-linkComplex,
-.u-linkComplex:hover,
-.u-linkComplex:focus,
-.u-linkComplex:active {
+.u-linkComplex:focus-visible {
     text-decoration: none !important;
 }
 
-.u-linkComplex:hover .u-linkComplexTarget,
-.u-linkComplex:focus .u-linkComplexTarget,
-.u-linkComplex:active .u-linkComplexTarget {
+@media (hover: hover) and (pointer: fine) {
+    .u-linkComplex:hover .u-linkComplexTarget {
+        text-decoration: underline !important;
+    }
+}
+
+.u-linkComplex:focus-visible .u-linkComplexTarget {
     text-decoration: underline !important;
 }