Merge dev into feature/uui-dialog-layout

Author: JesmoDev

.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>

package-lock.json

@@ -58,7 +58,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.15.0",
-    "@open-wc/testing": "2.5.33",
+    "@open-wc/testing": "3.0.4",
     "@rollup/plugin-node-resolve": "13.0.5",
     "@storybook/addon-a11y": "6.4.18",
     "@storybook/addon-actions": "6.4.18",
@@ -94,6 +94,7 @@
     "postcss-custom-properties-fallback": "1.0.1",
     "postcss-jsx": "0.36.4",
     "postcss-load-config": "3.1.0",
+    "postcss-url": "^10.1.3",
     "postcss-values-parser": "6.0.0",
     "prettier": "2.5.1",
     "rimraf": "3.0.2",
@@ -102,12 +103,12 @@
     "rollup-plugin-import-css": "3.0.2",
     "rollup-plugin-minify-html-literals": "1.2.6",
     "rollup-plugin-postcss": "4.0.2",
-    "storybook-builder-vite": "0.1.14",
+    "storybook-builder-vite": "0.1.15",
     "tsc-files": "1.1.3",
     "turbo": "*",
     "typescript": "4.5.2",
-    "vite": "2.7.13",
-    "vite-tsconfig-paths": "3.3.17",
+    "vite": "2.8.1",
+    "vite-tsconfig-paths": "3.4.0",
     "web-component-analyzer": "1.1.6"
   },
   "workspaces": [

package.json

@@ -5,17 +5,53 @@
 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.
-- **local-typography.css** — use this if you like to declare styles for typography, this is needed when using ex.: H1 in a Shadow DOM.
-- **root.css** — If you like your project to be styled for Umbraco UI, then include this in the root of your project.
+- **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:
+
+- **uui-css.css** — If you like your project to be styled for Umbraco UI, then include this in the root of your project. This contains all the previous files, so make sure to only include this file in your project if you need to style your project.
+
+# Usage in your project
+
+## CDN
+
+For the best results you should include the `uui-css.css` bundle in your project, which contains all the css files and custom variables:
+
+```html
+<!-- Latest Version -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@umbraco-ui/uui-css@latest/dist/uui-css.css" />
+
+<!-- Specific version -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@umbraco-ui/[email protected]/dist/uui-css.css" />
+```
 
 ## Installation
 
+If you want to have fine-grained control over the CSS files, you can install the `@umbraco-ui/uui-css` package.
+
 ```zsh
 npm i @umbraco-ui/uui-css
 ```
 
 ## Usage
 
-```html
-<style src="@umbraco-ui/uui-css/root.css"></style>
+For a build system like _Vite_, the styling could be included like this if you want to control the styling and variables with the build system:
+
+```ts
+// app.ts
+import '@umbraco-ui/uui-css/dist/custom-properties.css';
+import '@umbraco-ui/uui-css/dist/uui-font.css';
+import '@umbraco-ui/uui-css/dist/uui-text.css';
+```
+
+Or you can just import the compiled bundle at once:
+
+```ts
+// app.ts
+import '@umbraco-ui/uui-css/dist/uui-css.css';
 ```

packages/uui-css/README.md

@@ -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/guidelines.story.ts

@@ -1,4 +1,3 @@
 @import './custom-properties.css';
-@import './typography/lato.css';
-@import './typography/uui-root.css';
-@import './typography/uui-text.css';
+@import './uui-font.css';
+@import './uui-text.css';

packages/uui-css/lib/typography/uui-text.css

@@ -9,7 +9,13 @@ export default {
     docs: {
       source: {
         code: `
-          <style src="@umbraco-ui/uui-css/root.css"></style>
+          // Include each of the following:
+          import '@umbraco-ui/uui-css/dist/custom-properties.css';
+          import '@umbraco-ui/uui-css/dist/uui-font.css';
+          import '@umbraco-ui/uui-css/dist/uui-text.css';
+
+          // Alternatively include the compiled bundle
+          import '@umbraco-ui/uui-css/dist/uui-css.css';
         `,
       },
     },
@@ -28,12 +34,12 @@ export const Overview: Story = () => html` <article style="max-width:580px;">
       properties in your project.
     </li>
     <li>
-      <b>uui-root.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-css.css

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