@stackoverflow/stacks 3.0.0-beta.0 → 3.0.0-beta.2

package/lib/atomic/typography.less

@@ -37,36 +37,22 @@ p {
 .fs-body3 { font-size: var(--fs-body3) !important; }
 .fs-body2 { font-size: var(--fs-body2) !important; }
 .fs-body1 { font-size: var(--fs-body1) !important; }
-
-.fs-caption,
-.fs-category { font-size: var(--fs-caption) !important; }
+.fs-caption { font-size: var(--fs-caption) !important; }
 .fs-fine { font-size: var(--fs-fine) !important; }
 
 #stacks-internals #screen-sm({
-    .fs-display4 { font-size: 3.8rem !important; }
-    .fs-display3 { font-size: 3.3rem !important; }
-    .fs-display2 { font-size: 3rem !important; }
-    .fs-display1 { font-size: 2.6rem !important; }
-    .fs-headline2 { font-size: 2.3rem !important; }
-    .fs-headline1 { font-size: 2rem !important; }
-    .fs-title { font-size: 1.8rem !important; }
-    .fs-subheading { font-size: 1.6rem !important; }
-    .fs-body3 { font-size: 1.4rem !important; }
-    .fs-body2 { font-size: 1.3rem !important; }
+    .fs-display4 { font-size: calc(var(--fs-display4) * .43) !important; } // 43px
+    .fs-display3 { font-size: calc(var(--fs-display3) * .5139) !important; } // ~37px
+    .fs-display2 { font-size: calc(var(--fs-display2) * .5862) !important; } // ~34px
+    .fs-display1 { font-size: calc(var(--fs-display1) * .6304) !important; }  // ~29px
+    .fs-headline2 { font-size: calc(var(--fs-headline2) * .7224) !important; } // ~26px
+    .fs-headline1 { font-size: calc(var(--fs-headline1) * .8215) !important; } // ~23px
+    .fs-title { font-size: calc(var(--fs-title) * .9094) !important; } // ~20px
+    .fs-subheading { font-size: calc(var(--fs-subheading) * .8998) !important; } // ~18px
+    .fs-body3 { font-size: calc(var(--fs-body3) * .8888) !important; } // ~16px
+    .fs-body2 { font-size: calc(var(--fs-body2) * .9374) !important; } // ~15px
 }, @force-selector: true);
 
-.fs-category {
-    font-weight: 700;
-    text-transform: uppercase;
-
-    // If a top border is desired
-    &.has-border {
-        width: 100%;
-        padding: var(--su4) 0;
-        border-top: var(--su-static1) solid var(--bc-medium);
-    }
-}
-
 //  ============================================================================
 //  $   LINE HEIGHTS
 //  ----------------------------------------------------------------------------
@@ -89,7 +75,8 @@ p {
 
 //  --  Font Weight
 .fw-normal { font-weight: 400 !important; }
-.fw-bold { font-weight: 700 !important; }
+.fw-medium { font-weight: 500 !important; }
+.fw-bold { font-weight: 600 !important; }
 
 //  --  Font Styles
 .fs-normal { font-style: normal !important; }

package/lib/base/body.less

@@ -24,13 +24,6 @@ body {
     line-height: var(--lh-base);
 }
 
-#stacks-internals #screen-sm({
-    &,
-    body {
-        font-size: 11px;
-    }
-}, @force-selector: true);
-
 body {
     box-sizing: border-box;
     min-height: 100%;
@@ -41,4 +34,6 @@ body {
     *:after {
         box-sizing: inherit;
     }
+
+    // TODO SHINE set max width here
 }

package/lib/components/activity-indicator/activity-indicator.less

@@ -1,7 +1,8 @@
 .s-activity-indicator {
-    --_ai-translucent: var(--translucent-secondary);
-    --_ai-bg: var(--theme-secondary-400);
+    --_ai-bg: var(--pink-400);
     --_ai-fc: var(--white);
+    --_ai-min-size: var(--su-static16);
+    --_ai-p: 0 calc(var(--su-static4) - var(--su-static1));
 
     .highcontrast-mode({
         --_ai-bg: var(--theme-secondary-500);
@@ -10,7 +11,6 @@
     // VARIANTS
     &&__danger {
         --_ai-bg: var(--red-400);
-        --_ai-translucent: var(--translucent-error);
 
         .highcontrast-mode({
             --_ai-bg: var(--red-500);
@@ -19,7 +19,6 @@
 
     &&__success {
         --_ai-bg: var(--green-400);
-        --_ai-translucent: var(--translucent-success);
 
         .highcontrast-mode({
             --_ai-bg: var(--green-500);
@@ -28,8 +27,6 @@
 
     &&__warning {
         --_ai-bg: var(--yellow-400);
-        --_ai-fc: var(--_black-static);
-        --_ai-translucent: var(--translucent-warning);
 
         .highcontrast-mode({
             --_ai-bg: var(--yellow-500); // needs to be here to override default high contrast
@@ -37,17 +34,24 @@
         });
     }
 
+    &&__sm {
+        --_ai-min-size: calc(var(--su-static8) + var(--su-static2));
+        --_ai-p: 0;
+    }
+
     background-color: var(--_ai-bg);
-    box-shadow: 0 0 0 var(--su-static4) var(--_ai-translucent);
     color: var(--_ai-fc);
+    min-width: var(--_ai-min-size);
+    min-height: var(--_ai-min-size);
+    padding: var(--_ai-p);
 
     border-radius: 1000px;
-    display: inline-block;
+    display: inline-flex;
     font-size: var(--fs-fine);
-    font-weight: 700;
-    line-height: 1.1; // Custom line-height to satisfy 1x screens
-    min-width: var(--su-static12);
-    min-height: var(--su-static12);
-    padding: var(--su2) var(--su4);
+    font-weight: 600;
+    line-height: 1.1;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
     text-transform: uppercase;
 }

package/lib/components/anchor/anchor.less

@@ -28,7 +28,7 @@
     }
 
     &&__default {
-        --_an-a-fc: var(--theme-link-color, var(--theme-secondary-400));
+        --_an-a-fc: var(--theme-link-color, var(--theme-secondary));
         --_an-a-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
         --_an-a-fc-visited: var(--theme-link-color-visited, var(--purple-500));
         --_an-a-fc-hover-visited: var(--theme-link-color-hover, var(--purple-600));

package/lib/components/avatar/avatar.less

@@ -1,7 +1,6 @@
 .s-avatar {
     --_av-size: var(--su-static16);
     --_av-bg: var(--_white-static); // Force a white background color for when we have transparent avatars
-    --_av-br: var(--br-sm);
     --_av-fs-letter: calc(var(--su-static12) - var(--su-static1));
     --_av-scale-badge: 1;
 
@@ -18,14 +17,8 @@
 
     // MODIFIERS
     // Sizes
-    &&__32,
-    &&__48 {
-        --_av-br: var(--br-md);
-    }
-
     &&__96,
     &&__128 {
-        --_av-br: calc(var(--br-lg) + var(--br-sm));
         --_av-scale-badge: 3;
     }
 
@@ -49,7 +42,6 @@
 
     &&__64 {
         --_av-size: var(--su-static64);
-        --_av-br: var(--br-lg);
         --_av-fs-letter: calc(var(--su-static48) - var(--su-static4));
         --_av-scale-badge: 2.4;
     }
@@ -74,7 +66,6 @@
     }
 
     & &--image {
-        border-radius: var(--_av-br);
         display: block;
         height: var(--_av-size);
         width: var(--_av-size);
@@ -95,8 +86,15 @@
         user-select: none;
     }
 
-    background-color: var(--_av-bg); 
-    border-radius: var(--_av-br);
+    & &--indicator {
+        box-shadow: 0 0 0 var(--su-static2) var(--white);
+        bottom: 100%;
+        left: 100%;
+        position: absolute;
+        transform: translate(-50%, 60%);
+    }
+
+    background-color: var(--_av-bg);
     height: var(--_av-size);
     width: var(--_av-size);
 

package/lib/components/award-bling/award-bling.less

@@ -2,16 +2,17 @@
     --_ab-before-bg: unset;
 
     // VARIANTS
+    // TODO SHINE expect a conflict with the award-bling updates. Prefer the changes in https://github.com/StackExchange/Stacks/pull/2013.
     &&__gold {
-        --_ab-before-bg: var(--gold-300);
+        --_ab-before-bg: var(--yellow-300);
     }
 
     &&__silver {
-        --_ab-before-bg: var(--silver-300);
+        --_ab-before-bg: var(--blue-300);
     }
 
     &&__bronze {
-        --_ab-before-bg: var(--bronze-300);
+        --_ab-before-bg: var(--orange-300);
     }
 
     // CHILD ELEMENTS

package/lib/components/badge/badge.less

@@ -62,18 +62,18 @@
     }
 
     &&__gold {
-        --_ba-bc: var(--gold-300);
-        --_ba-bg: var(--gold-100);
+        --_ba-bc: var(--yellow-300);
+        --_ba-bg: var(--yellow-100);
     }
 
     &&__silver {
-        --_ba-bc: var(--silver-300);
-        --_ba-bg: var(--silver-100);
+        --_ba-bc: var(--blue-300);
+        --_ba-bg: var(--blue-100);
     }
 
     &&__bronze {
-        --_ba-bc: var(--bronze-300);
-        --_ba-bg: var(--bronze-100);
+        --_ba-bc: var(--orange-300);
+        --_ba-bg: var(--orange-100);
     }
 
     // Number counts
@@ -260,7 +260,7 @@
     text-transform: var(--_ba-tt);
 
     align-items: center;
-    border-radius: var(--br-sm);
+    border-radius: var(--br-md);
     display: inline-flex;
     justify-content: center;
     text-decoration: none;

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

@@ -62,7 +62,7 @@ a.s-block-link,
 
     &:focus-visible,
     &.focus-inset {
-        border-radius: var(--br-sm);
+        border-radius: var(--br-md);
     }    
 
     background-color: var(--_bl-bg); // [1]

package/lib/components/button/button.less

@@ -388,7 +388,7 @@
     & &--badge {
         opacity: var(--_bu-badge-o);
         display: inline-block;
-        border-radius: var(--br-sm);
+        border-radius: var(--br-md);
         padding: var(--su2) calc(var(--su4) - var(--su1));
         font-size: var(--fs-caption);
         line-height: var(--lh-xs);

package/lib/components/button-group/button-group.less

@@ -23,7 +23,7 @@
     //  --_bu-py values set below to ensure btn-group height matches same-sized button height
     // See https://github.com/StackEng/StackOverflow/pull/18992#pullrequestreview-1947490680
     .s-btn {
-        --_bu-br: var(--br-sm);
+        --_bu-br: var(--br-md);
         --_bu-bc-hover: transparent;
         --_bu-px: calc(var(--su12) - var(--su1)); // 11px
         --_bu-py: calc(var(--su6) + 0.65px); // 6.65px

package/lib/components/card/card.less

@@ -32,6 +32,6 @@
     border: var(--su-static1) solid var(--_ca-bc);
 
     background-color: var(--white);
-    border-radius: var(--br-sm);
+    border-radius: var(--br-md);
     padding: var(--su12);
 }

package/lib/components/checkbox_radio/checkbox_radio.less

@@ -48,21 +48,23 @@
     // Less variables for check svg fill color
     @ch-bg-image-fill: .set-white()[default];
     @ch-bg-image-fill-dark: .set-white-dark()[default];
+    @ch-bg-image-fill-esc: escape("@{ch-bg-image-fill}"); // color escaped for URL usage
+    @ch-bg-image-fill-dark-esc: escape("@{ch-bg-image-fill-dark}"); // color escaped for URL usage
 
     // CONTEXTUAL STYLES
     .dark-mode({
         &:checked {
-            --_ch-bg-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='@{ch-bg-image-fill-dark}'/%3E%3C/svg%3E");
+            --_ch-bg-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='@{ch-bg-image-fill-dark-esc}'/%3E%3C/svg%3E");
         }
         &:indeterminate {
-            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill-dark}'/%3E%3C/svg%3E");
+            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill-dark-esc}'/%3E%3C/svg%3E");
         }
     });
 
     .highcontrast-dark-mode({
         &:checked, &:indeterminate {
-            --_ch-bc: var(--blue-500) !important;
-            --_ch-bg: var(--blue-400);
+            --_ch-bc: var(--black) !important;
+            --_ch-bg: var(--black);
         }
     });
 
@@ -75,16 +77,16 @@
 
     // STATES
     &:checked, &:indeterminate {
-        --_ch-bc: var(--theme-secondary-400) !important;
-        --_ch-bg: var(--theme-secondary-400);
+        --_ch-bc: var(--theme-secondary) !important;
+        --_ch-bg: var(--theme-secondary);
     }
 
     &:checked {
-        --_ch-bg-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='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
+        --_ch-bg-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='@{ch-bg-image-fill-esc}'/%3E%3C/svg%3E");
     }
 
     &:indeterminate {
-        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
+        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill-esc}'/%3E%3C/svg%3E");
     }
 
     background-image: var(--_ch-bg-image);
@@ -92,7 +94,7 @@
     background-position: center center;
     background-repeat: no-repeat;
     background-size: contain;
-    border-radius: var(--br-sm);
+    border-radius: var(--br-md);
 }
 
 .s-radio {
@@ -100,7 +102,7 @@
     // CONTEXTUAL STYLES
     .highcontrast-dark-mode({
         &:checked {
-            --_ch-bc: var(--blue-400);
+            --_ch-bc: var(--black);
             outline: var(--su-static1) solid var(--black);
         }
     });
@@ -108,7 +110,7 @@
     // STATES
     &:checked {
         --_ch-baw: 0.30769231em;
-        --_ch-bc: var(--theme-secondary-400);
+        --_ch-bc: var(--theme-secondary);
         --_ch-bg: var(--white);
     }
 

package/lib/components/link/link.less

@@ -26,7 +26,7 @@ a {
 
 a,
 .s-link {
-    --_li-fc: var(--theme-link-color, var(--theme-secondary-400));
+    --_li-fc: var(--theme-link-color, var(--theme-secondary));
     --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
     --_li-fc-visited: var(--theme-link-color-visited, var(--purple-500));
     --_li-fc-hover-visited: var(--theme-link-color-visited, var(--purple-600));

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

@@ -66,8 +66,8 @@
         background: var(--_lp-footer-bg);
         flex-direction: var(--_lp-footer-fd);
 
-        border-bottom-left-radius: var(--br-sm);
-        border-bottom-right-radius: var(--br-sm);
+        border-bottom-left-radius: var(--br-md);
+        border-bottom-right-radius: var(--br-md);
         border-top: var(--su-static1) solid var(--bc-medium);
         display: flex;
         font-size: var(--fs-caption);
@@ -78,8 +78,8 @@
     & &--header {
         background: var(--_lp-header-bg);
         border-bottom: var(--su-static1) solid var(--bc-medium);
-        border-top-left-radius: var(--br-sm);
-        border-top-right-radius: var(--br-sm);
+        border-top-left-radius: var(--br-md);
+        border-top-right-radius: var(--br-md);
         display: flex;
         padding: var(--su12) var(--su8);
     }
@@ -129,7 +129,7 @@
             color: var(--theme-link-color, var(--purple-500));
         }
 
-        color: var(--theme-link-color, var(--theme-secondary-400));
+        color: var(--theme-link-color, var(--theme-secondary));
         cursor: pointer;
         text-decoration: none;
     }
@@ -142,7 +142,7 @@
     }
 
     border: var(--su-static1) solid var(--bc-medium);
-    border-radius: var(--br-sm);
+    border-radius: var(--br-md);
     box-shadow: var(--bs-sm);
     text-align: left;
 }

package/lib/components/modal/modal.less

@@ -73,7 +73,7 @@
         @scrollbar-styles();
         backface-visibility: hidden;
         background-color: var(--_mo-dialog-bg);
-        border-radius: var(--br-lg);
+        border-radius: var(--br-md);
         box-shadow: var(--bs-lg);
         max-height: 100%;
         max-width: 600px;

package/lib/components/notice/notice.less

@@ -158,7 +158,7 @@
         color: var(--_no-code-fc);
         outline: var(--su-static1) solid var(--_no-code-bc);
 
-        border-radius: var(--br-sm);
+        border-radius: var(--br-md);
         padding-left: var(--su2);
         padding-right: var(--su2);
     }

package/lib/components/pagination/pagination.less

@@ -61,7 +61,7 @@
         border: 1px solid var(--_pa-item-bc);
         color: var(--_pa-item-fc);
 
-        border-radius: var(--br-sm);
+        border-radius: var(--br-md);
         display: inline-block;
         font-size: var(--fs-body1);
         line-height: var(--lh-xl);

package/lib/components/popover/popover.less

@@ -5,18 +5,6 @@
     --_po-d: none;
     --_po-wmn: 12rem;
     --_po-w: 100%;
-    // arrow
-    --_po-arrow-fc: var(--white);
-    --_po-arrow-b: unset;
-    --_po-arrow-l: unset;
-    --_po-arrow-r: unset;
-    --_po-arrow-t: unset;
-    --_po-arrow-ps: calc(var(--su6) * -1); // ps suffix used for placement, not positioning value
-    --_po-arrow-after-b: unset;
-    --_po-arrow-after-l: unset;
-    --_po-arrow-after-r: unset;
-    --_po-arrow-after-t: unset;
-    --_po-arrow-after-bs: unset;
     // content
     // --_po-topbar-height assumes the topbar height based on topbar styles
     --_po-topbar-height: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
@@ -27,7 +15,6 @@
         --_po-bg: var(--black-200);
         --_po-bc: var(--bc-light);
         --_po-bs: var(--bs-lg);
-        --_po-arrow-fc: var(--black-200);
     });
 
     // MODIFIERS
@@ -41,91 +28,6 @@
     }
 
     // CHILD ELEMENTS
-    // Arrow
-    &[data-popper-placement^="top"] > &--arrow,
-    & &--arrow__bc,
-    & &--arrow__bl,
-    & &--arrow__br {
-        --_po-arrow-b: var(--_po-arrow-ps);
-        --_po-arrow-after-b: var(--su-static1);
-        --_po-arrow-after-bs: 2px 2px 5px 0 hsla(0, 0%, 0%, 0.07), 2px 2px 2px -1px hsla(0, 0%, 0%, 0.1);
-        .highcontrast-mode({ --_po-arrow-after-bs: 1px 1px 0 0 var(--bc-medium); });
-    }
-    &[data-popper-placement^="bottom"] > &--arrow,
-    & &--arrow__tc,
-    & &--arrow__tl,
-    & &--arrow__tr {
-        --_po-arrow-t: var(--_po-arrow-ps);
-        --_po-arrow-after-t: var(--su-static1);
-        --_po-arrow-after-bs: -1px -1px 1px 0 hsla(0, 0%, 0%, 0.12);
-        .highcontrast-mode({ --_po-arrow-after-bs: -1px -1px 0 0 var(--bc-medium); });
-    }
-    &[data-popper-placement^="left"] > &--arrow,
-    & &--arrow__rc,
-    & &--arrow__rt,
-    & &--arrow__rb {
-        --_po-arrow-r: var(--_po-arrow-ps);
-        --_po-arrow-after-r: var(--su-static1);
-        --_po-arrow-after-bs: 2px -2px 5px 0 hsla(0, 0%, 0%, 0.07), 2px -2px 2px -1px hsla(0, 0%, 0%, 0.1);
-        .highcontrast-mode({ --_po-arrow-after-bs: 1px -1px 0 0 var(--bc-medium); });
-    }
-    &[data-popper-placement^="right"] > &--arrow,
-    & &--arrow__lc,
-    & &--arrow__lt,
-    & &--arrow__lb {
-        --_po-arrow-l: var(--_po-arrow-ps);
-        --_po-arrow-after-l: var(--su-static1);
-        --_po-arrow-after-bs: -2px 2px 5px 0 hsla(0, 0%, 0%, 0.07), -2px 2px 2px -1px hsla(0, 0%, 0%, 0.1);
-        .highcontrast-mode({ --_po-arrow-after-bs: -1px 1px 0 0 var(--bc-medium); });
-    }
-    & &--arrow__tc,
-    & &--arrow__bc {
-        --_po-arrow-l: calc(50% - var(--su6));
-    }
-    & &--arrow__lc,
-    & &--arrow__rc {
-        --_po-arrow-t: calc(50% - var(--su6));
-    }
-    & &--arrow__tr,
-    .s-popover--arrow__br {
-        --_po-arrow-r: var(--su12);
-    }
-    & &--arrow__rb,
-    & &--arrow__lb {
-        --_po-arrow-b: var(--su12);
-    }
-    & &--arrow {
-        &,
-        &:before,
-        &:after {
-            display: block;
-            height: var(--su12);
-            position: absolute;
-            width: var(--su12);
-            z-index: -1;
-        }
-        &:before, // This renders our border
-        &:after {
-            content: '';
-            transform: rotate(45deg);
-        }
-        &:after { // This renders our foreground color
-            bottom: var(--_po-arrow-after-b);
-            box-shadow: var(--_po-arrow-after-bs);
-            left: var(--_po-arrow-after-l);
-            right: var(--_po-arrow-after-r);
-            top: var(--_po-arrow-after-t);
-
-            background: currentColor;
-            border-radius: calc(var(--su-static1) * 1.5);
-        }
-
-        bottom: var(--_po-arrow-b);
-        color: var(--_po-arrow-fc);
-        left: var(--_po-arrow-l);
-        right: var(--_po-arrow-r);
-        top: var(--_po-arrow-t);
-    }
     // Close btn
     & &--close {
         float: right; // Use floats for title wrapping

package/lib/components/popover/popover.ts

@@ -231,12 +231,6 @@ export abstract class BasePopoverController extends Stacks.StacksController {
                         offset: [0, 10], // The entire popover should be 10px away from the element
                     },
                 },
-                {
-                    name: "arrow",
-                    options: {
-                        element: ".s-popover--arrow",
-                    },
-                },
             ],
         });
     }

package/lib/components/popover/tooltip.ts

@@ -137,22 +137,10 @@ export class TooltipController extends BasePopoverController {
             }
         }
 
-        const arrow = popover.querySelector(".s-popover--arrow");
-
         // clear and set the content of the popover
         popover.innerHTML = "";
         popover.appendChild(content);
 
-        // create the arrow if necessary
-        if (arrow) {
-            popover.appendChild(arrow);
-        } else {
-            popover.insertAdjacentHTML(
-                "beforeend",
-                `<div class="s-popover--arrow"></div>`
-            );
-        }
-
         this.scheduleUpdate();
 
         return popover;

package/lib/components/post-summary/post-summary.less

@@ -5,7 +5,7 @@
     --_ps-o: unset;
     // Child components
     --_ps-content-excerpt-fc: var(--_ps-state-fc, var(--fc-medium));
-    --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary-400))));
+    --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary))));
     --_ps-content-title-a-fc-hover: var(--_ps-state-fc, var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500))));
     --_ps-content-title-a-fc-visited: var(--_ps-state-fc, var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--purple-500))));
     --_ps-content-title-a-fc-hover-visited: var(--_ps-state-fc, var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--purple-600))));
@@ -119,7 +119,7 @@
         &:not(.s-post-summary__deleted):not(.s-post-summary__ignored) {
             --_ps-bg: var(--yellow-100);
             --_ps-stats-fc: var(--black-400);
-            --_ps-content-title-a-fc: var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary-400)));
+            --_ps-content-title-a-fc: var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary)));
             --_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500)));
             --_ps-content-title-a-fc-visited: var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--purple-500)));
             --_ps-content-title-a-fc-hover-visited: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--purple-600)));
@@ -368,7 +368,7 @@
             &.is-pinned,
             &.is-published,
             &.is-review {
-                border-radius: var(--br-sm);
+                border-radius: var(--br-md);
                 padding: var(--su2) var(--su4);
             }