Adjust article.{error, warning} sizing (#8757)

* Adjust article.{error, warning} sizing

* Adjust css var naming

packages/apps/public/index.html

@@ -11,8 +11,8 @@
       :root {
         --font-mono: 0.9em Consolas, monaco, "Ubuntu Mono", "Liberation Mono", "Courier New", Courier, monospace;
         --font-sans: 1em "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-        --font-size-button: 0.925rem;
         --font-size-label: 0.75rem;
+        --font-size-medium: 0.925rem; /* 0.935 * 0.935 = 0.875 */
         --font-size-small: 0.875rem;
         --font-size-tiny: 0.71428571rem;
         --font-weight-bold: 700;

packages/apps/src/Menu/Grouping.tsx

@@ -59,7 +59,7 @@ export default React.memo(styled(Grouping)`
   .groupHdr {
     border-radius: 0.25rem;
     padding: 0.857rem 1.375rem;
-    font-size: var(--font-size-button);
+    font-size: var(--font-size-medium);
     font-weight: 400;
     line-height: 1.214rem;
 

packages/apps/src/Menu/Item.tsx

@@ -101,7 +101,7 @@ export default React.memo(styled(Item)`
     padding: 0.5rem 1.15rem 0.57rem;
     text-decoration: none;
     font-weight: 400;
-    font-size: var(--font-size-button);
+    font-size: var(--font-size-medium);
     line-height: 1.5rem;
   }
 

packages/react-components/src/Tabs/Tab.tsx

@@ -51,7 +51,7 @@ export default React.memo(styled(Tab)`
   align-items: center;
   display: flex;
   color: #8B8B8B;
-  font-size: var(--font-size-button);
+  font-size: var(--font-size-medium);
   height: 100%;
   padding: 0 1.5rem;
   position: relative;

packages/react-components/src/styles/components.ts

@@ -46,7 +46,7 @@ export default (_theme: ThemeDef): string => `
 
   button.ui--Button {
     font: var(--font-sans);
-    font-size: var(--font-size-button);
+    font-size: var(--font-size-medium);
   }
 
   .editable {

packages/react-components/src/styles/index.ts

@@ -387,7 +387,7 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
     &.error,
     &.warning {
       border-left-width: 0.25rem;
-      font-size: var(--font-size-small);
+      font-size: var(--font-size-medium);
       line-height: 1.5;
       margin-left: 2.25rem;
       padding: 0.75rem 1rem;