Use only theme border radii.

.stylelintrc

@@ -19,6 +19,10 @@
     "value-no-vendor-prefix": [true, {
       "ignoreValues": ["grab"],
     }],
-    "sh-waqar/declaration-use-variable": [["font-size", "z-index"]],
+    "sh-waqar/declaration-use-variable": [[
+      "border-radius",
+      "font-size",
+      "z-index"
+    ]],
   },
 }

src/components/Alert/Alert.js

@@ -6,7 +6,7 @@ import { fromAtoms } from '../../utils/theme';
 
 const StyledAlert = styled.div`
   background: ${fromAtoms('Alert', 'type', 'background')};
-  border-radius: 4px;
+  border-radius: ${props => props.theme.borderRadius.soft};
   border: 2px solid ${fromAtoms('Alert', 'type', 'borderColor')};
   color: ${fromAtoms('Alert', 'type', 'color')};
   margin: 8px 0 8px 0;

src/components/CircularProgress/CircularProgress.js

@@ -39,7 +39,7 @@ const dotSpinnerAnimation = keyframes`
 `;
 
 const DotSpinner = styled.div`
-  border-radius: 50%;
+  border-radius: ${props => props.theme.borderRadius.round};
   position: relative;
   text-indent: -9999em;
   -webkit-animation: ${dotSpinnerAnimation} 1.1s infinite ease;

src/components/Dropdown/Dropdown.js

@@ -19,7 +19,7 @@ const Popover = styled.div`
   position: absolute;
   background-color: ${props => props.theme.colors.white};
   border: 1px solid ${props => props.theme.colors.silverDark};
-  border-radius: ${props => props.theme.borderRadius};
+  border-radius: ${props => props.theme.borderRadius.soft};
   z-index: ${props => props.theme.layers.dropdown};
   box-shadow: ${props => props.theme.boxShadow.light};
   margin-top: 4px;
@@ -54,7 +54,7 @@ const Divider = styled.div`
 `;
 
 const SelectedItem = Item.extend`
-  border-radius: ${props => props.theme.borderRadius};
+  border-radius: ${props => props.theme.borderRadius.soft};
   background-color: ${props => props.theme.colors.white};
   border: 1px solid ${props => props.theme.colors.dustyGray};
   display: flex;

src/components/Input/Input.js

@@ -36,7 +36,7 @@ const StyledInput = component => styled(component)`
     line-height: 36px;
     box-shadow: none;
     border: 1px solid ${props => props.theme.colors.dustyGray};
-    border-radius: ${props => props.theme.borderRadius};
+    border-radius: ${props => props.theme.borderRadius.soft};
   }
 `;
 

src/components/LogoProgress/LogoProgress.js

@@ -58,7 +58,7 @@ const verticalStripes = keyframes`
 
 const WeaveLogoProgress = styled.div`
   display: block;
-  border-radius: 150px;
+  border-radius: ${props => props.theme.borderRadius.round};
   width: 150px;
   height: 150px;
   overflow: hidden;

src/components/PrometheusGraph/_ErrorOverlay.js

@@ -16,7 +16,7 @@ const ErrorContainer = styled.div`
 `;
 
 const ErrorText = styled.span`
-  border-radius: ${props => props.theme.borderRadius};
+  border-radius: ${props => props.theme.borderRadius.soft};
   padding: 5px 10px;
   opacity: 0.75;
 

src/components/PrometheusGraph/_FocusPoint.js

@@ -7,7 +7,7 @@ const DeploymentAnnotationPoint = styled.span.attrs({
   background-color: ${props => props.theme.colors.white};
   opacity: ${props => (props.faded ? 0.5 : 1)};
   box-sizing: border-box;
-  border-radius: 50%;
+  border-radius: ${props => props.theme.borderRadius.round};
   position: absolute;
   cursor: default;
 

src/components/PrometheusGraph/_HoverInfo.js

@@ -22,7 +22,6 @@ const TooltipRow = styled.div`
 
 const TooltipRowColor = styled.span`
   background-color: ${props => props.color};
-  border-radius: 1px;
   margin-right: 4px;
   min-width: 10px;
   height: 4px;

src/components/PrometheusGraph/_Legend.js

@@ -25,7 +25,7 @@ const LegendItem = styled.div`
   padding: 2px 16px 2px 7px;
   margin-right: 2px;
   margin-bottom: 2px;
-  border-radius: 4px;
+  border-radius: ${props => props.theme.borderRadius.soft};
 
   &:hover {
     background-color: ${props => props.theme.colors.athens};
@@ -60,7 +60,6 @@ const LegendCaret = styled.span`
 
 const ColorBox = styled.span`
   background-color: ${props => props.color};
-  border-radius: 1px;
   margin-right: 4px;
   min-width: 13px;
   height: 5px;

src/components/PrometheusGraph/_Tooltip.js

@@ -11,7 +11,7 @@ const TooltipContainer = styled.div.attrs({
   color: ${props => props.theme.colors.primary.charcoal};
   background-color: ${props => props.theme.colors.lightgray};
   border: 1px solid ${props => props.theme.colors.silverDark};
-  border-radius: ${props => props.theme.borderRadius};
+  border-radius: ${props => props.theme.borderRadius.soft};
   z-index: ${props => props.theme.layers.tooltip};
   padding: 10px 15px;
   position: absolute;

src/components/TimeTravel/TimeTravel.js

@@ -33,7 +33,7 @@ const TimeControlsContainer = styled.div`
   border: 1px solid ${props => props.theme.colors.silverDark};
   box-shadow: 0 0 2px ${props => props.theme.colors.silverDark};
   background-color: ${props => props.theme.colors.white};
-  border-radius: 5px;
+  border-radius: ${props => props.theme.borderRadius.soft};
   display: flex;
 `;
 

src/theme/weave.js

@@ -144,7 +144,11 @@ const weave = {
     selected: `0px 0px 2px 2px ${colors.primary.lavender}`,
   },
 
-  borderRadius: '4px',
+  borderRadius: {
+    none: '0',
+    soft: '4px',
+    round: '50%',
+  },
 
   layers: {
     front: 1,
@@ -260,10 +264,20 @@ function themeFontSizesAsScss() {
   return themeFontSizes;
 }
 
+// Collects all theme border radii as SCSS vars.
+function themeBorderRadiiAsScss() {
+  const themeBorderRadii = [];
+
+  forEach(weave.borderRadius, (value, name) => {
+    themeBorderRadii.push(`$border-radius-${kebabCase(name)}: ${value}`);
+  });
+
+  return themeBorderRadii;
+}
+
 // Collects all theme misc vars as SCSS vars.
 function themeMiscVarsAsScss() {
   return [
-    `$border-radius: ${weave.borderRadius}`,
     `$overlay-icon-size: ${weave.overlayIconSize}`,
   ];
 }
@@ -273,6 +287,7 @@ export function themeVarsAsScss() {
     .concat(themeColorsAsScss())
     .concat(themeLayersAsScss())
     .concat(themeFontSizesAsScss())
+    .concat(themeBorderRadiiAsScss())
     .concat(themeMiscVarsAsScss());
   return `${themeVariables.join('; ')};`;
 }