@contentful/forma-36-fcss - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package.json

 {
   "name": "@contentful/forma-36-fcss",
   "description": "Forma 36 FCSS",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "dist/styles.css",
@@ -15,6 +15,6 @@ "license": "MIT",
   "dependencies": {
+    "@contentful/forma-36-tokens": "^0.0.2",
     "postcss": "^7.0.6",
     "postcss-calc": "^7.0.1",
-    "postcss-css-variables": "^0.11.0",
-    "@contentful/forma-36-tokens": "^0.0.1"
+    "postcss-css-variables": "^0.11.0"
   },
@@ -27,3 +27,4 @@ "scripts": {
     "access": "public"
-  }
+  },
+  "gitHead": "2fd1b6c3c098d16d2b196b83697a4ec1854abc8f"
 }

README.md

 # Forma 36 FCSS
 
-Forma 36 CSS Utilities are a functional css utility toolbelt.
-This package provides classnames for colors, shadows, spacing, transitions and typography.
+Forma 36 FCSS - Utility CSS classes for applying spacing, colors, typography, shadows, and transitions to elements.
 
-## Class name naming convention
+## Getting started
 
+Import the stlyes.css file into your stylesheet.
+
+```
+@import '@contentful/forma-36-fcss/dist/styles.css`
+```
+
+## Naming convention
+
 The class names consist out of the prefix (e.g. .f36-) the attribute (e.g. margin-bottom) and the scale or modifier (--xs).
@@ -29,5 +36,3 @@ See a list of all class names below
 
- .f36-margin-top--xs {
-   margin-top: var(--vertical-spacing-xs)
- }
+ .f36-margin-top--xs
 ```
@@ -47,9 +52,7 @@
 Scale:
-xs, s, m, l, xl, 2xl
+xs, s, m, l, xl, 2xl, 3xl, 4xl
 
 Class name composition example:
 
- .f36-padding-top--xs {
-   padding-top: var(--vertical-spacing-xs)
- }
+ .f36-padding-top--xs
 ```
@@ -76,5 +79,3 @@
 
- .f36-font-size--s {
-   font-size: var(--font-size-s)
- }
+ .f36-font-size--s
 ```
@@ -92,5 +93,3 @@
 
-.f36-font-weight--normal {
-  font-weight: var(--font-weight-normal)
-}
+.f36-font-weight--normal
 ```
@@ -108,5 +107,3 @@
 
-.f36-line-height--default {
-  line-height: var(--line-height-default)
-}
+.f36-line-height--default
 ```
@@ -168,8 +165,60 @@
 | .f36-color--mint | .f36-background-color--mint |
-| .f36-color--ice  | .f36-bg-ice                 |
+| .f36-color--ice  | .f36-background-color--ice  |
 
 White:
 
-| Color             | Background    |
-| ----------------- | :------------ |
-| .f36-color--white | .f36-bg-white |
+| Color             | Background                   |
+| ----------------- | :--------------------------- |
+| .f36-color--white | .f36-background-color--white |
+
+## Shadows
+
+```
+box-shadow
+
+Scale:
+default, heavy
+
+Class name composition example:
+
+.f36-box-shadow--default
+```
+
+### Glows
+
+```
+box-shadow
+
+Scale:
+primary, negative, positive
+
+Class name composition example:
+
+.f36-glow--primary
+```
+
+## Transitions
+
+```
+transition-duration
+
+Scale:
+short, default, long
+
+Class name composition example:
+
+.f36-transition-duration--short
+```
+
+### Easing
+
+```
+transition-easing
+
+Scale:
+default, cubic-bezier
+
+Class name composition example:
+
+.f36-transition-easing--default
+```

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

16328

increased by9.27%

Number of package files

4

increased by33.33%

Number of lines in readme file

219

increased by28.82%

Worsened metrics

Lines of code

41

decreased by-2.38%

Dependency changes

• + Added@contentful/forma-36-tokens@0.0.2(transitive)

• - Removed@contentful/forma-36-tokens@0.0.1(transitive)

• Updated@contentful/forma-36-tokens@^0.0.2