@stackoverflow/stacks 3.0.0-beta.29 → 3.0.0-beta.30

package/lib/components/link-preview/link-preview.less

@@ -1,140 +0,0 @@
-.s-link-preview {
-    --_lp-details-fc: var(--black-400);
-    --_lp-details-mt: var(--su2);
-    --_lp-footer-bg: var(--black-100);
-    --_lp-footer-fd: unset;
-    --_lp-header-bg: var(--black-100);
-    --_lp-misc-pl: var(--su4);
-    --_lp-misc-pt: unset;
-
-    // CONTEXTUAL STYLES
-    #stacks-internals #screen-sm({
-        --_lp-details-mt: var(--su4);
-        --_lp-footer-fd: column;
-        --_lp-misc-pl: 0;
-        --_lp-misc-pt: var(--su2);
-    });
-
-    .highcontrast-mode({
-        --_lp-details-fc: var(--black-600);
-        --_lp-footer-bg: var(--black-050);
-        --_lp-header-bg: var(--black-050);
-    });
-
-    // CHILD ELEMENTS
-    & &--details,
-    & &--footer {
-        a {
-            &:hover,
-            &:active,
-            &:focus,
-            &:visited {
-                color: var(--black-500);
-            }
-
-            color: var(--black-600);
-            cursor: pointer;
-            text-decoration: none;
-        }
-    }
-
-    & &--body {
-        *:last-child {
-            margin-bottom: 0;
-        }
-
-        font-size: var(--fs-body2);
-        padding: var(--su12);
-    }
-
-    & &--code {
-        pre {
-            border-radius: 0 !important;
-            margin: 0;
-            max-height: 400px;
-        }
-    }
-
-    & &--details {
-        color: var(--_lp-details-fc);
-        margin-top: var(--_lp-details-mt);
-
-        font-size: var(--fs-caption);
-    }
-
-    & &--footer {
-        background: var(--_lp-footer-bg);
-        flex-direction: var(--_lp-footer-fd);
-
-        border-bottom-left-radius: var(--br-md);
-        border-bottom-right-radius: var(--br-md);
-        border-top: var(--su1) solid var(--bc-medium);
-        display: flex;
-        font-size: var(--fs-caption);
-        justify-content: space-between;
-        padding: var(--su12);
-    }
-
-    & &--header {
-        background: var(--_lp-header-bg);
-        border-bottom: var(--su1) solid var(--bc-medium);
-        border-top-left-radius: var(--br-md);
-        border-top-right-radius: var(--br-md);
-        display: flex;
-        padding: var(--su12) var(--su8);
-    }
-
-    & &--icon {
-        color: var(--black-600); // Set the default color of the integration's icon. Most likely this will be overridden by the integration icon's native colors.
-        margin-right: var(--su8);
-    }
-
-    & &--misc {
-        padding-left: var(--_lp-misc-pl);
-        padding-top: var(--_lp-misc-pt);
-
-        color: var(--black-400);
-    }
-
-    & &--title {
-        color: var(--black-600);
-        font-size: var(--fs-body3);
-        font-weight: bold;
-    }
-
-    & a&--title {
-        &:active,
-        &:hover {
-            .highcontrast-mode({
-                text-decoration: underline;
-            });
-
-            color: var(--theme-link-color-hover, var(--theme-secondary-500));
-            text-decoration: none;
-        }
-
-        &:visited {
-            &:hover {
-                color: var(--theme-link-color, var(--purple-600));
-            }
-
-            color: var(--theme-link-color, var(--purple-500));
-        }
-
-        color: var(--theme-link-color, var(--theme-secondary));
-        cursor: pointer;
-        text-decoration: none;
-    }
-
-    & &--url {
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis !important;
-        white-space: nowrap;
-    }
-
-    border: var(--su1) solid var(--bc-medium);
-    border-radius: var(--br-md);
-    box-shadow: var(--bs-sm);
-    text-align: left;
-}

package/lib/components/page-title/page-title.less

@@ -1,51 +0,0 @@
-.s-page-title {
-    --_pt-ai: flex-end;
-    --_pt-fd: row;
-    --_pt-actions-ml: var(--su8);
-    --_pt-actions-mt: unset;
-    --_pt-breadcrums-mb: var(--su8);
-
-    // CONTEXTUAL STYLES
-    #stacks-internals #screen-sm({
-        --_pt-breadcrums-mb: var(--su2);
-    });
-    #stacks-internals #screen-md({
-        --_pt-ai: flex-start;
-        --_pt-fd: column;
-        --_pt-actions-ml: 0;
-        --_pt-actions-mt: var(--su8);
-    });
-
-    // CHILD ELEMENTS
-    & &--actions {
-        margin-left: var(--_pt-actions-ml);
-        margin-top: var(--_pt-actions-mt);
-        flex-shrink: 0;
-    }
-    & &--description {
-        color: var(--fc-light);
-        font-size: var(--fs-body2);
-        margin-bottom: 0;
-        margin-top: var(--su4);
-    }
-    & &--header {
-        color: var(--fc-dark);
-        font-size: var(--fs-headline1);
-        font-weight: bold;
-        line-height: var(--lh-sm);
-        margin: 0;
-        margin-bottom: 0; // TODO: investigate why this exists. I assume it's so margin-bottom isn't overridden, but 🤷‍♂️
-    }
-    .s-breadcrumbs {
-        margin-bottom: var(--_pt-breadcrums-mb);
-    }
-
-    align-items: var(--_pt-ai);
-    flex-direction: var(--_pt-fd);
-
-    border-bottom: var(--su1) solid var(--bc-medium);
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: var(--su16);
-    width: 100%;
-}

package/lib/components/progress-bar/progress-bar.less

@@ -1,292 +0,0 @@
-.s-progress {
-    // COMPONENT-SPECIFIC CONSTANTS
-    @pr-circle-circumference: (2 * pi() * 14); // 2πr, r = 14.
-    // COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    --_pr-bar: var(--br-md);
-    --_pr-bg: var(--black-300);
-    --_pr-h: unset;
-    --_pr-size: unset;
-    --_pr-w: 100%;
-    --_pr-hmn: var(--su4);
-    --_pr-bar-bar: var(--br-md);
-    --_pr-bar-bg: var(--green-400);
-    --_pr-bar-hmn: var(--su4);
-    --_pr-label-ai: unset;
-    --_pr-label-bc: transparent;
-    --_pr-label-d: unset;
-    --_pr-label-g: unset;
-    --_pr-label-jc: unset;
-    --_pr-label-px: unset;
-
-    // MODIFIERS
-    &&__brand {
-        --_pr-bar-bg: var(--orange-400);
-    }
-
-    // TODO SPARK I've changed metallic colors here to use their new non-metallic equivalents
-    &&__bronze {
-        --_pr-bar-bg: var(--orange-100);
-        --_pr-label-bc: var(--orange-400);
-    }
-
-    &&__gold {
-        --_pr-bar-bg: var(--yellow-100);
-        --_pr-label-bc: var(--yellow-400);
-    }
-
-    &&__info {
-        --_pr-bar-bg: var(--blue-400);
-    }
-
-    &&__silver {
-        --_pr-bar-bg: var(--blue-100);
-        --_pr-label-bc: var(--blue-400);
-    }
-
-    // VARIANTS
-    &&__badge,
-    &&__privilege {
-        --_pr-bar: var(--br-md);
-        --_pr-bg: transparent;
-        --_pr-hmn: 2em;
-        --_pr-bar-bar: var(--br-md);
-        --_pr-bar-hmn: 2em;
-        --_pr-label-d: flex;
-        --_pr-label-g: var(--su4);
-    }
-
-    &&__badge {
-        --_pr-label-ai: center;
-        --_pr-label-px: 1em;
-
-        .s-progress--label {
-            .s-badge--label {
-                flex-grow: 1;
-                text-align: center;
-            }
-        }
-    }
-
-    &&__circular {
-        --_pr-bg: transparent;
-        --_pr-size: var(--su32);
-        --s-progress-value: 0;
-
-        &.s-progress {
-            &__sm {
-                --_pr-size: var(--su24);
-            }
-
-            &__md {
-                --_pr-size: var(--su48);
-            }
-
-            &__lg {
-                --_pr-size: var(--su64);
-            }
-        }
-
-        // TODO: consider renaming to `.s-progress--bar`
-        .s-progress-bar { // It may necessitate wrapping element in a `&:not(&__circular)`
-            circle {
-                &:nth-of-type(1) {
-                    opacity: 0.4;
-                    stroke: currentColor;
-                }
-                &:nth-of-type(2) {
-                    stroke: currentColor;
-                    stroke-dasharray: @pr-circle-circumference; // [1]
-                    stroke-dashoffset: calc(((1 - var(--s-progress-value)) * @pr-circle-circumference) * 1px); // Multiply everything by 1px since Safari and Firefox require these to be in pixels
-                }
-
-                fill: none;
-                stroke-linecap: round;
-                stroke-width: var(--su4);
-            }
-
-            transform: rotate(270deg); // Make everything originate from the top of the circle
-        }
-    }
-
-    &&__privilege {
-        --_pr-bar-bg: var(--green-200);
-        --_pr-label-ai: center;
-        --_pr-label-bc: var(--green-400);
-        --_pr-label-jc: center;
-
-        .highcontrast-mode({ --_pr-bar-bg: var(--green-300); });
-    }
-
-    // TODO move `.s-progress__stepped` to entirely separate component (or consider deprecating)
-    &&__stepped { // There's so little overlap with the base .s-progress that it doesn't make sense as a variant
-        background: transparent;
-        display: flex;
-
-        .s-progress {
-            &--bar {
-                &.s-progress--bar {
-                    &__left {
-                        left: 0;
-                        right: 50%;
-                    }
-
-                    &__right {
-                        left: 50%;
-                        right: 0;
-                    }
-                }
-
-                background: var(--black-250);
-                border-radius: 0;
-                height: var(--su6);
-                position: absolute;
-                top: calc(var(--su8) + var(--su1));
-                z-index: var(--zi-base);
-            }
-
-            &--label { // Override a ton of properties
-                border: 0;
-                border-radius: 0;
-                color: var(--black-400);
-                display: block;
-                font-size: var(--fs-body1);
-                height: auto;
-                padding: var(--su12) var(--su6) 0 var(--su6);
-                position: static;
-                text-align: center;
-                width: auto;
-                z-index: var(--zi-base);
-            }
-
-            &--step {
-                &.is-active {
-                    .s-progress {
-                        &--bar.s-progress--bar__left {
-                            background: var(--theme-secondary);
-                        }
-
-                        &--label {
-                            color: var(--fc-dark);
-                        }
-
-                        &--stop {
-                            background: var(--theme-secondary);
-                            box-shadow: 0 0 0 var(--su6) var(--translucent-secondary);// TODO SHINE revisit this value once theme colors are finalized
-                        }
-                    }
-                }
-
-                &.is-complete {
-                    .s-progress {
-                        &--bar,
-                        &--stop {
-                            background: var(--theme-secondary);
-                        }
-
-                        &--label {
-                            color: var(--fc-dark);
-                        }
-                    }
-                }
-
-                align-items: center;
-                display: flex;
-                flex-basis: 0;
-                flex-direction: column;
-                flex-grow: 1;
-                flex-shrink: 1;
-                position: relative;
-            }
-
-            &--stop {
-                .highcontrast-mode({
-                    color: var(--white);
-                });
-
-                align-items: center;
-                background: var(--black-250);
-                border-radius: 100%;
-                color: var(--_white-static);
-                display: flex;
-                height: var(--su24);
-                justify-content: center;
-                position: relative;
-                width: var(--su24);
-                z-index: var(--zi-selected);
-            }
-        }
-    }
-
-    // CHILD ELEMENTS
-    & &--bar {
-        background-color: var(--_pr-bar-bg);
-        border-radius: var(--_pr-bar);
-        min-height: var(--_pr-hmn);
-
-        height: 100%;
-        min-width: var(--su6);
-        position: relative;
-    }
-
-    & &--label {
-        align-items: var(--_pr-label-ai);
-        border: var(--su1) solid var(--_pr-label-bc);
-        display: var(--_pr-label-d);
-        gap: var(--_pr-label-g);
-        justify-content: var(--_pr-label-jc);
-        padding-left: var(--_pr-label-px);
-        padding-right: var(--_pr-label-px);
-
-        border-radius: var(--br-md);
-        color: var(--fc-dark);
-        font-size: var(--fs-caption);
-        height: 100%;
-        line-height: var(--lh-xs);
-        position: absolute;
-        width: 100%;
-        z-index: calc(var(--zi-base) + 2);
-    }
-
-    & &--segments { // DEPRECATED: AFAICT, this is unused in core (as well as it's intended parent variant class `.s-progress__segmented`)
-        li {
-            &:not(:first-child):not(:last-child):before {
-                background-color: var(--white);
-                content: "";
-                display: block;
-                height: 100%;
-                left: var(--sun1);
-                position: absolute;
-                top: 0;
-                width: var(--su4);
-            }
-
-            display: block;
-            padding-top: var(--su4);
-            position: relative;
-            text-align: center;
-        }
-
-        display: flex;
-        height: 100%;
-        justify-content: space-between;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        position: absolute;
-        top: 0;
-        width: 100%;
-    }
-
-    background-color: var(--_pr-bg);
-    border-radius: var(--_pr-bar);
-    height: var(--_pr-size, var(--_pr-h));
-    min-height: var(--_pr-hmn);
-
-    min-width: var(--su6);
-    position: relative;
-    width: var(--_pr-size, var(--_pr-w));
-}
-
-// [1] Multiply the circle circumference by an the opposite percentage of what we want to display
-//      For example 70%, represented as a decimal is 0.7
-//      The opposite of that is 0.3 so ( 1 - 0.7 )