rename uui-root to uui-font

Author: nielslyngsoe

.storybook/preview-body.html

@@ -1,4 +1,4 @@
 <script>
-  document.body.classList.add('uui-root');
+  document.body.classList.add('uui-font');
   document.body.classList.add('uui-text');
 </script>

packages/uui-css/README.md

@@ -5,7 +5,7 @@
 UUI-CSS package contains css files which can be included in your project or components if needed
 
 - **custom-properties.css** — use this if you like to include our custom properties in your project.
-- **uui-font.css** — use this if you like to import our font in your project. You must set the `uui-root` class on your root element.
+- **uui-font.css** — use this if you like to import our font in your project. You must set the `uui-font` class on your root element.
 - **uui-text.css** — use this if you like to declare styles for typography, this is needed when using ex.: H1 in a Shadow DOM. You must set the `uui-text` class in your root element.
 
 Bundle:

packages/uui-css/lib/guidelines.story.ts

@@ -92,7 +92,7 @@ export const Typography = () => html`
     <h2>Setup</h2>
     <p>
       The Umbraco Typography can be used on a full web application or on a
-      dedicated spot. To set the font use the <b>uui-root</b> class on the root
+      dedicated spot. To set the font use the <b>uui-font</b> class on the root
       element or a element of interest. Additionally the <b>uui-text</b> class
       must be set to expose the Umbraco Typography Styles. See the UUI-CSS
       package for more.

packages/uui-css/lib/uui-css.story.ts

@@ -34,12 +34,12 @@ export const Overview: Story = () => html` <article style="max-width:580px;">
       properties in your project.
     </li>
     <li>
-      <b>uui-font.css</b> — use the .uui-root class if you like to declare the
+      <b>uui-font.css</b> — use the .uui-font class if you like to declare the
       Umbraco typography, this is needed for getting the Umbraco typography.
     </li>
     <li>
       <b>uui-text.css</b> — use the .uui-text class if you like to declare
-      styles for typography, must be used together with .uui-root. This is
+      styles for typography, must be used together with .uui-font. This is
       needed for having proper styling for H1, H2, P etc.
     </li>
     <li>

packages/uui-css/lib/uui-font.css

@@ -1,6 +1,6 @@
 @import './typography/lato.css';
 
-.uui-root {
+.uui-font {
   font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 15px;
   line-height: calc(var(--uui-size-2) * 4);