@sb1/ffe-core 26.1.2 → 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/css/colors.css

@@ -57,7 +57,6 @@
   --ffe-farge-villblomst-70: #f3afba;
   --ffe-farge-villblomst-30: #fadde1;
   --ffe-farge-nordlys: #33af85;
-  --ffe-farge-nordlys-wcag: #247a5d;
   --ffe-farge-nordlys-70: #70c7aa;
   --ffe-farge-nordlys-30: #c2e7da;
   --ffe-farge-lyng: #873953;
@@ -66,9 +65,9 @@
   --ffe-farge-baer: #e44244;
   --ffe-farge-baer-70: #ec7b7c;
   --ffe-farge-baer-30: #f7c6c7;
-  --ffe-farge-skog: #285949;
-  --ffe-farge-skog-70: #698b80;
-  --ffe-farge-skog-30: #bfcdc8;
+  --ffe-farge-skog: #00754e;
+  --ffe-farge-skog-70: #4d9e83;
+  --ffe-farge-skog-30: #b3d6ca;
   --ffe-farge-multe: #f8b181;
   --ffe-farge-multe-70: #fac8a7;
   --ffe-farge-multe-30: #fde8d9;

package/less/colors.less

@@ -85,7 +85,6 @@
 @ffe-farge-villblomst-70: tint(@ffe-farge-villblomst, 30%);
 @ffe-farge-villblomst-30: tint(@ffe-farge-villblomst, 70%);
 @ffe-farge-nordlys: #33af85;
-@ffe-farge-nordlys-wcag: #247a5d;
 @ffe-farge-nordlys-70: tint(@ffe-farge-nordlys, 30%);
 @ffe-farge-nordlys-30: tint(@ffe-farge-nordlys, 70%);
 @ffe-farge-lyng: #873953;
@@ -94,7 +93,7 @@
 @ffe-farge-baer: #e44244;
 @ffe-farge-baer-70: tint(@ffe-farge-baer, 30%);
 @ffe-farge-baer-30: tint(@ffe-farge-baer, 70%);
-@ffe-farge-skog: #285949;
+@ffe-farge-skog: #00754e;
 @ffe-farge-skog-70: tint(@ffe-farge-skog, 30%);
 @ffe-farge-skog-30: tint(@ffe-farge-skog, 70%);
 @ffe-farge-multe: #f8b181;

package/less/theme.less

@@ -28,7 +28,6 @@
     --ffe-farge-villblomst-70: @ffe-farge-villblomst-70;
     --ffe-farge-villblomst-30: @ffe-farge-villblomst-30;
     --ffe-farge-nordlys: @ffe-farge-nordlys;
-    --ffe-farge-nordlys-wcag: @ffe-farge-nordlys-wcag;
     --ffe-farge-nordlys-70: @ffe-farge-nordlys-70;
     --ffe-farge-nordlys-30: @ffe-farge-nordlys-30;
     --ffe-farge-lyng: @ffe-farge-lyng;

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/lib/colors.d.ts

@@ -56,7 +56,6 @@ export declare const fargeVillblomst = "#ee8d9c";
 export declare const fargeVillblomst70 = "#f3afba";
 export declare const fargeVillblomst30 = "#fadde1";
 export declare const fargeNordlys = "#33af85";
-export declare const fargeNordlysWcag = "#247a5d";
 export declare const fargeNordlys70 = "#70c7aa";
 export declare const fargeNordlys30 = "#c2e7da";
 export declare const fargeLyng = "#873953";
@@ -65,9 +64,9 @@ export declare const fargeLyng30 = "#dbc4cb";
 export declare const fargeBaer = "#e44244";
 export declare const fargeBaer70 = "#ec7b7c";
 export declare const fargeBaer30 = "#f7c6c7";
-export declare const fargeSkog = "#285949";
-export declare const fargeSkog70 = "#698b80";
-export declare const fargeSkog30 = "#bfcdc8";
+export declare const fargeSkog = "#00754e";
+export declare const fargeSkog70 = "#4d9e83";
+export declare const fargeSkog30 = "#b3d6ca";
 export declare const fargeMulte = "#f8b181";
 export declare const fargeMulte70 = "#fac8a7";
 export declare const fargeMulte30 = "#fde8d9";

package/lib/colors.js

@@ -1,7 +1,7 @@
 "use strict";
 exports.__esModule = true;
 exports.fargeSyrin70 = exports.fargeSyrin = exports.fargeFrost30 = exports.fargeFrost70 = exports.fargeFrost = exports.fargeSand30 = exports.fargeSand70 = exports.fargeSand = exports.fargeVann30 = exports.fargeVann70 = exports.fargeVann = exports.fargeFjell30 = exports.fargeFjell70 = exports.fargeFjell = exports.redDarkmode = exports.blueAzureDarkmode = exports.greyCloudDarkmode = exports.greySilverDarkmode = exports.greyDarkmode = exports.greyCharcoalDarkmode = exports.whiteDarkmode = exports.blackDarkmode = exports.sandIvory = exports.blueDeepSky = exports.black = exports.greyWarm = exports.greyCharcoal = exports.greySilver = exports.greyCloud = exports.grey = exports.white = exports.sand = exports.purpleViolet = exports.purpleMagenta = exports.purple = exports.red = exports.orangeSalmon = exports.orangeFire = exports.orange = exports.greenMint = exports.greenEmerald = exports.greenShamrock = exports.green = exports.blueFocus = exports.blueIce = exports.bluePale = exports.blueSky = exports.blueAzure = exports.blueCobalt = exports.blueRoyal = void 0;
-exports.fargeHvit = exports.fargeLysvarmgraa = exports.fargeVarmgraa = exports.fargeMoerkvarmgraa = exports.fargeLysgraa = exports.fargeGraa = exports.fargeMoerkgraa = exports.fargeKoksgraa = exports.fargeSvart = exports.fargeNatt = exports.fargeSol30 = exports.fargeSol70 = exports.fargeSol = exports.fargeMulte30 = exports.fargeMulte70 = exports.fargeMulte = exports.fargeSkog30 = exports.fargeSkog70 = exports.fargeSkog = exports.fargeBaer30 = exports.fargeBaer70 = exports.fargeBaer = exports.fargeLyng30 = exports.fargeLyng70 = exports.fargeLyng = exports.fargeNordlys30 = exports.fargeNordlys70 = exports.fargeNordlysWcag = exports.fargeNordlys = exports.fargeVillblomst30 = exports.fargeVillblomst70 = exports.fargeVillblomst = exports.fargeMyrull30 = exports.fargeMyrull70 = exports.fargeMyrull = exports.fargeSyrin30 = void 0;
+exports.fargeHvit = exports.fargeLysvarmgraa = exports.fargeVarmgraa = exports.fargeMoerkvarmgraa = exports.fargeLysgraa = exports.fargeGraa = exports.fargeMoerkgraa = exports.fargeKoksgraa = exports.fargeSvart = exports.fargeNatt = exports.fargeSol30 = exports.fargeSol70 = exports.fargeSol = exports.fargeMulte30 = exports.fargeMulte70 = exports.fargeMulte = exports.fargeSkog30 = exports.fargeSkog70 = exports.fargeSkog = exports.fargeBaer30 = exports.fargeBaer70 = exports.fargeBaer = exports.fargeLyng30 = exports.fargeLyng70 = exports.fargeLyng = exports.fargeNordlys30 = exports.fargeNordlys70 = exports.fargeNordlys = exports.fargeVillblomst30 = exports.fargeVillblomst70 = exports.fargeVillblomst = exports.fargeMyrull30 = exports.fargeMyrull70 = exports.fargeMyrull = exports.fargeSyrin30 = void 0;
 exports.blueRoyal = '#002776';
 exports.blueCobalt = '#005aa4';
 exports.blueAzure = '#0071cd';
@@ -60,7 +60,6 @@ exports.fargeVillblomst = '#ee8d9c';
 exports.fargeVillblomst70 = '#f3afba';
 exports.fargeVillblomst30 = '#fadde1';
 exports.fargeNordlys = '#33af85';
-exports.fargeNordlysWcag = '#247a5d';
 exports.fargeNordlys70 = '#70c7aa';
 exports.fargeNordlys30 = '#c2e7da';
 exports.fargeLyng = '#873953';
@@ -69,9 +68,9 @@ exports.fargeLyng30 = '#dbc4cb';
 exports.fargeBaer = '#e44244';
 exports.fargeBaer70 = '#ec7b7c';
 exports.fargeBaer30 = '#f7c6c7';
-exports.fargeSkog = '#285949';
-exports.fargeSkog70 = '#698b80';
-exports.fargeSkog30 = '#bfcdc8';
+exports.fargeSkog = '#00754e';
+exports.fargeSkog70 = '#4d9e83';
+exports.fargeSkog30 = '#b3d6ca';
 exports.fargeMulte = '#f8b181';
 exports.fargeMulte70 = '#fac8a7';
 exports.fargeMulte30 = '#fde8d9';

package/package.json

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