docs: more theming docs

Author: matyasf

docs/guides/using-theme-overrides.md

@@ -9,7 +9,7 @@ order: 2
 This document gives an overview on how you can customize Instructure UI components by tweaking their theme variables.
 While this gives you a level of flexibility on the look and feel of the components you should be aware of 2 things:
 
-- The default theme variables are tested to have high enough contrast ratios for WCAG 2.1 conformance. If you are making changes, please make sure that your app stays WCAG conformant.
+- The default theme variables are tested to have high enough contrast ratios for WCAG 2.1 AA conformance. If you are making changes, please make sure that your app stays WCAG conformant.
 - The look of components is only customisable to a certain degree. This is intentional, because Instructure UI is a design system geared towards the Canvas "look and feel", not a generic UI component library.
 
 ```js
@@ -199,9 +199,27 @@ type: example
   <div>
     <Button color='primary'
       themeOverride={{ primaryBackground: "purple" }}
-      margin="small 0 0">
+      margin="small 0 large">
       Purple Primary Button
     </Button>
+    <InstUISettingsProvider
+      theme={{
+        componentOverrides: {
+          TextInput: { background: "yellow" }
+        }
+      }}
+    >
+      <DateInput2
+        renderLabel="This is how to handle override in a nested component"
+        screenReaderLabels={{
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        }}
+        width="20rem"
+        invalidDateErrorMessage="Invalid date"
+      />
+    </InstUISettingsProvider>
   </div>
 </div>
 ```