@sb1/ffe-core 100.12.4 → 101.0.0

package/css/ffe.css

@@ -12,7 +12,7 @@ html,
 :host {
     line-height: 1.15; /* 1 */
     -webkit-text-size-adjust: 100%;
-        -ms-text-size-adjust: 100%;
+       -moz-text-size-adjust: 100%;
             text-size-adjust: 100%; /* 2 */
 }
 
@@ -88,7 +88,8 @@ a {
 abbr[title] {
     border-bottom: none; /* 1 */
     text-decoration: underline; /* 2 */
-    text-decoration: underline dotted; /* 2 */
+    -webkit-text-decoration: underline dotted;
+            text-decoration: underline dotted; /* 2 */
 }
 
 /**
@@ -201,7 +202,8 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
-    appearance: button;
+    -webkit-appearance: button;
+            appearance: button;
 }
 
 /**
@@ -293,7 +295,8 @@ textarea {
  */
 
 [type='search'] {
-    appearance: textfield; /* 1 */
+    -webkit-appearance: textfield;
+            appearance: textfield; /* 1 */
     outline-offset: -2px; /* 2 */
 }
 
@@ -302,7 +305,8 @@ textarea {
  */
 
 [type='search']::-webkit-search-decoration {
-    appearance: none;
+    -webkit-appearance: none;
+            appearance: none;
 }
 
 /**
@@ -311,7 +315,8 @@ textarea {
  */
 
 ::-webkit-file-upload-button {
-    appearance: button; /* 1 */
+    -webkit-appearance: button;
+            appearance: button; /* 1 */
     font: inherit; /* 2 */
 }
 
@@ -1634,7 +1639,6 @@ html,
 }
 .ffe-link-icon {
   color: var(--ffe-color-foreground-interactive-link);
-  display: -ms-inline-flexbox;
   display: inline-flex;
   border-radius: 1.5rem;
   border: 2px solid transparent;
@@ -1821,23 +1825,30 @@ html,
   width: 100%;
 }
 .ffe-wave__wave {
-  mask-repeat: repeat-x;
+  -webkit-mask-repeat: repeat-x;
+          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;
+  -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;
-    mask-position: 812px;
-    mask-size: 950px;
+    -webkit-mask-position: 812px;
+            mask-position: 812px;
+    -webkit-mask-size: 950px;
+            mask-size: 950px;
   }
 }
 @media (min-width: 1024px) {
   .ffe-wave__wave {
     min-height: 250px;
-    mask-position: 1931px;
-    mask-size: 2004px;
+    -webkit-mask-position: 1931px;
+            mask-position: 1931px;
+    -webkit-mask-size: 2004px;
+            mask-size: 2004px;
   }
 }
 .ffe-wave__wave--flip {

package/es/breakpoints.js

@@ -1,4 +1,4 @@
-export var breakpointSm = '480px';
-export var breakpointMd = '768px';
-export var breakpointLg = '1024px';
-export var breakpointXl = '1280px';
+export const breakpointSm = '480px';
+export const breakpointMd = '768px';
+export const breakpointLg = '1024px';
+export const breakpointXl = '1280px';

package/es/colors.js

@@ -1,49 +1,49 @@
-export var fargeFjell = '#002776';
-export var fargeFjell70 = '#4d689f';
-export var fargeFjell30 = '#b3bed6';
-export var fargeVann = '#005aa4';
-export var fargeVann70 = '#4d8cbf';
-export var fargeVann30 = '#b3cee4';
-export var fargeSand = '#f8e9dd';
-export var fargeSand70 = '#faf0e7';
-export var fargeSand30 = '#fdf8f5';
-export var fargeFrost = '#7eb5d2';
-export var fargeFrost70 = '#a5cbe0';
-export var fargeFrost30 = '#d8e9f2';
-export var fargeSyrin = '#d3d3ea';
-export var fargeSyrin70 = '#e0e0f0';
-export var fargeSyrin30 = '#f2f2f9';
-export var fargeMyrull = '#fae4e0';
-export var fargeMyrull70 = '#fcece9';
-export var fargeMyrull30 = '#fef7f6';
-export var fargeVillblomst = '#ee8d9c';
-export var fargeVillblomst70 = '#f3afba';
-export var fargeVillblomst30 = '#fadde1';
-export var fargeNordlys = '#33af85';
-export var fargeNordlys70 = '#70c7aa';
-export var fargeNordlys30 = '#c2e7da';
-export var fargeLyng = '#873953';
-export var fargeLyng70 = '#ab7487';
-export var fargeLyng30 = '#dbc4cb';
-export var fargeBaer = '#db3335';
-export var fargeBaer70 = '#e67072';
-export var fargeBaer30 = '#f4c2c2';
-export var fargeSkog = '#00754e';
-export var fargeSkog70 = '#4d9e83';
-export var fargeSkog30 = '#b3d6ca';
-export var fargeMulte = '#f8b181';
-export var fargeMulte70 = '#fac8a7';
-export var fargeMulte30 = '#fde8d9';
-export var fargeSol = '#dc8000';
-export var fargeSol70 = '#e7a64d';
-export var fargeSol30 = '#f5d9b3';
-export var fargeNatt = '#001032';
-export var fargeSvart = '#020a0a';
-export var fargeKoksgraa = '#323232';
-export var fargeMoerkgraa = '#676767';
-export var fargeGraa = '#adadad';
-export var fargeLysgraa = '#d8d8d8';
-export var fargeMoerkvarmgraa = '#848383';
-export var fargeVarmgraa = '#9b9797';
-export var fargeLysvarmgraa = '#d7d2cb';
-export var fargeHvit = '#fff';
+export const fargeFjell = '#002776';
+export const fargeFjell70 = '#4d689f';
+export const fargeFjell30 = '#b3bed6';
+export const fargeVann = '#005aa4';
+export const fargeVann70 = '#4d8cbf';
+export const fargeVann30 = '#b3cee4';
+export const fargeSand = '#f8e9dd';
+export const fargeSand70 = '#faf0e7';
+export const fargeSand30 = '#fdf8f5';
+export const fargeFrost = '#7eb5d2';
+export const fargeFrost70 = '#a5cbe0';
+export const fargeFrost30 = '#d8e9f2';
+export const fargeSyrin = '#d3d3ea';
+export const fargeSyrin70 = '#e0e0f0';
+export const fargeSyrin30 = '#f2f2f9';
+export const fargeMyrull = '#fae4e0';
+export const fargeMyrull70 = '#fcece9';
+export const fargeMyrull30 = '#fef7f6';
+export const fargeVillblomst = '#ee8d9c';
+export const fargeVillblomst70 = '#f3afba';
+export const fargeVillblomst30 = '#fadde1';
+export const fargeNordlys = '#33af85';
+export const fargeNordlys70 = '#70c7aa';
+export const fargeNordlys30 = '#c2e7da';
+export const fargeLyng = '#873953';
+export const fargeLyng70 = '#ab7487';
+export const fargeLyng30 = '#dbc4cb';
+export const fargeBaer = '#db3335';
+export const fargeBaer70 = '#e67072';
+export const fargeBaer30 = '#f4c2c2';
+export const fargeSkog = '#00754e';
+export const fargeSkog70 = '#4d9e83';
+export const fargeSkog30 = '#b3d6ca';
+export const fargeMulte = '#f8b181';
+export const fargeMulte70 = '#fac8a7';
+export const fargeMulte30 = '#fde8d9';
+export const fargeSol = '#dc8000';
+export const fargeSol70 = '#e7a64d';
+export const fargeSol30 = '#f5d9b3';
+export const fargeNatt = '#001032';
+export const fargeSvart = '#020a0a';
+export const fargeKoksgraa = '#323232';
+export const fargeMoerkgraa = '#676767';
+export const fargeGraa = '#adadad';
+export const fargeLysgraa = '#d8d8d8';
+export const fargeMoerkvarmgraa = '#848383';
+export const fargeVarmgraa = '#9b9797';
+export const fargeLysvarmgraa = '#d7d2cb';
+export const fargeHvit = '#fff';

package/es/dimensions.js

@@ -1,3 +1,3 @@
-export var appWidth = '1280px';
-export var appWidthMin = '320px';
-export var appMargin = '20px';
+export const appWidth = '1280px';
+export const appWidthMin = '320px';
+export const appMargin = '20px';

package/es/motion.js

@@ -1,3 +1,3 @@
-export var easeInOutBack = 'cubic-bezier(0.46, -0.265, 0.48, 1.38)';
-export var ease = 'cubic-bezier(0.25, 0.1, 0.25, 1)';
-export var transitionDuration = '0.2s';
+export const easeInOutBack = 'cubic-bezier(0.46, -0.265, 0.48, 1.38)';
+export const ease = 'cubic-bezier(0.25, 0.1, 0.25, 1)';
+export const transitionDuration = '0.2s';

package/es/spacing.js

@@ -1,11 +1,11 @@
-export var spacing = '8px';
-export var spacing2xs = '4px';
-export var spacingXs = '8px';
-export var spacingSm = '16px';
-export var spacingMd = '24px';
-export var spacingLg = '32px';
-export var spacingXl = '40px';
-export var spacing2xl = '48px';
-export var spacing3xl = '64px';
-export var spacing4xl = '80px';
-export var spacing5xl = '160px';
+export const spacing = '8px';
+export const spacing2xs = '4px';
+export const spacingXs = '8px';
+export const spacingSm = '16px';
+export const spacingMd = '24px';
+export const spacingLg = '32px';
+export const spacingXl = '40px';
+export const spacing2xl = '48px';
+export const spacing3xl = '64px';
+export const spacing4xl = '80px';
+export const spacing5xl = '160px';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-core",
-    "version": "100.12.4",
+    "version": "101.0.0",
     "description": "Rammeverk for Felles Front End",
     "license": "MIT",
     "author": "SpareBank 1",
@@ -37,13 +37,13 @@
         "build-colors": "./scripts/build-colors.cjs"
     },
     "devDependencies": {
-        "@sb1/ffe-buildtool": "^100.12.4",
-        "case": "^1.5.5",
-        "less": "^4.1.2",
-        "postcss": "^8.3.6"
+        "@sb1/ffe-buildtool": "^101.0.0",
+        "case": "^1.6.3",
+        "less": "^4.6.4",
+        "postcss": "^8.5.8"
     },
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "499c82bdc3f2680cf36cfd7cb77c550c623951f7"
+    "gitHead": "7714019dbb9001551cb5d1c262c58afd609d4fb0"
 }

package/scripts/figma-api/color.spec.tsx

@@ -83,16 +83,16 @@ describe('parseColor', () => {
     });
 
     it('handles invalid hex values', () => {
-        expect(() => parseColor('#')).toThrowError('Invalid color format');
-        expect(() => parseColor('#0')).toThrowError('Invalid color format');
-        expect(() => parseColor('#00')).toThrowError('Invalid color format');
-        expect(() => parseColor('#0000000')).toThrowError(
+        expect(() => parseColor('#')).toThrow('Invalid color format');
+        expect(() => parseColor('#0')).toThrow('Invalid color format');
+        expect(() => parseColor('#00')).toThrow('Invalid color format');
+        expect(() => parseColor('#0000000')).toThrow(
             'Invalid color format',
         );
-        expect(() => parseColor('#000000000')).toThrowError(
+        expect(() => parseColor('#000000000')).toThrow(
             'Invalid color format',
         );
-        expect(() => parseColor('#hhh')).toThrowError('Invalid color format');
+        expect(() => parseColor('#hhh')).toThrow('Invalid color format');
     });
 });
 

package/scripts/figma-api/token_import.spec.tsx

@@ -112,7 +112,7 @@ describe('readJsonFiles', () => {
                 'tokens/collection1.mode1.2.json',
                 'tokens/collection1.mode1.3.json',
             ]);
-        }).toThrowError(
+        }).toThrow(
             'Duplicate collection and mode in file: tokens/collection1.mode1.2.json',
         );
     });
@@ -124,7 +124,7 @@ describe('readJsonFiles', () => {
                 'tokens/collection2.mode1.json',
                 'foo.json',
             ]);
-        }).toThrowError(
+        }).toThrow(
             'Invalid tokens file name: foo.json. File names must be in the format: {collectionName}.{modeName}.json',
         );
     });
@@ -141,7 +141,7 @@ describe('readJsonFiles', () => {
     it('handles empty files', () => {
         expect(() => {
             readJsonFiles(['empty_file.mode1.json']);
-        }).toThrowError(
+        }).toThrow(
             'Invalid tokens file: empty_file.mode1.json. File is empty.',
         );
     });
@@ -907,7 +907,7 @@ describe('generatePostVariablesPayload', () => {
 
         expect(() => {
             generatePostVariablesPayload(tokensByFile, localVariablesResponse);
-        }).toThrowError(
+        }).toThrow(
             `Cannot update remote variable "var1" in collection "collection"`,
         );
     });
@@ -1039,7 +1039,7 @@ describe('generatePostVariablesPayload', () => {
 
         expect(() => {
             generatePostVariablesPayload(tokensByFile, localVariablesResponse);
-        }).toThrowError('Invalid token $type: fontWeight');
+        }).toThrow('Invalid token $type: fontWeight');
     });
 
     it('throws on duplicate variable collections in the Figma file', () => {
@@ -1092,6 +1092,6 @@ describe('generatePostVariablesPayload', () => {
 
         expect(() => {
             generatePostVariablesPayload(tokensByFile, localVariablesResponse);
-        }).toThrowError('Duplicate variable collection in file: collection');
+        }).toThrow('Duplicate variable collection in file: collection');
     });
 });

package/scripts/figma-api/token_import.ts

@@ -166,7 +166,7 @@ function variableValueFromToken(
 }
 
 function compareVariableValues(a: VariableValue, b: VariableValue) {
-    if (typeof a === 'object' && typeof b === 'object') {
+    if (a !== null && b !== null && typeof a === 'object' && typeof b === 'object') {
         if (
             'type' in a &&
             'type' in b &&