@stackoverflow/stacks 0.76.0 → 1.0.0-beta.0

package/lib/css/components/{_stacks-notices.less → notices.less}

@@ -1,233 +1,233 @@
-//
-//  STACK OVERFLOW
-//  NOTICES
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//  • LAYOUT TRANSITIONS
-//
-//  ============================================================================
-//  $   BASE STYLES
-//  ----------------------------------------------------------------------------
-//  $$  FILLED, MUTED
-.s-notice {
-    padding: @su16;
-    border: 1px solid transparent;
-    border-radius: @br-sm;
-    color: var(--fc-medium);
-    font-size: @fs-body1;
-
-    .s-toast & {
-        max-width: 44rem;
-        width: 100%;
-        padding-top: @su8;
-        padding-bottom: @su8;
-        box-shadow: var(--bs-sm);
-        pointer-events: all;
-    }
-
-    .s-notice--btn {
-        color: var(--fc-dark);
-        padding: @su8;
-    }
-}
-
-//  ============================================================================
-//  $   VISUAL STYLES
-//  ============================================================================
-//  $$  INFO
-//  ----------------------------------------------------------------------------
-.s-notice__info,
-.s-banner__info {
-    border-color: var(--theme-secondary-150);
-    background-color: var(--theme-secondary-050);
-
-    &.s-notice__important,
-    &.s-banner__important {
-        background-color: var(--theme-secondary-400);
-    }
-
-    // Improve the presentation of buttons
-    .s-notice--btn {
-        &:focus,
-        &:hover {
-            background-color: var(--theme-secondary-300);
-        }
-
-        &:active {
-            background-color: var(--theme-secondary-400);
-        }
-    }
-
-    code {
-        background-color: var(--theme-secondary-150);
-    }
-}
-
-//  $$  SUCCESS
-//  ----------------------------------------------------------------------------
-.s-notice__success,
-.s-banner__success {
-    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
-    .s-notice--btn {
-        &:focus,
-        &:hover {
-            background-color: var(--green-100);
-        }
-
-        &:active {
-            background-color: var(--green-200);
-        }
-    }
-}
-
-//  $$  WARNING
-//  ----------------------------------------------------------------------------
-.s-notice__warning,
-.s-banner__warning {
-    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
-    .s-notice--btn {
-        &:focus,
-        &:hover {
-            background-color: var(--yellow-200);
-        }
-
-        &:active {
-            background-color: var(--yellow-300);
-        }
-    }
-
-    code {
-        background-color: var(--yellow-200);
-    }
-}
-
-//  $$  DANGER
-//  ----------------------------------------------------------------------------
-.s-notice__danger,
-.s-banner__danger {
-    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);
-    }
-
-    // Improve the presentation of buttons
-    .s-notice--btn {
-        &:focus,
-        &:hover {
-            background-color: var(--red-100);
-        }
-
-        &:active {
-            background-color: var(--red-200);
-        }
-    }
-}
-
-//  $$  IMPORTANT
-//  ----------------------------------------------------------------------------
-.s-notice__important {
-    border-color: transparent;
-    background-color: var(--black-700);
-    color: var(--white);
-}
-
-.s-notice__info,
-.s-notice__success,
-.s-notice__warning,
-.s-notice__danger {
-    .dark-mode({ border-color: transparent; });
-    .highcontrast-mode({ border-color: currentColor; });
-
-}
-
-//  ============================================================================
-//  $   TOASTS
-//  ----------------------------------------------------------------------------
-.s-toast {
-    visibility: hidden;
-    position: fixed;
-    display: flex;
-    justify-content: center;
-    top: @su16;
-    left: @su8;
-    right: @su8;
-    opacity: 0;
-    z-index: @zi-modals + 1; // Toasts should appear above modals
-    transform: translate3d(0, -66px, 0);
-    transition: transform 100ms @te-smooth-slow 0s, opacity 60ms @te-smooth-slow 0ms, visibility 0s 150ms;
-    pointer-events: none;
-
-    &[aria-hidden="false"] {
-        visibility: visible;
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-        transition: visibility 0s 0s, opacity 100ms @te-smooth 0s, transform 100ms @te-smooth 0s;
-    }
-
-    @media (prefers-reduced-motion) {
-        transform: none;
-    }
-}
+//
+//  STACK OVERFLOW
+//  NOTICES
+//
+//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
+//  Stack Overflow. For documentation of all these classes and how to contribute,
+//  visit https://stackoverflow.design/
+//
+//  TABLE OF CONTENTS
+//  • BASE STYLE
+//  • LAYOUT TRANSITIONS
+//
+//  ============================================================================
+//  $   BASE STYLES
+//  ----------------------------------------------------------------------------
+//  $$  FILLED, MUTED
+.s-notice {
+    padding: var(--su16);
+    border: 1px solid transparent;
+    border-radius: var(--br-sm);
+    color: var(--fc-medium);
+    font-size: var(--fs-body1);
+
+    .s-toast & {
+        max-width: 44rem;
+        width: 100%;
+        padding-top: var(--su8);
+        padding-bottom: var(--su8);
+        box-shadow: var(--bs-sm);
+        pointer-events: all;
+    }
+
+    .s-notice--btn {
+        color: var(--fc-dark);
+        padding: var(--su8);
+    }
+}
+
+//  ============================================================================
+//  $   VISUAL STYLES
+//  ============================================================================
+//  $$  INFO
+//  ----------------------------------------------------------------------------
+.s-notice__info,
+.s-banner__info {
+    border-color: var(--theme-secondary-150);
+    background-color: var(--theme-secondary-050);
+
+    &.s-notice__important,
+    &.s-banner__important {
+        background-color: var(--theme-secondary-400);
+    }
+
+    // Improve the presentation of buttons
+    .s-notice--btn {
+        &:focus,
+        &:hover {
+            background-color: var(--theme-secondary-300);
+        }
+
+        &:active {
+            background-color: var(--theme-secondary-400);
+        }
+    }
+
+    code {
+        background-color: var(--theme-secondary-150);
+    }
+}
+
+//  $$  SUCCESS
+//  ----------------------------------------------------------------------------
+.s-notice__success,
+.s-banner__success {
+    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
+    .s-notice--btn {
+        &:focus,
+        &:hover {
+            background-color: var(--green-100);
+        }
+
+        &:active {
+            background-color: var(--green-200);
+        }
+    }
+}
+
+//  $$  WARNING
+//  ----------------------------------------------------------------------------
+.s-notice__warning,
+.s-banner__warning {
+    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
+    .s-notice--btn {
+        &:focus,
+        &:hover {
+            background-color: var(--yellow-200);
+        }
+
+        &:active {
+            background-color: var(--yellow-300);
+        }
+    }
+
+    code {
+        background-color: var(--yellow-200);
+    }
+}
+
+//  $$  DANGER
+//  ----------------------------------------------------------------------------
+.s-notice__danger,
+.s-banner__danger {
+    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);
+    }
+
+    // Improve the presentation of buttons
+    .s-notice--btn {
+        &:focus,
+        &:hover {
+            background-color: var(--red-100);
+        }
+
+        &:active {
+            background-color: var(--red-200);
+        }
+    }
+}
+
+//  $$  IMPORTANT
+//  ----------------------------------------------------------------------------
+.s-notice__important {
+    border-color: transparent;
+    background-color: var(--black-700);
+    color: var(--white);
+}
+
+.s-notice__info,
+.s-notice__success,
+.s-notice__warning,
+.s-notice__danger {
+    .dark-mode({ border-color: transparent; });
+    .highcontrast-mode({ border-color: currentColor; });
+
+}
+
+//  ============================================================================
+//  $   TOASTS
+//  ----------------------------------------------------------------------------
+.s-toast {
+    visibility: hidden;
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    top: var(--su16);
+    left: var(--su8);
+    right: var(--su8);
+    opacity: 0;
+    z-index: calc(var(--zi-modals) + 1); // Toasts should appear above modals
+    transform: translate3d(0, -66px, 0);
+    transition: transform 100ms var(--te-smooth-slow) 0s, opacity 60ms var(--te-smooth-slow) 0ms, visibility 0s 150ms;
+    pointer-events: none;
+
+    &[aria-hidden="false"] {
+        visibility: visible;
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+        transition: visibility 0s 0s, opacity 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
+    }
+
+    @media (prefers-reduced-motion) {
+        transform: none;
+    }
+}

package/lib/css/components/{_stacks-page-titles.less → page-titles.less}

@@ -1,60 +1,60 @@
-//
-//  STACK OVERFLOW
-//  PAGE TITLES
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  ============================================================================
-//  $  BASE
-//  ----------------------------------------------------------------------------
-
-.s-page-title {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-end;
-    width: 100%;
-    padding-bottom: @su16;
-    border-bottom: 1px solid var(--bc-medium);
-
-    #stacks-internals #screen-md({
-        flex-direction: column;
-        align-items: flex-start;
-    });
-
-    .s-page-title--header {
-        margin: 0;
-        margin-bottom: 0;
-        font-size: @fs-headline1;
-        color: var(--fc-dark);
-        line-height: @lh-sm;
-        font-weight: normal;
-    }
-
-    .s-page-title--description {
-        color: var(--fc-light);
-        margin-top: @su4;
-        margin-bottom: 0;
-        font-size: @fs-body2;
-    }
-
-    .s-page-title--actions {
-        margin-left: @su8;
-        flex-shrink: 0;
-
-        #stacks-internals #screen-md({
-            margin-top: @su8;
-            margin-left: 0;
-        });
-    }
-
-    .s-breadcrumbs {
-        margin-bottom: @su8;
-
-        #stacks-internals #screen-sm({
-            margin-bottom: @su2;
-        });
-    }
-}
+//
+//  STACK OVERFLOW
+//  PAGE TITLES
+//
+//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
+//  Stack Overflow. For documentation of all these classes and how to contribute,
+//  visit https://stackoverflow.design/
+//
+//  ============================================================================
+//  $  BASE
+//  ----------------------------------------------------------------------------
+
+.s-page-title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-end;
+    width: 100%;
+    padding-bottom: var(--su16);
+    border-bottom: 1px solid var(--bc-medium);
+
+    #stacks-internals #screen-md({
+        flex-direction: column;
+        align-items: flex-start;
+    });
+
+    .s-page-title--header {
+        margin: 0;
+        margin-bottom: 0;
+        font-size: var(--fs-headline1);
+        color: var(--fc-dark);
+        line-height: var(--lh-sm);
+        font-weight: normal;
+    }
+
+    .s-page-title--description {
+        color: var(--fc-light);
+        margin-top: var(--su4);
+        margin-bottom: 0;
+        font-size: var(--fs-body2);
+    }
+
+    .s-page-title--actions {
+        margin-left: var(--su8);
+        flex-shrink: 0;
+
+        #stacks-internals #screen-md({
+            margin-top: var(--su8);
+            margin-left: 0;
+        });
+    }
+
+    .s-breadcrumbs {
+        margin-bottom: var(--su8);
+
+        #stacks-internals #screen-sm({
+            margin-bottom: var(--su2);
+        });
+    }
+}