@sb1/ffe-core 27.0.0 → 27.0.1

package/README.md

@@ -1,6 +1,6 @@
 # @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.
 
 ## Install
@@ -12,6 +12,12 @@ npm install --save-dev less less-plugin-npm-import    # less-plugin is optional,
 
 ## Usage
 
+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
 /* Your project's main .less import file */
 @import 'npm://@sb1/ffe-core/less/ffe'; // with less-plugin
@@ -19,10 +25,10 @@ npm install --save-dev less less-plugin-npm-import    # less-plugin is optional,
 @import '../path/to/node_modules/@sb1/ffe-core/less/ffe'; // direct reference
 ```
 
-### 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:
 
 ```less
 // Variables
@@ -38,6 +44,16 @@ pieces you require if you want:
 @import '~@sb1/ffe-core/less/accessibility';
 ```
 
+## 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
 
 This package provides a set of less files containing variables for colors and other reusable constants. These files are:
@@ -48,19 +64,29 @@ This package provides a set of less files containing variables for colors and ot
 -   less/motion.less
 -   less/spacing.less
 
-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.
 
 This is how you import them:
 
 ```js
 import {
-    fargeHivt,
+    fargeHvit,
     fargeFjell30,
     breakpointMd,
     spacingXl,
 } from '@sb1/ffe-core';
 ```
+
+## 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.

package/less/waves.less

@@ -23,7 +23,7 @@
         }
 
         @media (min-width: @breakpoint-lg) {
-            min-height: 251px;
+            min-height: 250px;
             mask-position: 1931px;
             mask-size: 2004px;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-core",
-    "version": "27.0.0",
+    "version": "27.0.1",
     "description": "Rammeverk for Felles Front End",
     "license": "MIT",
     "author": "SpareBank 1",
@@ -31,5 +31,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "af7fc1a32630d5717ffbc8f50f339ba697c73130"
+    "gitHead": "1ab898e744977e4cb4db1bee9b65369a0deeef9a"
 }