@sb1/ffe-core 21.1.1 → 23.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/css/colors.css +0 -1
  2. package/less/colors.less +0 -1
  3. package/less/ffe.less +1 -0
  4. package/less/typography.less +1 -1
  5. package/less/waves.less +114 -0
  6. package/lib/colors.d.ts +0 -1
  7. package/lib/colors.js +1 -2
  8. package/package.json +2 -2
package/css/colors.css CHANGED
@@ -64,7 +64,6 @@
64
64
  --ffe-farge-lyng-70: #ab7487;
65
65
  --ffe-farge-lyng-30: #dbc4cb;
66
66
  --ffe-farge-baer: #e44244;
67
- --ffe-farge-baer-wcag: #e12d2f;
68
67
  --ffe-farge-baer-70: #ec7b7c;
69
68
  --ffe-farge-baer-30: #f7c6c7;
70
69
  --ffe-farge-skog: #285949;
package/less/colors.less CHANGED
@@ -92,7 +92,6 @@
92
92
  @ffe-farge-lyng-70: tint(@ffe-farge-lyng, 30%);
93
93
  @ffe-farge-lyng-30: tint(@ffe-farge-lyng, 70%);
94
94
  @ffe-farge-baer: #e44244;
95
- @ffe-farge-baer-wcag: #e12d2f;
96
95
  @ffe-farge-baer-70: tint(@ffe-farge-baer, 30%);
97
96
  @ffe-farge-baer-30: tint(@ffe-farge-baer, 70%);
98
97
  @ffe-farge-skog: #285949;
package/less/ffe.less CHANGED
@@ -8,3 +8,4 @@
8
8
  @import 'motion';
9
9
  @import 'accessibility';
10
10
  @import 'themes';
11
+ @import 'waves';
package/less/typography.less CHANGED
@@ -214,7 +214,7 @@
214
214
  }
215
215
 
216
216
  &--error {
217
- color: @ffe-farge-baer-wcag;
217
+ color: @ffe-farge-baer;
218
218
  .native & {
219
219
  @media (prefers-color-scheme: dark) {
220
220
  color: @ffe-farge-baer;
package/less/waves.less ADDED
@@ -0,0 +1,114 @@
1
+ @import 'colors';
2
+
3
+ .ffe-wave {
4
+ position: relative;
5
+
6
+ &__content {
7
+ position: absolute;
8
+ z-index: 1;
9
+ }
10
+
11
+ &__wave {
12
+ min-height: 130px;
13
+ mask-repeat: repeat-x;
14
+ mask-size: 469px;
15
+ mask-position: 431px;
16
+ }
17
+
18
+ &--flip &__wave {
19
+ rotate: 180deg;
20
+ }
21
+
22
+ &--small &__wave {
23
+ min-height: 60px;
24
+ 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");
25
+ mask-size: 469px;
26
+
27
+ @media (min-width: @breakpoint-sm) {
28
+ min-height: 113px;
29
+ mask-size: 870px;
30
+ mask-position: 774px;
31
+ }
32
+
33
+ @media (min-width: @breakpoint-md) {
34
+ min-height: 121px;
35
+ mask-size: 957;
36
+ mask-position: 877px;
37
+ }
38
+ }
39
+
40
+ &--medium &__wave {
41
+ min-height: 95px;
42
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 0 482.8 95' style='enable-background:new 0 0 482.8 148' xml:space='preserve'%3E%3Cpath d='M0 595V0c61.3 0 92.3 21.7 122.4 42.7 30.4 21.2 59.1 41.2 118.1 41.2 59 0 87.7-20.1 118.1-41.2C388.6 21.7 419.7 0 481 0s92.3 21.7 122.4 42.7c30.4 21.2 59.1 41.2 118.1 41.2 58.9 0 87.7-20.1 118.1-41.2 29.9-21 61-42.7 122.2-42.7 61.3 0 92.3 21.7 122.4 42.7 30.4 21.2 59.1 41.2 118.1 41.2 58.9 0 87.7-20.1 118.1-41.2 30-20.9 61.1-42.7 122.4-42.7 61.3 0 92.3 21.7 122.4 42.7 30.4 21.2 59.1 41.2 118.1 41.2s87.7-20.1 118.1-41.2C1831.6 21.7 1862.7 0 1924 0v595'/%3E%3C/svg%3E");
43
+
44
+ @media (min-width: @breakpoint-sm) {
45
+ min-height: 148px;
46
+ mask-size: 740px;
47
+ mask-position: 774px;
48
+ }
49
+ }
50
+
51
+ &--large &__wave {
52
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480.8 112' style='enable-background:new 0 0 480.8 148' xml:space='preserve'%3E%3Cpath d='M0 537V0c61.4 0 92.5 27.8 122.5 54.6 30.2 27 58.8 52.6 117.1 52.6 58.4 0 86.9-25.5 117.1-52.6C386.8 27.8 417.8 0 479.3 0c61.4 0 92.5 27.8 122.5 54.6 30.2 27 58.8 52.6 117.1 52.6 58.4 0 86.9-25.5 117.1-52.6C866.1 27.8 897.1 0 958.6 0c61.4 0 92.5 27.8 122.5 54.6 30.2 27 58.8 52.6 117.1 52.6 58.4 0 86.9-25.5 117.1-52.6 30-26.9 61.1-54.6 122.5-54.6s92.5 27.8 122.5 54.6c30.2 27 58.8 52.6 117.1 52.6 58.4 0 86.9-25.5 117.1-52.6C1824.5 27.7 1855.6 0 1917 0v537'/%3E%3C/svg%3E");
53
+ min-height: 112px;
54
+
55
+ @media (min-width: @breakpoint-sm) {
56
+ min-height: 150px;
57
+ mask-size: 651px;
58
+ mask-position: 616px;
59
+ }
60
+ }
61
+
62
+ // Tilgjengelige farger
63
+ &--bg-hvit &__wave {
64
+ background-color: @ffe-farge-hvit;
65
+ }
66
+
67
+ &--bg-frost-30 &__wave {
68
+ background-color: @ffe-farge-frost-30;
69
+ }
70
+
71
+ &--bg-sand-30 &__wave {
72
+ background-color: @ffe-farge-sand-30;
73
+ }
74
+
75
+ &--bg-sand-70 &__wave {
76
+ background-color: @ffe-farge-sand-70;
77
+ }
78
+
79
+ &--bg-syrin-30 &__wave {
80
+ background-color: @ffe-farge-syrin-30;
81
+ }
82
+
83
+ &--bg-syrin-70 &__wave {
84
+ background-color: @ffe-farge-syrin-70;
85
+ }
86
+
87
+ &--bg-vann &__wave {
88
+ background-color: @ffe-farge-vann;
89
+ }
90
+
91
+ &--bg-vann-30 &__wave {
92
+ background-color: @ffe-farge-vann-30;
93
+ }
94
+
95
+ .ffe-wave--bg-fjell &__wave {
96
+ background-color: @ffe-farge-fjell;
97
+ }
98
+
99
+ .ffe-wave--dm-bg-svart &__wave {
100
+ .native & {
101
+ @media (prefers-color-scheme: dark) {
102
+ background-color: @ffe-farge-svart;
103
+ }
104
+ }
105
+ }
106
+
107
+ .ffe-wave--dm-bg-natt &__wave {
108
+ .native & {
109
+ @media (prefers-color-scheme: dark) {
110
+ background-color: @ffe-farge-natt;
111
+ }
112
+ }
113
+ }
114
+ }
package/lib/colors.d.ts CHANGED
@@ -63,7 +63,6 @@ export declare const fargeLyng = "#873953";
63
63
  export declare const fargeLyng70 = "#ab7487";
64
64
  export declare const fargeLyng30 = "#dbc4cb";
65
65
  export declare const fargeBaer = "#e44244";
66
- export declare const fargeBaerWcag = "#e12d2f";
67
66
  export declare const fargeBaer70 = "#ec7b7c";
68
67
  export declare const fargeBaer30 = "#f7c6c7";
69
68
  export declare const fargeSkog = "#285949";
package/lib/colors.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  exports.__esModule = true;
3
3
  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;
4
- exports.fargeHvit = exports.fargeLysvarmgraa = exports.fargeVarmgraa = exports.fargeMoerkvarmgraa = exports.fargeLysgraa = exports.fargeGraaWcag = 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.fargeBaerWcag = 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;
4
+ exports.fargeHvit = exports.fargeLysvarmgraa = exports.fargeVarmgraa = exports.fargeMoerkvarmgraa = exports.fargeLysgraa = exports.fargeGraaWcag = 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;
5
5
  exports.blueRoyal = '#002776';
6
6
  exports.blueCobalt = '#005aa4';
7
7
  exports.blueAzure = '#0071cd';
@@ -67,7 +67,6 @@ exports.fargeLyng = '#873953';
67
67
  exports.fargeLyng70 = '#ab7487';
68
68
  exports.fargeLyng30 = '#dbc4cb';
69
69
  exports.fargeBaer = '#e44244';
70
- exports.fargeBaerWcag = '#e12d2f';
71
70
  exports.fargeBaer70 = '#ec7b7c';
72
71
  exports.fargeBaer30 = '#f7c6c7';
73
72
  exports.fargeSkog = '#285949';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-core",
3
- "version": "21.1.1",
3
+ "version": "23.0.0",
4
4
  "description": "Rammeverk for Felles Front End",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -31,5 +31,5 @@
31
31
  "publishConfig": {
32
32
  "access": "public"
33
33
  },
34
- "gitHead": "ff9180a2e5eba7dda222a01fce5c1ebbab25d2c9"
34
+ "gitHead": "cce0149ec999aacfb7f4fb821ff8cadf3d945a99"
35
35
  }