@sb1/ffe-core - npm Package Compare versions

Comparing version 27.0.0 to 27.0.1

package.json

 {
     "name": "@sb1/ffe-core",
-    "version": "27.0.0",
+    "version": "27.0.1",
     "description": "Rammeverk for Felles Front End",
@@ -34,3 +34,3 @@ "license": "MIT",
     },
-    "gitHead": "af7fc1a32630d5717ffbc8f50f339ba697c73130"
+    "gitHead": "1ab898e744977e4cb4db1bee9b65369a0deeef9a"
 }

README.md

 # @sb1/ffe-core
 
-**ffe-core** has Less common to all components in FFE - typography, colors, etc.
+**ffe-core** contains styling common to all components in FFE - typography, colors, etc.
 It also includes JavaScript exports for color and breakpoint variables.
@@ -15,2 +15,8 @@
 
+Full documentation on usage is available at:
+
+https://design.sparebank1.no/komponenter/typografi/
+https://design.sparebank1.no/profil/farger/
+https://design.sparebank1.no/profil/spacing/
+
 ```less
@@ -23,6 +29,6 @@ /* Your project's main .less import file */
 
-### Importing piece by piece
+### Importing specific parts
 
-In some cases, you don't require everything in this package. You can import the
-pieces you require if you want:
+In some cases, you may not require everything in this package. You can import the
+parts you require if you want:
 
@@ -43,2 +49,12 @@ ```less
 
+## Theming with CSS custom properties
+
+Theming of components is supported through a set of custom properties, defined in a `less/theme.less` file in every styling package. The properties in `ffe-core` constitute a base theme, which is in turn used as default values in other packages. You may override the properties in each individual package in order to customize a single component, or override the properties defined in `ffe-core` to customize a sitewide theme.
+
+If your project uses the core styling, you're probably good to go. If not, make sure to import the core properties in `theme.less` from `ffe-core`:
+
+```css
+@import '~@sb1/ffe-core/less/theme';
+```
+
 ## Design tokens
@@ -54,7 +70,3 @@
 
-The less variables specified in this package are also
-available as named JavaScript imports. This can be useful for consumers that use
-CSS-in-JS, or that need access to these values in their JavaScript for other
-reasons. They are named the same as their LESS siblings, but are camelCased, and
-are without their `@ffe-` prefix.
+The less variables specified in this package are also available as named JavaScript imports. This can be useful for consumers that use CSS-in-JS, or that need access to these values in their JavaScript for other reasons. They are named the same as their LESS siblings, but are camelCased, and do not have the `@ffe-` prefix.
 
@@ -65,3 +77,3 @@ This is how you import them:
 import {
-    fargeHivt,
+    fargeHvit,
     fargeFjell30,
@@ -72,1 +84,15 @@ breakpointMd,
 ```
+
+## Development
+
+To start a local development server, run the following from the designsystem root folder:
+
+```bash
+npm install
+npm run build
+npm start
+```
+
+A local instance of `component-overview` with live reloading will run at http://localhost:1234/.
+
+Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.

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

50944

increased by2.51%

Number of lines in readme file

93

increased by38.81%

No dependency changes