@sb1/ffe-core 31.0.0 → 31.0.1

package/css/colors.css

@@ -1,4 +1,4 @@
-/* DEPRICATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */
+/* DEPRECATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */
 :root,
 :host {
   --ffe-farge-fjell: #002776;

package/css/ffe.css

@@ -386,7 +386,7 @@ html,
     font: -apple-system-body;
   }
 }
-/* DEPRICATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */
+/* DEPRECATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */
 .ffe-accent-mode {
   --ffe-color-background-default: var(--ffe-color-speciality-background-accent);
   --ffe-color-background-subtle: var(--ffe-color-speciality-background-accent-subtle);
@@ -1133,7 +1133,7 @@ html,
  */
 :root,
 :host {
-  /* DEPRICATED, bruk colors-semantic i stedet for */
+  /* DEPRECATED, bruk colors-semantic i stedet for */
   /** Primærpalett */
   --ffe-farge-fjell: #002776;
   --ffe-farge-fjell-70: #4d689f;
@@ -1186,7 +1186,7 @@ html,
   --ffe-farge-varmgraa: #9b9797;
   --ffe-farge-lysvarmgraa: #d7d2cb;
   --ffe-farge-hvit: #fff;
-  /* END depricated */
+  /* END deprecated */
   /** Font sizes */
   --ffe-fontsize-body-text: 1rem;
   --ffe-fontsize-small-text: 0.875rem;
@@ -1645,3 +1645,79 @@ html,
   --ffe-g-border-width: 1px;
   --ffe-g-border-focus-box-shadow: 0 0 0 1px;
 }
+.ffe-wave {
+  position: relative;
+  width: 100%;
+}
+.ffe-wave__content {
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+}
+.ffe-wave__wave {
+  -webkit-mask-repeat: repeat-x;
+          mask-repeat: repeat-x;
+  min-height: 60px;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 479.9 60' style='enable-background:new 0 0 479.9 148' xml:space='preserve'%3E%3Cpath d='M0 530V0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C387.4 13.8 418.2 0 478.9 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C866.3 13.8 897.1 0 957.8 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1345.2 13.8 1376 0 1436.7 0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1824.1 13.8 1854.9 0 1915.7 0v530'/%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 479.9 60' style='enable-background:new 0 0 479.9 148' xml:space='preserve'%3E%3Cpath d='M0 530V0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C387.4 13.8 418.2 0 478.9 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C866.3 13.8 897.1 0 957.8 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1345.2 13.8 1376 0 1436.7 0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1824.1 13.8 1854.9 0 1915.7 0v530'/%3E%3C/svg%3E");
+  -webkit-mask-size: 480px;
+          mask-size: 480px;
+}
+@media (min-width: 480px) {
+  .ffe-wave__wave {
+    min-height: 119px;
+    -webkit-mask-position: 812px;
+            mask-position: 812px;
+    -webkit-mask-size: 950px;
+            mask-size: 950px;
+  }
+}
+@media (min-width: 1024px) {
+  .ffe-wave__wave {
+    min-height: 250px;
+    -webkit-mask-position: 1931px;
+            mask-position: 1931px;
+    -webkit-mask-size: 2004px;
+            mask-size: 2004px;
+  }
+}
+.ffe-wave__wave--flip {
+  rotate: 180deg;
+}
+.ffe-wave--bg-hvit {
+  background-color: var(--ffe-farge-hvit);
+}
+.ffe-wave--bg-frost-30 {
+  background-color: #d8e9f2;
+}
+.ffe-wave--bg-sand-30 {
+  background-color: #fdf8f5;
+}
+.ffe-wave--bg-sand-70 {
+  background-color: #faf0e7;
+}
+.ffe-wave--bg-syrin-30 {
+  background-color: #f2f2f9;
+}
+.ffe-wave--bg-syrin-70 {
+  background-color: #e0e0f0;
+}
+.ffe-wave--bg-vann {
+  background-color: #005aa4;
+}
+.ffe-wave--bg-vann-30 {
+  background-color: #b3cee4;
+}
+.ffe-wave--bg-fjell {
+  background-color: #002776;
+}
+@media (prefers-color-scheme: dark) {
+  .regard-color-scheme-preference .ffe-wave--dm-bg-svart {
+    background-color: var(--ffe-farge-svart);
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .regard-color-scheme-preference .ffe-wave--dm-bg-natt {
+    background-color: #001032;
+  }
+}

package/es/tsconfig.esm.tsbuildinfo

@@ -1 +1 @@
-{"root":["../gen-src/index.ts"],"version":"5.7.3"}
+{"root":["../gen-src/index.ts"],"version":"5.8.2"}

package/less/colors.less

@@ -2,7 +2,7 @@
 // ======== Ny visuell identitet ========
 //
 
-/* DEPRICATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */
+/* DEPRECATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */
 // Primærpalett
 @ffe-farge-fjell: #002776;
 @ffe-farge-fjell-70: tint(@ffe-farge-fjell, 30%);

package/less/ffe.less

@@ -18,3 +18,4 @@
 @import 'body';
 @import 'accessibility';
 @import 'variables';
+@import 'waves';

package/less/theme.less

@@ -5,7 +5,7 @@
  */
 :root,
 :host {
-    /* DEPRICATED, bruk colors-semantic i stedet for */
+    /* DEPRECATED, bruk colors-semantic i stedet for */
 
     /** Primærpalett */
     --ffe-farge-fjell: @ffe-farge-fjell;
@@ -62,7 +62,7 @@
     --ffe-farge-lysvarmgraa: @ffe-farge-lysvarmgraa;
     --ffe-farge-hvit: @ffe-farge-hvit;
 
-    /* END depricated */
+    /* END deprecated */
 
     /** Font sizes */
     --ffe-fontsize-body-text: 1rem;
@@ -129,16 +129,16 @@
     /** Theme base colors */
 
     /* Links, buttons and similar */
-    --ffe-g-primary-color: var(--ffe-color-fill-primary-default); //Depricated
+    --ffe-g-primary-color: var(--ffe-color-fill-primary-default); //Deprecated
 
     /* Headings, labels, hover, etc */
-    --ffe-g-secondary-color: var(--ffe-color-foreground-emphasis); //Depricated
+    --ffe-g-secondary-color: var(--ffe-color-foreground-emphasis); //Deprecated
 
     /* Error messages, invalid inputs, etc  */
-    --ffe-g-error-color: var(--ffe-color-fill-feedback-critical); //Depricated
+    --ffe-g-error-color: var(--ffe-color-fill-feedback-critical); //Deprecated
 
     /* Form element borders */
-    --ffe-g-border-color: var(--ffe-color-border-primary-default); //Depricated
+    --ffe-g-border-color: var(--ffe-color-border-primary-default); //Deprecated
 
     /* Default font */
     --ffe-g-font: 'SpareBank1-regular', arial, sans-serif;

package/less/waves.less

@@ -0,0 +1,90 @@
+//DEPRECATED: Use ffe-core/less/waves.less instead
+@import (reference) 'breakpoints';
+@import 'colors';
+
+.ffe-wave {
+    position: relative;
+    width: 100%;
+
+    &__content {
+        position: absolute;
+        z-index: 1;
+        width: 100%;
+    }
+
+    &__wave {
+        mask-repeat: repeat-x;
+        min-height: 60px;
+        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 479.9 60' style='enable-background:new 0 0 479.9 148' xml:space='preserve'%3E%3Cpath d='M0 530V0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C387.4 13.8 418.2 0 478.9 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C866.3 13.8 897.1 0 957.8 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1345.2 13.8 1376 0 1436.7 0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1824.1 13.8 1854.9 0 1915.7 0v530'/%3E%3C/svg%3E");
+        mask-size: 480px;
+
+        @media (min-width: @breakpoint-sm) {
+            min-height: 119px;
+            mask-position: 812px;
+            mask-size: 950px;
+        }
+
+        @media (min-width: @breakpoint-lg) {
+            min-height: 250px;
+            mask-position: 1931px;
+            mask-size: 2004px;
+        }
+
+        &--flip {
+            rotate: 180deg;
+        }
+    }
+
+    // Tilgjengelige farger
+    &--bg-hvit {
+        background-color: var(--ffe-farge-hvit);
+    }
+
+    &--bg-frost-30 {
+        background-color: @ffe-farge-frost-30;
+    }
+
+    &--bg-sand-30 {
+        background-color: @ffe-farge-sand-30;
+    }
+
+    &--bg-sand-70 {
+        background-color: @ffe-farge-sand-70;
+    }
+
+    &--bg-syrin-30 {
+        background-color: @ffe-farge-syrin-30;
+    }
+
+    &--bg-syrin-70 {
+        background-color: @ffe-farge-syrin-70;
+    }
+
+    &--bg-vann {
+        background-color: @ffe-farge-vann;
+    }
+
+    &--bg-vann-30 {
+        background-color: @ffe-farge-vann-30;
+    }
+
+    &--bg-fjell {
+        background-color: @ffe-farge-fjell;
+    }
+
+    &--dm-bg-svart {
+        .regard-color-scheme-preference & {
+            @media (prefers-color-scheme: dark) {
+                background-color: var(--ffe-farge-svart);
+            }
+        }
+    }
+
+    &--dm-bg-natt {
+        .regard-color-scheme-preference & {
+            @media (prefers-color-scheme: dark) {
+                background-color: @ffe-farge-natt;
+            }
+        }
+    }
+}

package/lib/tsconfig.cjs.tsbuildinfo

@@ -1 +1 @@
-{"root":["../gen-src/index.ts"],"version":"5.7.3"}
+{"root":["../gen-src/index.ts"],"version":"5.8.2"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-core",
-    "version": "31.0.0",
+    "version": "31.0.1",
     "description": "Rammeverk for Felles Front End",
     "license": "MIT",
     "author": "SpareBank 1",
@@ -35,5 +35,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "e50b473f29109281adeb2f188a0f5391f4db1e9a"
+    "gitHead": "e9e1f82136970a49ad5597ff0ebcbadaaef85b3c"
 }

package/types/tsconfig.types.tsbuildinfo

@@ -1 +1 @@
-{"root":["../gen-src/index.ts"],"version":"5.7.3"}
+{"root":["../gen-src/index.ts"],"version":"5.8.2"}