cacao-css 3.16.0 → 3.18.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.17.0 (July 28, 2022)
+
+- Added u-size1of1 as an alternate class to u-sizeFull.
+
 ## 3.16.0 (July 21, 2022)
 
 - Added `Image--fullWidth` class to make an image expand to full width.

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.16.0",
+    "version": "3.18.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/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/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/size/size-lg.css

@@ -164,6 +164,7 @@
      * Make an element the width of its parent.
      */
 
+    .u-lg-size1of1,
     .u-lg-size12of12,
     .u-lg-sizeFull {
         display: block !important;

package/src/css/utils/size/size-md.css

@@ -164,6 +164,7 @@
      * Make an element the width of its parent.
      */
 
+    .u-md-size1of1,
     .u-md-size12of12,
     .u-md-sizeFull {
         display: block !important;

package/src/css/utils/size/size-sm.css

@@ -164,6 +164,7 @@
      * Make an element the width of its parent.
      */
 
+    .u-sm-size1of1,
     .u-sm-size12of12,
     .u-sm-sizeFull {
         display: block !important;

package/src/css/utils/size/size-xs.css

@@ -164,6 +164,7 @@
      * Make an element the width of its parent.
      */
 
+    .u-xs-size1of1,
     .u-xs-size12of12,
     .u-xs-sizeFull {
         display: block !important;

package/src/css/utils/size/size.css

@@ -160,6 +160,7 @@
  * Make an element the width of its parent.
  */
 
+.u-size1of1,
 .u-size12of12,
 .u-sizeFull {
     display: block !important;