Move React Native variables to separate section.

packages/base-styles/_variables.scss

@@ -1,3 +1,10 @@
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ */
+
 @import "./colors";
 
 /**
@@ -10,14 +17,10 @@ $default-line-height: 1.4;
 $editor-font: "Noto Serif", serif;
 $editor-html-font: Menlo, Consolas, monaco, monospace;
 $editor-font-size: 16px;
-$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks (it's 2x $block-padding).
+$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks.
 $text-editor-font-size: 15px;
 $editor-line-height: 1.8;
-$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in"
-$border-width: 1px;
-$border-width-focus: 1.5px;
-$border-width-tab: 4px;
-$helptext-font-size: 12px;
+$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in".
 
 
 /**
@@ -53,10 +56,6 @@ $admin-sidebar-width-big: 190px;
 $admin-sidebar-width-collapsed: 36px;
 $modal-min-width: 360px;
 $spinner-size: 18px;
-$mobile-header-toolbar-height: 44px;
-$mobile-floating-toolbar-height: 44px;
-$mobile-floating-toolbar-margin: 8px;
-$mobile-color-swatch: 48px;
 
 
 /**
@@ -77,37 +76,49 @@ $widget-area-width: 700px;
 
 
 /**
- * Block UI.
+ * Block & Editor UI.
  */
 
 $block-toolbar-height: $grid-unit-60;
-$mobile-block-toolbar-height: 44px;
-$dimmed-opacity: 1;
-
-$block-edge-to-content: 16px;
-$solid-border-space: 12px;
-$dashed-border-space: 6px;
-$block-selected-margin: 3px;
-$block-selected-border-width: 1px;
-$block-selected-padding: 0;
-$block-selected-child-margin: 5px;
-$block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;
+$border-width: 1px;
+$border-width-focus: 1.5px;
+$border-width-tab: 4px;
+$helptext-font-size: 12px;
+$radius-round: 50%;
+$radius-block-ui: 2px;
 
 // Deprecated, please avoid using these.
 $block-padding: 14px; // Used to define space between block footprint and surrouding borders.
 
 
 /**
- * Border radii.
+ * Block paddings.
  */
 
-$radius-round: 50%;
-$radius-block-ui: 2px;
+// Padding for blocks with a background color (e.g. paragraph or group).
+$block-bg-padding--v: 1.25em;
+$block-bg-padding--h: 2.375em;
 
 
 /**
- * Block paddings.
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
  */
-// Padding for blocks with a background color (e.g. paragraph or group).
-$block-bg-padding--v: 1.25em;
-$block-bg-padding--h: 2.375em;
+
+// Dimensions.
+$mobile-header-toolbar-height: 44px;
+$mobile-floating-toolbar-height: 44px;
+$mobile-floating-toolbar-margin: 8px;
+$mobile-color-swatch: 48px;
+
+// Block UI.
+$mobile-block-toolbar-height: 44px;
+$dimmed-opacity: 1;
+$block-edge-to-content: 16px;
+$solid-border-space: 12px;
+$dashed-border-space: 6px;
+$block-selected-margin: 3px;
+$block-selected-border-width: 1px;
+$block-selected-padding: 0;
+$block-selected-child-margin: 5px;
+$block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;