docs(emotion,ui-themes): small theming documentation fixes

Author: matyasf

docs/guides/using-theme-overrides.md

@@ -86,7 +86,7 @@ type: example
       theme={{ typography: { fontFamily: 'monospace' } }}
     >
       <Heading level="h3" margin="small small">
-        monospace font family set via partial theme object.
+        monospace font family set via override on the parent theme.
       </Heading>
     </InstUISettingsProvider>
     <InstUISettingsProvider
@@ -97,7 +97,7 @@ type: example
       }}
     >
       <Heading level="h3" margin="small small">
-        monospace font family set via themeOverride.
+        monospace font family set via override only if the parent theme is 'canvas'.
       </Heading>
     </InstUISettingsProvider>
   </div>
@@ -150,7 +150,7 @@ type: example
       }}
     >
       <Alert variant="warning" margin="small">
-        My border and icon background should be deep pink just in the 'canvas' theme.
+        My border and icon background should be deep pink just if the 'canvas' theme is active.
       </Alert>
     </InstUISettingsProvider>
   </div>
@@ -199,8 +199,7 @@ type: example
   <div>
     <Button color='primary'
       themeOverride={{ primaryBackground: "purple" }}
-      margin="small 0 0"
-    >
+      margin="small 0 0">
       Purple Primary Button
     </Button>
   </div>

packages/emotion/README.md

@@ -110,8 +110,8 @@ type: example
     color='primary'
     margin="0 0 0 small"
     themeOverride={(_componentTheme, currentTheme) => ({
-      primaryBackground: currentTheme.colors.backgroundWarning,
-      primaryBorderColor: currentTheme.colors.backgroundLightest,
+      primaryBackground: currentTheme.colors.primitives.orange57,
+      primaryBorderColor: '#00AAA4',
       borderWidth: currentTheme.borders.widthLarge,
       borderStyle: 'dashed'
     })}

packages/ui-themes/README.md

@@ -21,6 +21,9 @@ npm install @instructure/ui-themes
 - application level theming:
 
   ```jsx
+  ---
+  type: code
+  ---
   import canvas from '@instructure/ui-themes'
 
   ReactDOM.render(
@@ -34,6 +37,9 @@ npm install @instructure/ui-themes
 - (DEPRECATED) global theming:
 
   ```js
+  ---
+  type: code
+  ---
   import canvas from '@instructure/ui-themes'
 
   canvas.use()
@@ -44,6 +50,9 @@ npm install @instructure/ui-themes
 - (DEPRECATED) globally:
 
   ```js
+  ---
+  type: code
+  ---
   import canvas from '@instructure/ui-themes'
 
   canvas.use({ overrides: { colors: { brand: 'red' } } })
@@ -52,6 +61,9 @@ npm install @instructure/ui-themes
 - application level:
 
   ```jsx
+  ---
+  type: code
+  ---
   import canvas from '@instructure/ui-themes'
   const themeOverrides = { colors: { brand: 'red' } }