Auto border-radius (#15165)

app/assets/stylesheets/components/cards.scss

@@ -1,7 +1,7 @@
 @import '../config/import';
 
 .crayons-card {
-  border-radius: var(--radius);
+  border-radius: var(--radius-auto);
   background: var(--card-bg);
   color: var(--card-color);
   box-shadow: 0 0 0 1px var(--card-border);
@@ -23,13 +23,11 @@
     margin-bottom: var(--su-4);
     grid-gap: var(--su-4);
     display: grid;
-    border-radius: 0;
 
     @media (min-width: $breakpoint-m) {
       padding: var(--su-6);
       margin-bottom: var(--su-6);
       grid-gap: var(--su-6);
-      border-radius: var(--radius);
     }
   }
 

app/assets/stylesheets/components/modals.scss

@@ -61,13 +61,13 @@
     height: 100%;
     overflow: hidden;
     pointer-events: auto;
+    border-radius: var(--radius-large-auto);
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
       0 10px 10px -5px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--base-a10);
 
     @media (min-width: $breakpoint-s) {
       background: var(--card-bg);
       color: var(--card-color);
-      border-radius: var(--radius-large);
       max-height: calc(100% - var(--su-6));
       height: auto;
       width: 90%;

app/assets/stylesheets/components/notices.scss

@@ -4,7 +4,7 @@
   padding: var(--su-4);
   background: var(--card-bg);
   color: var(--card-color);
-  border-radius: var(--radius);
+  border-radius: var(--radius-auto);
 
   &--danger {
     background: var(--accent-danger-a10);

app/assets/stylesheets/components/stories.scss

@@ -14,6 +14,7 @@
   box-shadow: 0 0 0 1px var(--card-border);
   margin: 0 0 var(--su-2);
   position: relative;
+  border-radius: var(--radius-auto);
 
   &:focus-within {
     outline: none;
@@ -21,10 +22,6 @@
     box-shadow: 0 0 0 2px var(--card-border);
   }
 
-  @media (min-width: $breakpoint-m) {
-    border-radius: var(--radius);
-  }
-
   --story-padding: var(--su-4) var(--su-4) var(--su-3);
   --title-font-size: var(--fs-xl);
 

app/assets/stylesheets/config/_variables.scss

@@ -35,6 +35,14 @@
 
   --radius: 0.375rem;
   --radius-large: 0.75rem;
+  // 1. this is a trick for conditional border-radius: https://ishadeed.com/article/conditional-border-radius/
+  // 2. intentionally using uppercase Max and Min because SCSS have issues otherwise...
+  --radius-auto: Max(0px, Min(var(--radius), calc((100vw - 4px - 100%) * 9999))) /
+    var(--radius);
+  --radius-large-auto: Max(
+      0px,
+      Min(var(--radius-large), calc((100vw - 4px - 100%) * 9999))
+    ) / var(--radius-large);
 
   ////////////////////////////////////////////////////////////////////////////////////
   // Transitions /////////////////////////////////////////////////////////////////////

app/assets/stylesheets/views.scss

@@ -12,5 +12,4 @@
 @import 'views/signin';
 @import 'views/signup-modal';
 @import 'views/sponsors';
-@import 'views/tag';
 @import 'views/podcasts';

app/assets/stylesheets/views/article.scss

@@ -20,7 +20,9 @@
       left: 0;
       right: 0;
       bottom: 0;
-      border-radius: var(--radius) var(--radius) 0 0;
+      border-radius: var(--radius-auto);
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
       object-fit: cover;
       width: 100%;
       height: 100%;

app/assets/stylesheets/views/notifications.scss

@@ -9,14 +9,12 @@
 
   display: flex;
   color: var(--base-80);
-  border-radius: 0;
 
   @media (min-width: $breakpoint-s) {
     --padding: var(--su-4);
   }
   @media (min-width: $breakpoint-m) {
     --padding: var(--su-5);
-    border-radius: var(--radius);
   }
 
   &--middle {

app/assets/stylesheets/views/profile.scss

@@ -2,14 +2,12 @@
 
 .profile-header {
   --padding: var(--su-3);
-  border-radius: 0;
 
   @media (min-width: $breakpoint-s) {
     --padding: var(--su-4);
   }
 
   @media (min-width: $breakpoint-m) {
-    border-radius: var(--radius);
     text-align: center;
   }
 

app/assets/stylesheets/views/tag.scss

@@ -1,14 +0,0 @@
-@import '../config/import';
-
-.tag-header {
-  padding: var(--su-4);
-  border-radius: 0;
-
-  @media (min-width: $breakpoint-m) {
-    border-radius: var(--radius);
-  }
-
-  @media (min-width: $breakpoint-l) {
-    padding: var(--su-6);
-  }
-}

app/views/stories/tagged_articles/index.html.erb

@@ -5,7 +5,7 @@
 <% flag = true %>
 <% cache("tag-stories-index-#{params}-#{flag}-#{@tag_model.updated_at}-#{user_signed_in?}", expires_in: expiry_minutes.minutes) do %>
   <div class="crayons-layout">
-    <header class="tag-header crayons-card branded-4" style="border-top-color: <%= Color::CompareHex.new([@tag_model.bg_color_hex || "#0000000", @tag_model.text_color_hex || "#ffffff"]).brightness(0.88) %>">
+    <header class="crayons-card branded-4 p-4 l:p-6 spec__tag-header" style="border-top-color: <%= Color::CompareHex.new([@tag_model.bg_color_hex || "#000000", @tag_model.text_color_hex || "#ffffff"]).brightness(0.88) %>">
       <div class="flex">
         <% if @tag_model.badge_id && @tag_model.badge %>
             <img src="<%= optimized_image_url(@tag_model.badge.badge_image_url, width: 64) %>" alt="" class="mr-4" style="transform: rotate(<%= -25 + (@tag_model.id.digits.first * 5) %>deg); width: 64px; height: 64px;" />

spec/system/articles/user_visits_articles_by_tag_spec.rb

@@ -23,7 +23,7 @@ RSpec.describe "User visits articles by tag", type: :system do
       end
 
       it "shows the follow button", js: true do
-        within("header.tag-header") { expect(page).to have_button(I18n.t("core.follow")) }
+        within("header.spec__tag-header") { expect(page).to have_button(I18n.t("core.follow")) }
       end
 
       # Regression test for https://github.com/forem/forem/pull/12724
@@ -65,7 +65,7 @@ RSpec.describe "User visits articles by tag", type: :system do
     it "shows the following button", js: true do
       wait_for_javascript
 
-      within("header.tag-header") { expect(page).to have_button(I18n.t("core.following")) }
+      within("header.spec__tag-header") { expect(page).to have_button(I18n.t("core.following")) }
     end
 
     it "shows time buttons" do