[components] Respecting border-radius variable where needed (#315)

Chrome has added border-radius to its browser style-sheet, making all our buttons to have rounded border. Using this opportunity to respect the --border-radius-base variable on most components. Default on sanity is 0.
sanity-io · Nov 2, 2017 · 1cea012 · 1cea012
1 parent 08e6e91
commit 1cea012
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 0 deletions.
diff --git a/packages/@sanity/base/src/styles/variables/forms.css b/packages/@sanity/base/src/styles/variables/forms.css
@@ -6,6 +6,7 @@
   --default-button-color--text: var(--black);
   --default-button-color--hover: var(--gray-light);
   --default-button-color--active: var(--gray);
+  --button-border-radius: var(--border-radius-base);
   --input-bg: var(--component-bg);
   --input-bg-disabled: var(--gray-lighter);
   --input-color: var(--text-color);

diff --git a/packages/@sanity/components/src/buttons/styles/DefaultButton.css b/packages/@sanity/components/src/buttons/styles/DefaultButton.css
@@ -26,6 +26,7 @@
   cursor: default;
   user-select: none;
   transition: background-color 0.15s, color 0.15s, opacity 0.15s;
+  border-radius: var(--button-border-radius);
   padding: 0.8em 0.9em;
 
   @nest &.notRecentlyHovered:focus:not(:hover) {

diff --git a/packages/@sanity/components/src/dialogs/styles/DefaultDialog.css b/packages/@sanity/components/src/dialogs/styles/DefaultDialog.css
@@ -75,6 +75,7 @@
   z-index: var(--zindex-modal);
   position: absolute;
   border: 0;
+  border-radius: var(--border-radius-base);
   padding: 0;
   animation-name: reveal;
   animation-duration: 0.2s;

diff --git a/packages/@sanity/components/src/edititem/styles/FoldOut.css b/packages/@sanity/components/src/edititem/styles/FoldOut.css
@@ -30,6 +30,7 @@
   box-sizing: border-box;
   border: 1px solid var(--edit-item-fold-border-color);
   background-color: var(--component-bg);
+  border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
   margin-left: calc(var(--edit-item-fold-padding) * -1);
   margin-right: calc(var(--edit-item-fold-padding) * -1);
   position: relative;

diff --git a/packages/@sanity/components/src/edititem/styles/PopOver.css b/packages/@sanity/components/src/edititem/styles/PopOver.css
@@ -71,6 +71,7 @@
 .popover {
   composes: shadow-5dp from "part:@sanity/base/theme/shadows-style";
   background-color: var(--component-bg);
+  border-radius: var(--border-radius-base);
   z-index: 2;
   padding: 0;
   margin-bottom: var(--large-padding);
@@ -171,6 +172,7 @@
   padding: var(--small-padding);
   font-size: 1rem;
   font-weight: 400;
+  border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
 
   @media (--max-screen-medium) {
     height: var(--header-height);

diff --git a/packages/@sanity/components/src/fieldsets/styles/DefaultFieldset.css b/packages/@sanity/components/src/fieldsets/styles/DefaultFieldset.css
@@ -92,6 +92,7 @@
     border: 1px solid var(--component-border-color);
     box-shadow: var(--component-box-shadow);
     padding: var(--medium-padding);
+    border-radius: var(--border-radius-base);
   }
 
   @nest .transparent & {

diff --git a/packages/@sanity/components/src/fileinput/styles/FileInputDropZone.css b/packages/@sanity/components/src/fileinput/styles/FileInputDropZone.css
@@ -44,6 +44,7 @@
 
 .inner {
   border: 2px dashed var(--brand-primary);
+  border-radius: var(--border-radius-base);
   width: 100%;
   height: 100%;
   box-sizing: border-box;

diff --git a/packages/@sanity/components/src/tags/styles/TextField.css b/packages/@sanity/components/src/tags/styles/TextField.css
@@ -14,6 +14,7 @@
 .tag {
   display: inline-block;
   background-color: var(--gray-lighter);
+  border-radius: var(--border-radius-small);
   color: var(--gray-dark);
   border: 1px solid color(var(--gray-lighter) lightness(-15%));
   box-sizing: border-box;