overall style adjustments

Author: nielslyngsoe

.storybook/preview.js

@@ -1,6 +1,6 @@
 import { setCustomElements } from '@storybook/web-components';
 import customElements from '../custom-elements.json';
-import '../packages/uui-css/lib/uui-root.css';
+import '../packages/uui-css/lib/uui-css.css';
 import 'https://cdn.skypack.dev/element-internals-polyfill';
 
 const sort = (a, b) => {

package-lock.json

@@ -38,8 +38,8 @@
   --uui-size-space-1: 3px; /*--uui-size-1*/
   --uui-size-space-2: 6px; /*--uui-size-2*/
   --uui-size-space-3: 12px; /*--uui-size-4*/
-  --uui-size-space-4: 15px; /*--uui-size-5*/
-  --uui-size-space-5: 21px; /*--uui-size-7*/
+  --uui-size-space-4: 18px; /*--uui-size-6*/
+  --uui-size-space-5: 24px; /*--uui-size-8*/
 
   --uui-size-layout-1: 24px; /*--uui-size-8*/
   --uui-size-layout-2: 30px; /*--uui-size-10*/
@@ -59,4 +59,5 @@
   --uui-type-h3-size: 30px; /*--uui-size-10*/
   --uui-type-h4-size: 21px;
   --uui-type-h5-size: var(--uui-type-default-size);
+  --uui-type-h6-size: var(--uui-type-small-size);
 }

packages/uui-css/lib/custom-properties/sizes.css

@@ -1,14 +1,14 @@
 import { html } from 'lit-html';
 
 export default {
-  title: 'Design/Guidelines',
+  title: 'Design/Style Guide',
 };
 
-export const LayoutSystem = () => html`
+export const Layout = () => html`
   <article class="uui-root uui-text" style="max-width:580px;">
     <div
       style="display:block; border-bottom: 1px solid var(--uui-color-cocoa-black); padding-top: var(--uui-size-layout-5); margin-bottom:var(--uui-size-layout-3); padding-bottom:var(--uui-size-layout-1);">
-      <h1>Layout System</h1>
+      <h1>Layout Style Guide</h1>
       <p class="uui-lead">
         Following predictable rhythms, will form harmonious arrangements<br />
         — ensuring a calm & friendly visual experience.
@@ -24,33 +24,38 @@ export const LayoutSystem = () => html`
 
     <h2>Baseline grid & base unit</h2>
     <p>
-      Baseline grids is a classic layout method, ensuring everything aligns
-      vertically on line with a certain rhythm. This rhythm will be of same size
-      as our base-unit, which almost everything in our design will be based
-      upon.
+      Baseline grids is a classic layout method, the goal of it is to ensuring
+      everything aligns vertically to a certain rhythm. This rhythm will be of
+      same size as our base-unit, which almost everything in our design will be
+      based upon.
     </p>
     <p>
-      We have no creat way of ensuring this in web applications, but we should
-      try to follow this concept when we design out layouts.
+      We have no technical ways to ensuring this in a web application, but we
+      should try to follow this concept when we setup the layout of an
+      application.
     </p>
     <blockquote>
       You can view the baseline grid at anytime by pressing CTRL + G on your
       keyboard.
     </blockquote>
     <p>
-      Our base-unit is 6px, providing sizing options of 6, 12, 18, 24, 30, 36,
-      42, ... This provides a wide variety of sizes kept in a certain system.
+      Base-unit is 6px, providing sizing options of 6, 12, 18, 24, 30, 36, 42,
+      ... This provides a wide variety of sizes with noticeable difference.
     </p>
 
     <h2>Spacing</h2>
     <p>
       The general rule of spacing is that the space between elements declares
-      the relation of those. The more related elements are they should stay
-      closer than ones that are less related. It's not a absolute rule as we can
-      use other visual elements to indicate separation, like lines and
-      background color. When using pure space for separation we need to ensure
+      the relation of those. The more related elements should stay closer than
+      ones that are less related. It's not a absolute rule as we can use other
+      visual elements to indicate separation (ex.: a line or different
+      background colors). When using pure space for separation we need to ensure
       the space divided is distinguishable for the eye.
     </p>
+    <blockquote>
+      The space between elements matters more than getting the size of the
+      elements right.
+    </blockquote>
     <p>
       The layout custom properties provides layout spacing options for most
       cases. using this system will ensure layout spacing will be coherent
@@ -68,53 +73,40 @@ export const LayoutSystem = () => html`
   </article>
 `;
 
-export const TypographyGuideline = () => html`
+export const Typography = () => html`
   <article class="uui-root uui-text" style="max-width:580px;">
     <div
       style="display:block; border-bottom: 1px solid var(--uui-color-cocoa-black); padding-top: var(--uui-size-layout-5); margin-bottom:var(--uui-size-layout-3); padding-bottom:var(--uui-size-layout-1);">
-      <h1>Typography Guide</h1>
+      <h1>Typography Style Guide</h1>
       <p class="uui-lead">
-        Typography should differentiated enough visually to establish hierarchy.
-        This hierarchy should provide a visual overview of the textual content.
+        Typography should differentiate enough to establish a visual hierarchy,
+        providing orientation points for a calm reading experience.
       </p>
       <p>
         The following guide will take you through the concepts of the Umbraco
-        Textual Styles. This establishes a common textual reading experience
-        across sections and implementations.
+        Typography Styles. This establishes a common textual layouts across
+        parts and implementations.
       </p>
     </div>
 
-    <h2>Font & Weights</h2>
+    <h2>Setup</h2>
     <p>
-      The Umbraco font-face is the Google Font: Lato, we have it available in 3
-      different thicknesses 300 400 and 700.
+      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
+      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.
     </p>
 
-    <br />
-
-    <h2>Headlines</h2>
-    <p>There is five headline sizings to pick from:</p>
-    <h5>Headline H5</h5>
-    <h4>Headline H4</h4>
-    <h3>Headline H3</h3>
-    <h2>Headline H2</h2>
-    <h1>Headline H1</h1>
-
-    <br />
-
     <h2>Paragraphs & other elements</h2>
-    <p>
-      The default font-size is 15px, for a nice reading experience this conforms
-      well with a line-height of 24px, which is our base-unit times 4.
+    <p class="uui-lead">
+      A lead paragraph can summarize the following text. Lead paragraphs does
+      not have a corresponding native element, this is solved by applying the
+      class 'uui-lead' to a &#60;p&#62; element.
     </p>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-      est laborum.
+      The default font-size is 15px, for a nice reading experience this conforms
+      well with a line-height of 24px, (base-unit * 4).
     </p>
 
     <blockquote>
@@ -123,14 +115,33 @@ export const TypographyGuideline = () => html`
     </blockquote>
 
     <p>
-      Each paragraph is nicely separated, in this way its easier to identify and
-      relocated after a distraction.
+      Each &#60;p&#62; tag is nicely separated, in this way its easier to
+      identify and relocated after a distraction.
     </p>
 
     <small>
-      The small tag can be used for descriptions that cannot take too much
-      space. The small descriptions use 12px, for a nice reading experience this
-      conforms well with a line-height of 18px, which is our base-unit times 3.
+      The &#60;small&#62; tag can be used for descriptions that cannot use too
+      much space. The small descriptions use 12px, for a nice reading experience
+      this conforms well with a line-height of 18px, (base-unit * 3).
     </small>
+
+    <h2>Headlines</h2>
+    <p>
+      The headlines can be used via the dedicated native tag or by one of the
+      equivalent classes. This means that <b>Headline 1</b> can be used used via
+      <b>&#60;h1&#62;</b> or the class <b>uui-h1</b>.
+    </p>
+    <h5>Headline H5</h5>
+    <h4>Headline H4</h4>
+    <h3>Headline H3</h3>
+    <h2>Headline H2</h2>
+    <h1>Headline H1</h1>
+    <ul>
+      <li>&#60;h5&#62; — .uui-h5</li>
+      <li>&#60;h4&#62; — .uui-h4</li>
+      <li>&#60;h3&#62; — .uui-h3</li>
+      <li>&#60;h2&#62; — .uui-h2</li>
+      <li>&#60;h1&#62; — .uui-h1</li>
+    </ul>
   </article>
 `;

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

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

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

@@ -1,41 +1,43 @@
-.uui-text h1 {
+.uui-text h1,
+.uui-text .uui-h1 {
   font-size: var(--uui-type-h1-size);
   line-height: var(--uui-size-layout-4);
   font-weight: 300;
   margin-left: -5px;
   margin-top: var(--uui-size-layout-1);
   margin-bottom: var(--uui-size-layout-1);
 }
-.uui-text p + h1 {
+.uui-text p + h1,
+.uui-text p + .uui-h1 {
   margin-top: var(--uui-size-layout-4);
 }
 
-.uui-text h2 {
+.uui-text h2,
+.uui-text .uui-h2 {
   font-size: var(--uui-type-h2-size);
   line-height: var(--uui-size-layout-3);
   font-weight: 300;
-  padding-top: 1px;
-  padding-bottom: 5px;
   margin-left: -3px;
   margin-top: var(--uui-size-layout-1);
   margin-bottom: var(--uui-size-layout-1);
 }
-.uui-text p + h2 {
+.uui-text p + h2,
+.uui-text p + .uui-h2 {
   margin-top: var(--uui-size-layout-3);
 }
 
-.uui-text h3 {
+.uui-text h3,
+.uui-text .uui-h3 {
   font-size: var(--uui-type-h3-size);
   line-height: var(--uui-size-large);
   font-weight: 300;
-  padding-top: var(--uui-size-1);
-  padding-bottom: var(--uui-size-1);
   margin-left: -2px;
   margin-top: var(--uui-size-layout-1);
   margin-bottom: var(--uui-size-layout-1);
 }
 
-.uui-text h4 {
+.uui-text h4,
+.uui-text .uui-h4 {
   font-size: var(--uui-type-h4-size);
   line-height: 21px;
   font-weight: 400;
@@ -44,15 +46,17 @@
   margin-bottom: var(--uui-size-layout-1);
 }
 
-.uui-text h5 {
+.uui-text h5,
+.uui-text .uui-h5 {
   font-size: var(--uui-type-h5-size);
+  line-height: inherit;
+  font-weight: 700;
+  margin-left: 0;
   margin-top: var(--uui-size-layout-1);
   margin-bottom: var(--uui-size-layout-1);
 }
 
 .uui-text p {
-  padding-top: var(--uui-size-1);
-  padding-bottom: var(--uui-size-1);
   margin-top: var(--uui-size-layout-1);
   margin-bottom: var(--uui-size-layout-1);
 }
@@ -62,8 +66,8 @@
 
 .uui-text small {
   display: inline-block;
-  font-size: 12px;
-  line-height: calc(var(--uui-size-base-unit) * 3);
+  font-size: var(--uui-type-small-size);
+  line-height: calc(var(--uui-size-2) * 3);
   margin-bottom: var(--uui-size-layout-1);
 }
 
@@ -72,8 +76,6 @@
   font-size: 15px;
   font-weight: 700;
   font-style: italic;
-  padding-top: var(--uui-size-1);
-  padding-bottom: var(--uui-size-1);
   margin-top: 0;
   margin-bottom: var(--uui-size-layout-1);
   margin-right: -0.035em;
@@ -84,7 +86,7 @@
 
 .uui-text blockquote:before {
   content: open-quote;
-  margin-left: -0.46em;
+  margin-left: -0.4em;
   margin-right: 0.08em;
   vertical-align: bottom;
   font-weight: 400;
@@ -93,11 +95,24 @@
 
 .uui-text blockquote:after {
   content: close-quote;
-  margin-left: 0.08em;
-  margin-right: -0.46em;
+  margin-left: 0.04em;
+  margin-right: -0.4em;
   vertical-align: bottom;
   font-weight: 400;
   font-size: 2em;
   margin-bottom: -2px;
   display: inline-block;
 }
+
+.uui-text ul {
+  list-style-type: square;
+  padding-left: var(--uui-size-layout-1);
+  margin-top: var(--uui-size-layout-1);
+  margin-bottom: var(--uui-size-layout-1);
+}
+
+.uui-text ol {
+  padding-left: var(--uui-size-layout-1);
+  margin-top: var(--uui-size-layout-1);
+  margin-bottom: var(--uui-size-layout-1);
+}

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

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