@scalescss/base-typography - npm Package Compare versions

Comparing version 3.0.0-alpha.8 to 3.0.0-alpha.9

package.json

 {
   "name": "@scalescss/base-typography",
-  "version": "3.0.0-alpha.8",
+  "version": "3.0.0-alpha.9",
   "description": "Base typographic styles for Scales CSS",
@@ -5,0 +5,0 @@ "main": "_typography.scss",

README.md

@@ -19,3 +19,3 @@ # Base Typography for Scales
 ```
-<p class="lede">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus. Sed vestibulum felis vel euismod aliquet. Suspendisse sit amet euismod nibh, eget fermentum arcu. Aliquam lacinia, sem eu ultricies auctor, velit nunc commodo sapien, pharetra maximus augue dui eget dui.</p>
+<p class="Lede">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus. Sed vestibulum felis vel euismod aliquet. Suspendisse sit amet euismod nibh, eget fermentum arcu. Aliquam lacinia, sem eu ultricies auctor, velit nunc commodo sapien, pharetra maximus augue dui eget dui.</p>
 ```
@@ -26,8 +26,10 @@
 <pre><code>
-&lt;h1&gt;This is an H1&lt;/h1&gt;
-&lt;h2&gt;This is an H2&lt;/h2&gt;
-&lt;h3&gt;This is an H3&lt;/h3&gt;
-&lt;h4&gt;This is an H4&lt;/h4&gt;
-&lt;h5&gt;This is an H5&lt;/h5&gt;
-&lt;h6&gt;This is an H6&lt;/h6&gt;
+function padZeros(num, totalLen) {
+  var numStr = num.toString();
+  var numZeros = totalLen - numStr.length;
+  for (var i = 1; i <= numZeros; i++) {
+    numStr = "0" + numStr;
+  }
+  return numStr;
+}
 </code></pre>
@@ -40,12 +42,12 @@ ```
 ```
-<p class="measure">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus.</p>
+<p class="Measure">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus.</p>
 
-<p class="measure--narrow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus.</p>
+<p class="Measure--narrow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus.</p>
 ```
 
 ### Truncation
-This allows you to cut text off if it exceeds the width of the viewport and adds an ellipsis. This works even better when combined with [overrides-size](https://github.com/ScalesCSS/overrides-size) to control where it cuts off by applying a width to the container.
+This allows you to cut text off if it exceeds the width of the viewport and adds an ellipsis. This works even better when combined with [overrides-size](https://github.com/ScalesCSS/scalescss/tree/master/packages/utilities-size) to control where it cuts off by applying a width to the container.
 
 ```
-<p class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus.</p>
+<p class="Truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum. Vivamus semper ex a lorem sodales, rhoncus rhoncus augue cursus.</p>
 ```
@@ -55,21 +57,21 @@
 
-* `.lede` or `.lead`
-* `.measure`
-* `.measure--narrow`
-* `.truncate`
+* `.Lede` or `.Lead`
+* `.Measure`
+* `.Measure--narrow`
+* `.Truncate`
 
 ### Heading Utility Classes
 
-* `.h1`
-* `.h2`
-* `.h3`
-* `.h4`
-* `.h5`
-* `.h6`
-* `.alpha`
-* `.beta`
-* `.gamma`
-* `.delta`
-* `.epsilon`
-* `.zeta`
+* `.H1`
+* `.H2`
+* `.H3`
+* `.H4`
+* `.H5`
+* `.H6`
+* `.Alpha`
+* `.Beta`
+* `.Gamma`
+* `.Delta`
+* `.Epsilon`
+* `.Zeta`
 
@@ -88,3 +90,7 @@ ## Available Variables
 * `$code-block-text-color`
-* `$pre-wordwrap` - Set to true to make text in a code block wrap to new lines when it reaches the bounds of the container.
+* `$pre-wordwrap` - Set to 'true' to make text in a code block wrap to new lines when it reaches the bounds of the container.
+* `$reset-heading-sizes` - Set to 'true' to make the default heading sizes match the base font size.
+* `$system-body-fonts` - Set to 'false' to use the `$base-font-stack` instead of using system fonts.
+* `$system-heading-fonts` - Set to 'false' to use the `$heading-font-stack` instead of using system fonts.
+* `$system-font-stack`
 * `$monospaced-font-stack`
@@ -94,2 +100,3 @@ * `$base-font-stack`
 * `$heading-font-weight`
+* `$font-size-unit`
 * `$base-font-size`
@@ -113,4 +120,6 @@ * `$base-line-height`
 
-### The Scales Namespace Variable
+### Namespace Variables
 
+#### The Scales Namespace Variable
+
 All Scales patterns expose the `$scales-namespace` variable.
@@ -120,8 +129,18 @@
 
-To give all Scales classes a namespace, you will need to set this variable in a file that is imported before any scales files. For example:
+#### Class Level Namespace Variable
 
+Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components".
+
+This pattern exposes the `$scales-base-class-namespace` variable.
+
+`$scales-base-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`.
+
+#### Namespace Variable Usage
+
+To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:
+
 ```
-@import your-project/settings; // $scales-namespace is set in this file
-@import your-project/scales; // Imports the Scales library
+@import your-project/settings; // Namespace variables are set in this file
+@import your-project/scalescss; // Imports all of the Scales packages
 @import your-project/project // The rest of your project imports
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16998

increased by20.53%

Number of lines in readme file

139

increased by15.83%

No dependency changes