@umbraco-ui/uui-css - npm Package Compare versions

Comparing version 0.1.1 to 1.0.0-alpha.0

lib/index.js

 import { unsafeCSS } from 'lit';
 
-var css = ".uui-text {\n  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  font-size: 15px;\n  line-height: calc(var(--uui-size-2,6px) * 4);\n  -webkit-font-smoothing: antialiased;\n}\n\n.uui-text h1,\n.uui-text .uui-h1 {\n  font-size: var(--uui-type-h1-size,60px);\n  line-height: var(--uui-size-layout-4,66px);\n  font-weight: 300;\n  margin-left: -5px;\n  margin-top: var(--uui-size-layout-1,24px);\n  margin-bottom: var(--uui-size-layout-1,24px);\n}\n.uui-text p + h1,\n.uui-text p + .uui-h1 {\n  margin-top: var(--uui-size-layout-4,66px);\n}\n.uui-text h1.--no-top-margin,\n.uui-text h1:first-child,\n.uui-text .uui-h1.--no-top-margin,\n.uui-text .uui-h1:first-child {\n  margin-top: 0;\n}\n\n.uui-text h2,\n.uui-text .uui-h2 {\n  font-size: var(--uui-type-h2-size,42px);\n  line-height: var(--uui-size-layout-3,42px);\n  font-weight: 300;\n  margin-left: -3px;\n  margin-top: var(--uui-size-layout-1,24px);\n  margin-bottom: var(--uui-size-layout-1,24px);\n}\n.uui-text p + h2,\n.uui-text p + .uui-h2 {\n  margin-top: var(--uui-size-layout-3,42px);\n}\n.uui-text h2.--no-top-margin,\n.uui-text h2:first-child,\n.uui-text .uui-h2.--no-top-margin,\n.uui-text .uui-h2:first-child {\n  margin-top: 0;\n}\n\n.uui-text h3,\n.uui-text .uui-h3 {\n  font-size: var(--uui-type-h3-size,30px);\n  line-height: var(--uui-size-large);\n  font-weight: 300;\n  margin-left: -2px;\n  margin-top: var(--uui-size-layout-1,24px);\n  margin-bottom: var(--uui-size-layout-1,24px);\n}\n.uui-text h3.--no-top-margin,\n.uui-text h3:first-child,\n.uui-text .uui-h3.--no-top-margin,\n.uui-text .uui-h3:first-child {\n  margin-top: 0;\n}\n\n.uui-text h4,\n.uui-text .uui-h4 {\n  font-size: var(--uui-type-h4-size,21px);\n  line-height: 21px;\n  font-weight: 400;\n  margin-left: -1px;\n  margin-top: var(--uui-size-layout-1,24px);\n  margin-bottom: var(--uui-size-layout-1,24px);\n}\n.uui-text h4.--no-top-margin,\n.uui-text h4:first-child,\n.uui-text .uui-h4.--no-top-margin,\n.uui-text .uui-h4:first-child {\n  margin-top: 0;\n}\n\n.uui-text h5,\n.uui-text .uui-h5 {\n  font-size: var(--uui-type-h5-size,15px);\n  line-height: inherit;\n  font-weight: 700;\n  margin-left: 0;\n  margin-top: var(--uui-size-layout-1,24px);\n  margin-bottom: 0;\n}\n\n.uui-text h5.--no-top-margin,\n.uui-text h5:first-child,\n.uui-text .uui-h5.--no-top-margin,\n.uui-text .uui-h5:first-child {\n  margin-top: 0;\n}\n\n.uui-text p {\n  margin-top: var(--uui-size-layout-1,24px);\n  margin-bottom: var(--uui-size-layout-1,24px);\n}\n.uui-text p.uui-lead {\n  font-size: var(--uui-size-6,18px);\n}\n\n.uui-text a:link,\n.uui-text a:active {\n  color: var(--uui-color-space-cadet,#1b264f);\n}\n.uui-text a:hover {\n  color: var(--uui-color-violet-blue,#3544b1);\n}\n\n.uui-text small {\n  display: inline-block;\n  font-size: var(--uui-type-small-size,12px);\n  line-height: calc(var(--uui-size-2,6px) * 3);\n  margin-bottom: var(--uui-size-layout-1,24px);\n}\n\n.uui-text blockquote {\n  float: right;\n  font-size: 15px;\n  font-weight: 700;\n  font-style: italic;\n  margin-top: 0;\n  margin-bottom: var(--uui-size-layout-1,24px);\n  margin-right: -0.035em;\n  max-width: 16em;\n  quotes: '“' '”' '‘' '’';\n  line-height: inherit;\n}\n\n.uui-text blockquote:before {\n  content: open-quote;\n  margin-left: -0.4em;\n  margin-right: 0.08em;\n  vertical-align: bottom;\n  font-weight: 400;\n  font-size: 2em;\n}\n\n.uui-text blockquote:after {\n  content: close-quote;\n  margin-left: 0.04em;\n  margin-right: -0.4em;\n  vertical-align: bottom;\n  font-weight: 400;\n  font-size: 2em;\n  margin-bottom: -2px;\n  display: inline-block;\n}\n\n.uui-text ul {\n  list-style-type: square;\n  padding-left: var(--uui-size-layout-1,24px);\n  margin-top: var(--uui-size-layout-1,24px);\n  margin-bottom: var(--uui-size-layout-1,24px);\n}\n\n.uui-text ol {\n  padding-left: var(--uui-size-layout-1,24px);\n  margin-top: var(--uui-size-layout-1,24px);\n  margin-bottom: var(--uui-size-layout-1,24px);\n}\n";
+var css = ".uui-text {\n  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  font-size: 15px;\n  line-height: calc(var(--uui-size-2,6px) * 4);\n  -webkit-font-smoothing: antialiased;\n}\n\n.uui-text h1,\n.uui-text .uui-h1 {\n  font-size: var(--uui-type-h1-size,60px);\n  line-height: var(--uui-size-layout-4,66px);\n  font-weight: 300;\n  margin-left: -5px;\n  margin-top: var(--uui-size-layout-1,24px);\n  margin-bottom: var(--uui-size-layout-1,24px);\n}\n.uui-text p + h1,\n.uui-text p + .uui-h1 {\n  margin-top: var(--uui-size-layout-4,66px);\n}\n.uui-text h1.--no-top-margin,\n.uui-text h1:first-child,\n.uui-text .uui-h1.--no-top-margin,\n.uui-text .uui-h1:first-child {\n  margin-top: 0;\n}\n\n.uui-text h2,\n.uui-text .uui-h2 {\n  font-size: var(--uui-type-h2-size,42px);\n  line-height: var(--uui-size-layout-3,42px);\n  font-weight: 300;\n  margin-left: -3px;\n  margin-top: var(--uui-size-layout-1,24px);\n  margin-bottom: var(--uui-size-layout-1,24px);\n}\n.uui-text p + h2,\n.uui-text p + .uui-h2 {\n  margin-top: var(--uui-size-layout-3,42px);\n}\n.uui-text h2.--no-top-margin,\n.uui-text h2:first-child,\n.uui-text .uui-h2.--no-top-margin,\n.uui-text .uui-h2:first-child {\n  margin-top: 0;\n}\n\n.uui-text h3,\n.uui-text .uui-h3 {\n  font-size: var(--uui-type-h3-size,30px);\n  line-height: var(--uui-size-large);\n  font-weight: 300;\n  margin-left: -2px;\n  margin-top: var(--uui-size-layout-1,24px);\n  margin-bottom: var(--uui-size-layout-1,24px);\n}\n.uui-text h3.--no-top-margin,\n.uui-text h3:first-child,\n.uui-text .uui-h3.--no-top-margin,\n.uui-text .uui-h3:first-child {\n  margin-top: 0;\n}\n\n.uui-text h4,\n.uui-text .uui-h4 {\n  font-size: var(--uui-type-h4-size,21px);\n  line-height: 21px;\n  font-weight: 400;\n  margin-left: -1px;\n  margin-top: var(--uui-size-layout-1,24px);\n  margin-bottom: var(--uui-size-layout-1,24px);\n}\n.uui-text h4.--no-top-margin,\n.uui-text h4:first-child,\n.uui-text .uui-h4.--no-top-margin,\n.uui-text .uui-h4:first-child {\n  margin-top: 0;\n}\n\n.uui-text h5,\n.uui-text .uui-h5 {\n  font-size: var(--uui-type-h5-size,15px);\n  line-height: inherit;\n  font-weight: 700;\n  margin-left: 0;\n  margin-top: var(--uui-size-layout-1,24px);\n  margin-bottom: 0;\n}\n\n.uui-text h5.--no-top-margin,\n.uui-text h5:first-child,\n.uui-text .uui-h5.--no-top-margin,\n.uui-text .uui-h5:first-child {\n  margin-top: 0;\n}\n\n.uui-text p {\n  margin-top: var(--uui-size-layout-1,24px);\n  margin-bottom: var(--uui-size-layout-1,24px);\n}\n.uui-text p.uui-lead {\n  font-size: var(--uui-size-6,18px);\n}\n\n.uui-text a:link,\n.uui-text a:active {\n  color: var(--uui-color-space-cadet);\n}\n.uui-text a:hover {\n  color: var(--uui-color-violet-blue);\n}\n\n.uui-text small {\n  display: inline-block;\n  font-size: var(--uui-type-small-size,12px);\n  line-height: calc(var(--uui-size-2,6px) * 3);\n  margin-bottom: var(--uui-size-layout-1,24px);\n}\n\n.uui-text blockquote {\n  float: right;\n  font-size: 15px;\n  font-weight: 700;\n  font-style: italic;\n  margin-top: 0;\n  margin-bottom: var(--uui-size-layout-1,24px);\n  margin-right: -0.035em;\n  max-width: 16em;\n  quotes: '“' '”' '‘' '’';\n  line-height: inherit;\n}\n\n.uui-text blockquote:before {\n  content: open-quote;\n  margin-left: -0.4em;\n  margin-right: 0.08em;\n  vertical-align: bottom;\n  font-weight: 400;\n  font-size: 2em;\n}\n\n.uui-text blockquote:after {\n  content: close-quote;\n  margin-left: 0.04em;\n  margin-right: -0.4em;\n  vertical-align: bottom;\n  font-weight: 400;\n  font-size: 2em;\n  margin-bottom: -2px;\n  display: inline-block;\n}\n\n.uui-text ul {\n  list-style-type: square;\n  padding-left: var(--uui-size-layout-1,24px);\n  margin-top: var(--uui-size-layout-1,24px);\n  margin-bottom: var(--uui-size-layout-1,24px);\n}\n\n.uui-text ol {\n  padding-left: var(--uui-size-layout-1,24px);\n  margin-top: var(--uui-size-layout-1,24px);\n  margin-bottom: var(--uui-size-layout-1,24px);\n}\n";
 
@@ -5,0 +5,0 @@ const UUITextStyles = unsafeCSS(css);

package.json

 {
   "name": "@umbraco-ui/uui-css",
-  "version": "0.1.1",
+  "version": "1.0.0-alpha.0",
   "license": "MIT",
@@ -33,3 +33,3 @@ "keywords": [
   "dependencies": {
-    "lit": "^2.0.0"
+    "lit": "^2.2.2"
   },
@@ -47,3 +47,3 @@ "scripts": {
   "homepage": "https://uui.umbraco.com/?path=/story/uui-css",
-  "gitHead": "d91d346a0659f52de2a3c4746065c554f95e6328"
+  "gitHead": "7d7608bf2fb63a8a077fcd8f0346dea73584b878"
 }

README.md

@@ -9,7 +9,8 @@ # uui-css
 - **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.
+- **uui-text.css** — use this if you like to declare styles for typography for tags such as h1, h2. This is used in companionship with `uui-font`. Set the `uui-text` class on the element covering the scope of interest, this can be your root element. And if you want to use the styling inside a Shadow dom, that will have to have the `uui-text` class as well. See Applying the uui-css styling in the root.
+  [See examples](#Usage)
 
 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.
+- **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. You will still have to apply the `uui-font` and `uui-text` classes.
 
@@ -63,1 +64,109 @@ ### See it in action
 ```
+
+### Applying the uui-css styling in the root
+
+Using the `uui-font` and `uui-text`
+
+```html
+<body class="uui-font uui-text">
+  <div id="app">
+    <h1>Hello uui-css!</h1>
+    <p>
+      Everything inside my app will now use the font from uui-font and tag
+      styling from uui-text because the root(body) has the uui-font and uui-text
+      classes.
+    </p>
+  </div>
+</body>
+```
+
+Using the custom properties:
+
+```html
+<p style="background: var(--uui-interface-surface-alt);">
+  I will now have a background color from the custom properties.
+</p>
+```
+
+Full example:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@umbraco-ui/uui-css@latest/dist/uui-css.css" />
+  </head>
+  <body class="uui-font uui-text">
+    <div id="app">
+      <h1>Hello uui-css!</h1>
+      <p>
+        Everything inside my app will now use the font from uui-font and tag
+        styling from uui-text because the root(body) has the uui-font and
+        uui-text classes.
+      </p>
+      <p style="background: var(--uui-interface-surface-alt);">
+        I will have a background color from the custom properties.
+      </p>
+    </div>
+  </body>
+</html>
+```
+
+### Applying uui-text in a component
+
+Import the text css from uui-css
+
+```js
+import { UUITextStyles } from '@umbraco-ui/uui-css';
+```
+
+Add the css to the component styles
+
+```js
+static styles = [
+  UUITextStyles,
+  css`
+  /* your css goes here */
+`,
+];
+```
+
+Add the `uui-text` class to the root of the component
+
+```html
+<div class="uui-text">This is my custom element</div>
+```
+
+Full example:
+
+```js
+import { html, css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { UUITextStyles } from '@umbraco-ui/uui-css';
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+  static styles = [
+    UUITextStyles,
+    css`
+    /* your css goes here */
+  `,
+  ];
+
+  render() {
+    return html`
+    <div class="uui-text">
+      This is my custom element
+    </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'my-element': MyElement;
+  }
+}
+```

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

171

increased by175.81%

Worsened metrics

Total package byte prevSize

402515

decreased by-1.86%

Lines of code

1074

decreased by-9.9%

Number of maintainers

5

decreased by-16.67%

Dependency changes

• Updatedlit@^2.2.2