From 1b6accfad8d6b3a6444c2a19eba0a160b3d011fc Mon Sep 17 00:00:00 2001
From: Max Morgan <maxwell.morgan@detroitmi.gov>
Date: Thu, 12 Oct 2023 12:22:07 -0400
Subject: [PATCH] User box corners for all components in design system

---
 src/scss/themed-bootstrap.scss  |  7 +++++++
 src/shared/themed-bootstrap.css | 24 ++++++++++++------------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/scss/themed-bootstrap.scss b/src/scss/themed-bootstrap.scss
index 7d92f08c..92577645 100644
--- a/src/scss/themed-bootstrap.scss
+++ b/src/scss/themed-bootstrap.scss
@@ -20,6 +20,13 @@ $dark: #000 !default;
 $font-family-sans-serif: 'Montserrat', sans-serif;
 $font-family-monospace: 'Montserrat', sans-serif;
 
+// Override border radius to let all components have right angle corners.
+$border-radius: 0;
+$border-radius-sm: 0;
+$border-radius-lg: 0;
+$border-radius-xl: 0;
+$border-radius-xxl: 0;
+
 @import '../../node_modules/bootstrap/scss/functions';
 @import '../../node_modules/bootstrap/scss/variables';
 @import '../../node_modules/bootstrap/scss/variables-dark';
diff --git a/src/shared/themed-bootstrap.css b/src/shared/themed-bootstrap.css
index 26045f97..6c9af421 100644
--- a/src/shared/themed-bootstrap.css
+++ b/src/shared/themed-bootstrap.css
@@ -113,11 +113,11 @@
   --bs-border-style: solid;
   --bs-border-color: #dee2e6;
   --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
-  --bs-border-radius: 0.375em;
-  --bs-border-radius-sm: 0.25em;
-  --bs-border-radius-lg: 0.5em;
-  --bs-border-radius-xl: 1em;
-  --bs-border-radius-xxl: 2em;
+  --bs-border-radius: 0;
+  --bs-border-radius-sm: 0;
+  --bs-border-radius-lg: 0;
+  --bs-border-radius-xl: 0;
+  --bs-border-radius-xxl: 0;
   --bs-border-radius-2xl: var(--bs-border-radius-xxl);
   --bs-border-radius-pill: 50em;
   --bs-box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.15);
@@ -422,7 +422,7 @@ kbd {
   font-size: 0.875em;
   color: var(--bs-body-bg);
   background-color: var(--bs-body-color);
-  border-radius: 0.25em;
+  border-radius: 0;
 }
 kbd kbd {
   padding: 0;
@@ -5484,7 +5484,7 @@ fieldset:disabled .btn {
   color: var(--bs-btn-close-color);
   background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
   border: 0;
-  border-radius: 0.375em;
+  border-radius: 0;
   opacity: var(--bs-btn-close-opacity);
 }
 .btn-close:hover {
@@ -12554,11 +12554,11 @@ fieldset:disabled .btn {
   --bs-border-style: solid;
   --bs-border-color: #dee2e6;
   --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
-  --bs-border-radius: 0.375em;
-  --bs-border-radius-sm: 0.25em;
-  --bs-border-radius-lg: 0.5em;
-  --bs-border-radius-xl: 1em;
-  --bs-border-radius-xxl: 2em;
+  --bs-border-radius: 0;
+  --bs-border-radius-sm: 0;
+  --bs-border-radius-lg: 0;
+  --bs-border-radius-xl: 0;
+  --bs-border-radius-xxl: 0;
   --bs-border-radius-2xl: var(--bs-border-radius-xxl);
   --bs-border-radius-pill: 50em;
   --bs-box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.15);