@stackoverflow/stacks 0.69.1 → 0.73.0

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

@@ -16,13 +16,11 @@
 //  $   BASE STYLE
 //  ----------------------------------------------------------------------------
 & {
-    #stacks-internals #load-config();
-
     .s-btn {
         position: relative;
         display: inline-block;
         padding: 0.8em;
-        color: @button-color;
+        color: var(--theme-button-color);
         border: 1px solid transparent;
         border-radius: @br-sm;
         background-color: transparent;
@@ -36,6 +34,14 @@
         cursor: pointer;
         user-select: none;
 
+        .highcontrast-mode({
+            border-color: currentColor;
+
+            &:not(.s-btn__link):not(.s-btn__unset) {
+                text-decoration: none;
+            }
+        });
+
         button &,
         button[type="submit"] &,
         button[type="reset"] & {
@@ -53,13 +59,13 @@
         &:hover,
         &:focus,
         &:active {
-            color: @button-hover-color;
-            background: @button-hover-background-color;
+            color: var(--theme-button-hover-color);
+            background: var(--theme-button-hover-background-color);
             text-decoration: none;
         }
 
         &:active {
-            background: @button-active-background-color;
+            background: var(--theme-button-active-background-color);
         }
 
         &:focus {
@@ -74,8 +80,8 @@
         }
 
         &.is-selected {
-            color: @button-selected-color;
-            background: @button-selected-background-color;
+            color: var(--theme-button-selected-color);
+            background: var(--theme-button-selected-background-color);
             box-shadow: none;
 
             &:focus {
@@ -152,6 +158,8 @@
             font-size: @fs-caption;
             line-height: @lh-xs;
             background-color: currentColor;
+
+            .highcontrast-mode({ opacity: 0.8; });
         }
 
         .s-btn--number {
@@ -161,7 +169,8 @@
 
     .s-btn__primary:not(.is-selected) .s-btn--number,
     .s-btn__danger.s-btn__filled:not(.is-selected) .s-btn--number {
-        .dark-mode({ color: @black; });
+        .dark-mode({ color: var(--white); });
+        .highcontrast-mode({ color: var(--black); });
     }
 
     //  ============================================================================
@@ -172,10 +181,10 @@
     //      Style which applies only a border.
     //  ----------------------------------------------------------------------------
     .s-btn__outlined {
-        border-color: @button-outlined-border-color;
+        border-color: var(--theme-button-outlined-border-color);
 
         &.is-selected {
-            border-color: @button-outlined-selected-border-color;
+            border-color: var(--theme-button-outlined-selected-border-color);
         }
     }
 
@@ -183,30 +192,36 @@
     //      Adds in background-colors, background-images, and/or box-shadows.
     //  ----------------------------------------------------------------------------
     .s-btn__filled {
-        color: @button-filled-color;
-        background-color: @button-filled-background-color;
-        border-color: @button-filled-border-color;
-        box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
+        color: var(--theme-button-filled-color);
+        background-color: var(--theme-button-filled-background-color);
+        border-color: var(--theme-button-filled-border-color);
+        box-shadow: inset 0 1px 0 0 hsla(0, 0, 100%, 0.7);
 
         .dark-mode({ box-shadow: none; });
 
         &:hover,
         &:focus,
         &:active {
-            color: @button-filled-hover-color;
-            background-color: @button-filled-hover-background-color;
+            color: var(--theme-button-filled-hover-color);
+            background-color: var(--theme-button-filled-hover-background-color);
         }
 
         &:active {
-            background-color: @button-filled-active-background-color;
-            border-color: @button-filled-active-border-color;
+            background-color: var(--theme-button-filled-active-background-color);
+            border-color: var(--theme-button-filled-active-border-color);
             box-shadow: none;
         }
 
+        &:focus {
+            .highcontrast-mode({
+                box-shadow: 0 0 0 @su4 var(--focus-ring);
+            });
+        }
+
         &.is-selected {
-            color: @button-filled-selected-color;
-            background-color: @button-filled-selected-background-color;
-            border-color: @button-filled-selected-border-color;
+            color: var(--theme-button-filled-selected-color);
+            background-color: var(--theme-button-filled-selected-background-color);
+            border-color: var(--theme-button-filled-selected-border-color);
             box-shadow: none;
         }
     }
@@ -215,8 +230,15 @@
     //      Creates a gray button style.
     //  ----------------------------------------------------------------------------
     .s-btn__muted {
+        #stacks-internals #load-config();
         color: @button-muted-color;
 
+        .highcontrast-mode({
+            &.s-btn__filled {
+                border-color: transparent;
+            }
+        });
+
         &:hover,
         &:focus,
         &:active {
@@ -255,10 +277,20 @@
             color: @button-muted-filled-color;
             background-color: @button-muted-filled-background-color;
             border-color: transparent;
-            box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
+            box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
 
             .dark-mode({ box-shadow: none; });
 
+            .highcontrast-mode({
+                background-color: var(--black-400);
+                border-color: transparent;
+                color: var(--white);
+
+                .s-btn--number {
+                    color: var(--black);
+                }
+            });
+
             &:hover,
             &:focus,
             &:active {
@@ -273,6 +305,7 @@
 
             &:focus {
                 box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+                .highcontrast-mode({ box-shadow: 0 0 0 @su4 var(--focus-ring-muted); });
             }
 
             &.is-selected {
@@ -280,6 +313,14 @@
                 background-color: @button-muted-filled-selected-background-color;
                 box-shadow: none;
 
+                .highcontrast-mode({
+                    background-color: var(--black-700);
+
+                    .s-btn--number {
+                        color: var(--black);
+                    }
+                });
+
                 &:focus {
                     box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
                 }
@@ -291,8 +332,15 @@
     //  $   DANGER BUTTONS & STYLES
     //  ============================================================================
     .s-btn__danger {
+        #stacks-internals #load-config();
         color: @button-danger-color;
 
+        .highcontrast-mode({
+            &.s-btn__filled {
+                border-color: transparent;
+            }
+        });
+
         &:hover,
         &:focus,
         &:active {
@@ -306,6 +354,7 @@
 
         &:focus {
             box-shadow: 0 0 0 @su4 var(--focus-ring-error);
+            .highcontrast-mode({ box-shadow: 0 0 0 @su4 var(--focus-ring-error); });
         }
 
         &.is-selected {
@@ -331,10 +380,22 @@
             color: @button-danger-filled-color;
             background-color: @button-danger-filled-background-color;
             border-color: transparent;
-            box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
+            box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
 
             .dark-mode({ box-shadow: none; });
 
+            .highcontrast-mode({
+                color: var(--white);
+
+                &:focus {
+                    box-shadow: 0 0 0 @su4 var(--focus-ring-error);
+                }
+
+                .s-btn--number {
+                    color: var(--black);
+                }
+            });
+
             &:hover,
             &:focus,
             &:active {
@@ -359,6 +420,11 @@
                 &:focus {
                     box-shadow: 0 0 0 @su4 var(--focus-ring-error);
                 }
+                .highcontrast-mode({
+                    .s-btn--number {
+                        color: var(--black);
+                    }
+                });
             }
 
             .s-btn--number {
@@ -371,31 +437,49 @@
     //  $   PRIMARY STYLE
     //  ============================================================================
     .s-btn__primary {
-        color: @button-primary-color;
-        background-color: @button-primary-background-color;
-        box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
+        color: var(--theme-button-primary-color);
+        background-color: var(--theme-button-primary-background-color);
+        box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
 
-        .dark-mode({ box-shadow: none; });
+        .dark-mode({
+            box-shadow: none;
+
+            &:not(.is-selected) {
+                color: var(--black);
+            }
+        });
+        .highcontrast-mode({
+            &:not(.is-selected) {
+                border-color: transparent;
+                color: var(--white);
+            }
+        });
 
         &:hover,
         &:focus,
         &:active {
-            color: @button-primary-hover-color;
-            background-color: @button-primary-hover-background-color;
+            color: var(--theme-button-primary-hover-color);
+            background-color: var(--theme-button-primary-hover-background-color);
         }
 
         &:active {
-            background-color: @button-primary-active-background-color;
+            background-color: var(--theme-button-primary-active-background-color);
             box-shadow: none;
         }
 
+        &:focus {
+            .highcontrast-mode({
+                box-shadow: 0 0 0 @su4 var(--focus-ring);
+            });
+        }
+
         &.is-selected {
-            color: @button-primary-selected-color;
-            background-color: @button-primary-selected-background-color;
+            color: var(--theme-button-primary-selected-color);
+            background-color: var(--theme-button-primary-selected-background-color);
         }
 
         .s-btn--number {
-            color: @button-primary-number-color;
+            color: var(--theme-button-primary-number-color);
         }
     }
 
@@ -403,22 +487,25 @@
     //  $   MISC STYLES
     //  ============================================================================
     .s-btn__google {
-        border-color: var(--black-100);
+        border-color: var(--bc-medium);
         background-color: var(--white);
         color: var(--black-700);
 
         &:hover,
         &:focus {
-            border-color: var(--black-150);
+            border-color: var(--bc-darker);
             background-color: var(--black-025);
             color: var(--black-800);
         }
 
         &:active {
-            border-color: var(--black-200);
             background-color: var(--black-050);
             color: var(--black-900);
         }
+
+        &:focus {
+            box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+        }
     }
 
     .s-btn__facebook {
@@ -426,6 +513,8 @@
         background-color: #385499;
         color: #fff;
 
+        .highcontrast-mode({ border-color: transparent; });
+
         &:hover,
         &:focus {
             background-color: darken(#385499, 5%);
@@ -442,6 +531,8 @@
         background-color: var(--black-750);
         color: var(--white);
 
+        .highcontrast-mode({ border-color: transparent; });
+
         &:hover,
         &:focus {
             background-color: var(--black-800);
@@ -452,11 +543,16 @@
             background-color: var(--black-900);
             color: var(--white);
         }
+
+        &:focus {
+            box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+        }
     }
 
     .s-btn__unset,
     .s-btn__unset:hover,
-    .s-btn__unset:active {
+    .s-btn__unset:active,
+    .s-btn__unset:focus {
         padding: 0;
         border: none;
         outline: none;
@@ -469,10 +565,6 @@
         user-select: auto;
     }
 
-    .s-btn__unset:focus {
-        color: unset;
-    }
-
     .s-btn__link {
         display: inline;
         padding: 0;
@@ -491,6 +583,15 @@
         &:focus,
         &[disabled] {
             background: none;
+            box-shadow: none;
+        }
+
+        &.s-btn__dropdown {
+            padding-right: 0.9em;
+
+            &:after {
+                right: 0;
+            }
         }
     }
 

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

@@ -15,7 +15,7 @@
 //  ----------------------------------------------------------------------------
 .s-card {
     padding: @su12;
-    border: 1px solid var(--black-100);
+    border: 1px solid var(--bc-medium);
     border-radius: @br-sm;
     background-color: var(--white);
 
@@ -24,25 +24,21 @@
     }
 }
 
-//  ============================================================================
-//  $   LINKED CARDS
-//  ----------------------------------------------------------------------------
-a.s-card:not(.s-card__muted) {
-    &:hover,
-    &:focus,
-    &:active {
-        border-color: var(--black-200);
-    }
-}
-
 //  ============================================================================
 //  $   MODIFIERS
 //  ----------------------------------------------------------------------------
 .s-card__muted {
-    border-color: var(--black-075);
+    border-color: var(--bc-light);
 
     //  Dim only the first child card content
     > * {
         opacity: 0.65;
     }
 }
+
+//  ============================================================================
+//  $   LINKED CARDS
+//  ----------------------------------------------------------------------------
+a.s-card {
+    text-decoration: none !important;
+}

package/lib/css/components/_stacks-code-blocks.less

@@ -115,7 +115,7 @@ pre.s-code-block .s-code-block--line-numbers {
     text-align: right;
     border-width: 0;
     border-style: solid;
-    border-color: var(--black-100);
+    border-color: var(--bc-medium);
     border-right-width: 1px;
     margin: -@su12;
     margin-right: @su12;

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 {