@stackoverflow/stacks 0.70.0 → 0.73.1

package/lib/css/components/_stacks-inputs.less

@@ -50,7 +50,7 @@
     width: 100%;
     margin: 0; // A guard against Core's default margins
     padding: @input-padding;
-    border: 1px solid var(--black-200);
+    border: 1px solid var(--bc-darker);
     border-radius: @br-sm;
     background-color: var(--white);
     color: var(--fc-dark);
@@ -73,11 +73,19 @@
     //  ------------------------------------------------------------------------
     &::-webkit-input-placeholder {
         color: var(--black-200);
+
+        .highcontrast-mode({
+            color: var(--black-400);
+        });
     }
 
     &::placeholder {
         color: var(--black-200);
         opacity: 1;
+
+        .highcontrast-mode({
+            color: var(--black-400);
+        });
     }
 
     // --  STYLE SCROLLBARS
@@ -108,6 +116,33 @@ fieldset {
     min-width: 0;
     padding: 0;
     border: 0;
+
+    &[disabled] {
+        a,
+        .s-btn,
+        .s-link {
+            box-shadow: none !important;
+            opacity: 0.5;
+            pointer-events: none;
+        }
+
+        .s-checkbox,
+        .s-input-message,
+        .s-label,
+        .s-radio,
+        .s-toggle-switch,
+        .s-toggle-switch label {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+
+        .s-input,
+        .s-textarea,
+        .s-select > select {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+    }
 }
 
 //  ============================================================================
@@ -139,6 +174,10 @@ fieldset {
     font-weight: 400;
     vertical-align: text-bottom;
 
+    .highcontrast-mode({
+        border: 1px solid currentColor;
+    });
+
     &.s-label--status__required {
         background-color: var(--red-100);
         color: var(--red-600);
@@ -179,7 +218,7 @@ fieldset {
 //  ----------------------------------------------------------------------------
 .s-input-fill {
     padding: @input-padding;
-    border: 1px solid var(--black-200);
+    border: 1px solid var(--bc-darker);
     border-right-width: 0;
     border-left-width: 0;
     background-color: var(--black-050);
@@ -255,7 +294,7 @@ fieldset {
         height: 100%; // Fill the height of its parent
         padding: @input-padding;
         padding-right: @su32;
-        border: 1px solid var(--black-200);
+        border: 1px solid var(--bc-darker);
         border-radius: @br-sm;
         background-color: var(--white);
         outline: 0;
@@ -310,7 +349,7 @@ fieldset {
         margin: 0; // A guard against Core's default margins
         width: 1em;
         height: 1em;
-        border: 1px solid var(--black-200);
+        border: 1px solid var(--bc-darker);
         background-color: var(--white);
         outline: 0;
         font-size: inherit;
@@ -339,6 +378,11 @@ fieldset {
             background-color: var(--theme-secondary-400);
             background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
 
+            .highcontrast-dark-mode({
+                border-color: var(--blue-700) !important;
+                background-color: var(--blue-300);
+            });
+
             &:focus {
                 border-color: var(--theme-secondary-400);
             }
@@ -361,6 +405,11 @@ fieldset {
             border-color: var(--theme-secondary-400);
             border-width: 0.30769231em;
             background-color: @white; // This should always be white regardless of dark mode
+
+            .highcontrast-dark-mode({
+                border-color: var(--blue-300);
+                outline: 1px solid var(--black);
+            });
         }
 
         &:focus {
@@ -380,6 +429,10 @@ fieldset {
         box-shadow: 0 0 0 @su4 var(--focus-ring);
         color: var(--black);
         outline: 0;
+
+        .highcontrast-mode({
+            border-color: var(--black);
+        })
     }
 
     .s-input:focus,
@@ -402,18 +455,21 @@ fieldset {
     //  Disabled, Read-only
     &[disabled],
     &[read-only] {
-        border-color: var(--black-075);
-        background-color: var(--black-050);
-        color: var(--black-200);
+        cursor: not-allowed;
+        opacity: 0.5;
+
+        .highcontrast-mode({
+            opacity: 0.5;
+        });
     }
 
     //  Disabled
     &[disabled] {
         cursor: not-allowed;
+        opacity: 0.5;
     }
 }
 
-
 //  ============================================================================
 //  $   VALIDATION STATES
 //      Classes are applied at the wrapping container level.
@@ -543,7 +599,7 @@ fieldset {
 .is-disabled {
     .s-select:before,
     .s-select:after {
-        border-color: var(--black-200) transparent;
+        border-color: var(--bc-darker) transparent;
     }
 
     .s-label,
@@ -557,6 +613,10 @@ fieldset {
 
     .s-input-icon {
         color: var(--black-200);
+
+        .highcontrast-mode({
+            color: var(--black-400);
+        });
     }
 
     .s-label {
@@ -578,6 +638,10 @@ fieldset {
         right: auto;
         left: 0.7em;
         color: var(--black-200);
+
+        .highcontrast-mode({
+            color: var(--black-400);
+        });
     }
 }
 
@@ -626,6 +690,11 @@ fieldset {
     border-radius: @br-sm + 1;
 }
 
+.s-textarea__md {
+    padding-top: 0.72em;
+    padding-bottom: 0.72em;
+}
+
 .s-input__lg,
 .s-textarea__lg,
 .s-select__lg > select {

package/lib/css/components/_stacks-link-previews.less

@@ -10,7 +10,7 @@
 //  $   BASE STYLE
 //  ----------------------------------------------------------------------------
 .s-link-preview {
-    border: 1px solid var(--black-100);
+    border: 1px solid var(--bc-medium);
     border-radius: @br-sm;
     text-align: left;
     box-shadow: var(--bs-sm);
@@ -21,7 +21,7 @@
     background: var(--black-025);
     border-top-left-radius: @br-sm;
     border-top-right-radius: @br-sm;
-    border-bottom: 1px solid var(--black-100);
+    border-bottom: 1px solid var(--bc-medium);
     padding: @su12 @su8;
 }
 
@@ -44,6 +44,8 @@ a.s-link-preview--title {
     &.s-link__visited:visited {
         color: var(--theme-link-color);
         text-decoration: none;
+
+        .highcontrast-mode({ text-decoration: underline; });
     }
 
     &:hover,
@@ -52,6 +54,8 @@ a.s-link-preview--title {
     &.s-link__visited:active {
         color: var(--theme-link-color-hover);
         text-decoration: none;
+
+        .highcontrast-mode({ text-decoration: underline; });
     }
 }
 
@@ -88,7 +92,7 @@ a.s-link-preview--title {
     background: var(--black-025);
     border-bottom-left-radius: @br-sm;
     border-bottom-right-radius: @br-sm;
-    border-top: 1px solid var(--black-100);
+    border-top: 1px solid var(--bc-medium);
     padding: @su12;
     font-size: @fs-caption;
 

package/lib/css/components/_stacks-links.less

@@ -21,9 +21,12 @@ a,
     cursor: pointer;
     user-select: auto;
 
+    .highcontrast-mode({
+        text-decoration: underline;
+    });
+
     &.s-link__visited:visited {
         color: var(--theme-link-color-visited);
-        text-decoration: none;
     }
 
     &:hover,
@@ -31,7 +34,6 @@ a,
     &:active,
     &.s-link__visited:active {
         color: var(--theme-link-color-hover);
-        text-decoration: none;
     }
 
     &.s-link__grayscale {
@@ -92,6 +94,25 @@ a,
     &.s-link__underlined {
         text-decoration: underline !important;
     }
+
+    &.s-link__dropdown {
+        position: relative;
+        padding-right: 0.9em;
+
+        &:after {
+            content: "";
+            position: absolute;
+            z-index: @zi-active;
+            top: calc(50% - 2px);
+            right: 0;
+            border-style: solid;
+            border-width: @su4;
+            border-top-width: @su4;
+            border-bottom-width: 0;
+            border-color: currentColor transparent;
+            pointer-events: none;
+        }
+    }
 }
 
 button.s-link {
@@ -102,6 +123,7 @@ button.s-link {
     padding: 0;
     line-height: inherit;
     user-select: auto;
+    font-family: inherit;
 
     &:focus {
         outline: none;
@@ -158,6 +180,7 @@ button.s-link {
     border-radius: 0;
     text-align: left;
     line-height: inherit;
+    font-family: inherit;
 
     &:hover,
     &:active {

package/lib/css/components/_stacks-menu.less

@@ -24,20 +24,20 @@
     .s-menu--divider {
         margin: @su8 0;
         height: 1px;
-        background-color: var(--black-075);
+        background-color: var(--bc-light);
 
         .dark-mode({
-            background-color: var(--black-025);
+            background-color: var(--bc-lightest);
         });
     }
 
     .s-menu--label {
         cursor: pointer;
         padding: @su12;
-        border-top: 1px solid var(--black-075);
+        border-top: 1px solid var(--bc-light);
 
         .dark-mode({
-            border-top-color: var(--black-025);
+            border-top-color: var(--bc-lightest);
         });
 
         &.is-disabled {

package/lib/css/components/_stacks-modals.less

@@ -51,7 +51,7 @@
     padding: @su24;
     border-radius: @br-lg;
     background-color: var(--white);
-    box-shadow: @bs-lg;
+    box-shadow: var(--bs-lg);
     opacity: 0;
     backface-visibility: hidden;
     transform: translate3d(0, 30%, 0) scale3d(0.6, 0.6, 0.6);

package/lib/css/components/_stacks-navigation.less

@@ -44,6 +44,11 @@
         &:active {
             background: var(--black-075);
             color: var(--black-600);
+
+            .highcontrast-mode({
+                background: var(--black-600);
+                color: var(--black-100);
+            });
         }
 
         @focus-styles();
@@ -51,6 +56,14 @@
         &.is-selected {
             background: var(--theme-primary-color);
             color: var(--white);
+
+            &:hover,
+            &:active {
+                background: var(--theme-primary-600);
+                color: var(--white);
+            }
+
+            .highcontrast-mode({ text-decoration: none; });
         }
 
         &.s-navigation--item__dropdown {
@@ -109,6 +122,11 @@
         &.is-selected {
             background: var(--black-050);
             color: var(--black-800);
+
+            .highcontrast-mode({
+                background: var(--black-800);
+                color: var(--black-050);
+            });
         }
     }
 

package/lib/css/components/_stacks-notices.less

@@ -75,10 +75,23 @@
     border-color: var(--green-200);
     background-color: var(--green-050);
 
+    // Bump up the border contrast in high contrast mode
+    .highcontrast-mode({
+        background-color: var(--green-200);
+        border-color: var(--green-400);
+    });
+
     &.s-notice__important,
     &.s-banner__important {
         background-color: var(--green-400);
         color: var(--black-900);
+
+        // Bump up the text in high contrast
+        .highcontrast-mode({
+            background-color: var(--green-500);
+            color: var(--white);
+            border-color: transparent;
+        });
     }
 
     // Improve the presentation of buttons
@@ -101,10 +114,23 @@
     border-color: var(--yellow-300);
     background-color: var(--yellow-050);
 
+    // Bump up the border contrast in high contrast mode
+    .highcontrast-mode({
+        background-color: var(--yellow-200);
+        border-color: var(--yellow-700);
+    });
+
     &.s-notice__important,
     &.s-banner__important {
         background-color: var(--yellow-400);
         color: var(--black-900);
+
+        // Bump up the text in high contrast
+        .highcontrast-mode({
+            background-color: var(--yellow-500);
+            color: var(--white);
+            border-color: transparent;
+        });
     }
 
     // Improve the presentation of buttons
@@ -131,6 +157,17 @@
     border-color: var(--red-200);
     background-color: var(--red-050);
 
+    // Bump up the border contrast in high contrast mode
+    .highcontrast-mode({
+        background-color: var(--red-200);
+        border-color: var(--red-500);
+
+        &.s-notice__important,
+        &.s-banner__important {
+            background-color: var(--red-500);
+        }
+    });
+
     &.s-notice__important,
     &.s-banner__important {
         background-color: var(--red-400);
@@ -161,9 +198,9 @@
 .s-notice__success,
 .s-notice__warning,
 .s-notice__danger {
-    .dark-mode({
-        border-color: transparent;
-    });
+    .dark-mode({ border-color: transparent; });
+    .highcontrast-mode({ border-color: currentColor; });
+
 }
 
 //  ============================================================================

package/lib/css/components/_stacks-page-titles.less

@@ -17,7 +17,7 @@
     align-items: flex-end;
     width: 100%;
     padding-bottom: @su16;
-    border-bottom: 1px solid var(--black-100);
+    border-bottom: 1px solid var(--bc-medium);
 
     #stacks-internals #screen-md({
         flex-direction: column;

package/lib/css/components/_stacks-pagination.less

@@ -25,13 +25,15 @@
     padding: 0 @su8;
     background-color: transparent;
     border-radius: @br-sm;
-    border: 1px solid var(--black-100);
+    border: 1px solid var(--bc-medium);
     font-size: @fs-body1;
     line-height: @lh-xl;
     color: var(--fc-medium);
 
+    .highcontrast-mode({ text-decoration: none; });
+
     &:hover {
-        border-color: var(--black-200);
+        border-color: var(--bc-darker);
         background-color: var(--black-100);
         color: var(--fc-dark);
     }

package/lib/css/components/_stacks-popovers.less

@@ -22,7 +22,7 @@
     padding: @su12;
     z-index: @zi-popovers;
     border-radius: @br-md;
-    border: 1px solid var(--black-100);
+    border: 1px solid var(--bc-medium);
     background-color: var(--white);
     box-shadow: var(--bs-md);
     color: var(--fc-dark);
@@ -30,9 +30,13 @@
     min-width: 12rem;
     width: 100%;
 
+    // Guard against popovers being in a container with white-space: nowrap
+    // Without this, the content pops *out* of the popover.
+    white-space: normal; 
+
     .dark-mode({
         background-color: var(--black-075);
-        border-color: transparent;
+        border-color: var(--bc-light);
         box-shadow: var(--bs-lg);
     });
 
@@ -54,6 +58,10 @@
         &:after {
             bottom: 1px;
             box-shadow: 2px 2px 5px 0 hsla(0, 0, 0, 0.07), 2px 2px 2px -1px hsla(0, 0, 0, 0.1);
+
+            .highcontrast-mode({
+                box-shadow: 1px 1px 0 0 var(--bc-medium);
+            });
         }
     }
 
@@ -66,6 +74,10 @@
         &:after {
             top: 1px;
             box-shadow: -1px -1px 1px 0 hsla(0, 0, 0, 0.12);
+
+            .highcontrast-mode({
+                box-shadow: -1px -1px 0 0 var(--bc-medium);
+            });
         }
     }
 
@@ -78,6 +90,10 @@
         &:after {
             right: 1px;
             box-shadow: 2px -2px 5px 0 hsla(0, 0, 0, 0.07), 2px -2px 2px -1px hsla(0, 0, 0, 0.1);
+
+            .highcontrast-mode({
+                box-shadow: 1px -1px 0 0 var(--bc-medium);
+            });
         }
     }
 
@@ -90,6 +106,10 @@
         &:after {
             left: 1px;
             box-shadow: -2px 2px 5px 0 hsla(0, 0, 0, 0.07), -2px 2px 2px -1px hsla(0, 0, 0, 0.1);
+
+            .highcontrast-mode({
+                box-shadow: -1px 1px 0 0 var(--bc-medium);
+            });
         }
     }