feat(br): Update border radius atomic styles (#2026)

* Update border radius atomic styles

* update tests

* update tests

* Create changeset

* add new badge to border radius

* Update based on comments

* Update visual regression tests

* Update MIGRATION_GUIDE.md

* update visual tests

* update visual tests

* update visual tests

Author: ttaylor-stack

.changeset/early-knives-wash.md

@@ -0,0 +1,8 @@
+---
+"@stackoverflow/stacks": minor
+---
+
+Update border radius for new SHINE design system
+
+BREAKING CHANGE:
+- bar-sm and bar-lg are deprecated use bar-md instead

.vscode/settings.json

@@ -9,6 +9,14 @@
   "editor.codeActionsOnSave": {
       "source.fixAll": "always"
   },
+  // Disable Prettier and auto-formatting for Less files (prettier breaks less files with namespaced mixins)
+  "[less]": {
+    "editor.defaultFormatter": null,
+    "editor.formatOnSave": false,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.stylelint": "never" // Don't auto-fix stylelint for Less files
+    }
+  },
   // https://eslint.org/docs/latest/use/configure/configuration-files#experimental-configuration-file-resolution
   "eslint.options": { "flags": ["unstable_config_lookup_from_file"] }
 }

MIGRATION_GUIDE.md

@@ -1,6 +1,20 @@
 # Migrating from Stacks Classic v2 to v3
 
-Coming soon…
+## Breaking changes
+
+### Atomic styles
+
+#### Border radius
+- `.bar-sm` removed
+- `.bar-lg` removed
+- `.btr-sm` removed
+- `.btr-lg` removed
+- `.brr-sm` removed
+- `.brr-lg` removed
+- `.bbr-sm` removed
+- `.bbr-lg` removed
+- `.blr-sm` removed
+- `.blr-lg` removed
 
 # Migrating from Stacks Svelte v0 to v1
 

packages/stacks-classic/lib/atomic/border.less

@@ -81,59 +81,41 @@
 //  $   BORDER RADIUS
 //  ----------------------------------------------------------------------------
 //  $$  All Sides
-.bar-sm { border-radius: var(--br-sm) !important; }
 .bar-md { border-radius: var(--br-md) !important; }
-.bar-lg { border-radius: var(--br-lg) !important; }
-.bar-circle { border-radius: 100% !important; }
-.bar-pill { border-radius: 1000px !important; }
+.bar-circle { border-radius: var(--br-circle) !important; }
+.bar-pill { border-radius: var(--br-pill) !important; }
 
 //  $$  Top Left Corner
 .btlr0 { border-top-left-radius: 0 !important; }
-.btlr-sm { border-top-left-radius: var(--br-sm) !important; }
 .btlr-md { border-top-left-radius: var(--br-md) !important; }
-.btlr-lg { border-top-left-radius: var(--br-lg) !important; }
 
 //  $$  Top Right Corner
 .btrr0 { border-top-right-radius: 0 !important; }
-.btrr-sm { border-top-right-radius: var(--br-sm) !important; }
 .btrr-md { border-top-right-radius: var(--br-md) !important; }
-.btrr-lg { border-top-right-radius: var(--br-lg) !important; }
 
 //  $$  Bottom Left Corner
 .bblr0 { border-bottom-left-radius: 0 !important; }
-.bblr-sm { border-bottom-left-radius: var(--br-sm) !important; }
 .bblr-md { border-bottom-left-radius: var(--br-md) !important; }
-.bblr-lg { border-bottom-left-radius: var(--br-lg) !important; }
 
 //  $$  Bottom Right Corner
 .bbrr0 { border-bottom-right-radius: 0 !important; }
-.bbrr-sm { border-bottom-right-radius: var(--br-sm) !important; }
 .bbrr-md { border-bottom-right-radius: var(--br-md) !important; }
-.bbrr-lg { border-bottom-right-radius: var(--br-lg) !important; }
 
 //  $$  Top Corners
 .btr0 { .btlr0; .btrr0; }
-.btr-sm { .btlr-sm; .btrr-sm; }
 .btr-md { .btlr-md; .btrr-md; }
-.btr-lg { .btlr-lg; .btrr-lg; }
 
 //  $$  Right Corners
 .brr0 { .btrr0; .bbrr0; }
-.brr-sm { .btrr-sm; .bbrr-sm; }
 .brr-md { .btrr-md; .bbrr-md; }
-.brr-lg { .btrr-lg; .bbrr-lg; }
 
 //  $$  Bottom Corners
 .bbr0 { .bblr0; .bbrr0; }
-.bbr-sm { .bblr-sm; .bbrr-sm; }
 .bbr-md { .bblr-md; .bbrr-md; }
-.bbr-lg { .bblr-lg; .bbrr-lg; }
 
 //  $$  Left Corners
 .blr0 { .btlr0; .bblr0; }
-.blr-sm { .btlr-sm; .bblr-sm; }
 .blr-md { .btlr-md; .bblr-md; }
-.blr-lg { .btlr-lg; .bblr-lg; }
 
 //  $$  All Sides
 #stacks-internals #responsify('.bar0', { border-radius: 0 !important; });

packages/stacks-classic/lib/components/badge/badge.less

@@ -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;

packages/stacks-classic/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]

packages/stacks-classic/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

packages/stacks-classic/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);

packages/stacks-classic/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);
 }

packages/stacks-classic/lib/components/checkbox_radio/checkbox_radio.less

@@ -92,7 +92,7 @@
     background-position: center center;
     background-repeat: no-repeat;
     background-size: contain;
-    border-radius: var(--br-sm);
+    border-radius: var(--br-md);
 }
 
 .s-radio {