@sb1/ffe-core 100.0.0 → 100.0.4

package/README.md

@@ -14,9 +14,9 @@ npm install --save-dev less less-plugin-npm-import    # less-plugin is optional,
 
 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/
+- 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 */
@@ -66,11 +66,11 @@ If your project uses the core styling, you're probably good to go. If not, make
 
 This package provides a set of less files containing variables for colors and other reusable constants. These files are:
 
--   less/breakpoints.less
--   less/colors.less
--   less/dimensions.less
--   less/motion.less
--   less/spacing.less
+- less/breakpoints.less
+- less/colors.less
+- less/dimensions.less
+- 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 do not have the `@ffe-` prefix.
 

package/css/ffe.css

@@ -1810,7 +1810,6 @@ html,
 }
 :root,
 :host {
-  /* Form element borders */
   --ffe-g-border-radius-sm: 4px;
   --ffe-g-border-radius: 8px;
   --ffe-g-border-radius-lg: 16px;

package/less/dimensions.less

@@ -1,3 +1,4 @@
+//dimensjoner
 @app-width: 1280px;
 @app-width-min: 320px;
 @app-margin: 20px;

package/less/variables.less

@@ -1,6 +1,5 @@
 :root,
 :host {
-    /* Form element borders */
     --ffe-g-border-radius-sm: 4px;
     --ffe-g-border-radius: 8px;
     --ffe-g-border-radius-lg: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-core",
-    "version": "100.0.0",
+    "version": "100.0.4",
     "description": "Rammeverk for Felles Front End",
     "license": "MIT",
     "author": "SpareBank 1",
@@ -9,7 +9,9 @@
         "lib",
         "es",
         "less",
-        "css"
+        "css",
+        "scripts",
+        "tokens"
     ],
     "main": "lib/index.js",
     "module": "es/index.js",
@@ -35,7 +37,7 @@
         "build-colors": "./scripts/build-colors.cjs"
     },
     "devDependencies": {
-        "@sb1/ffe-buildtool": "^100.0.0",
+        "@sb1/ffe-buildtool": "^100.0.4",
         "case": "^1.5.5",
         "less": "^4.1.2",
         "postcss": "^8.3.6"
@@ -43,5 +45,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "9712f28655bee888c86c90d2e93ac1a67e7989e4"
+    "gitHead": "3671afc1060e06a9f224892510b38fb923a33e06"
 }

package/scripts/build-colors/build-colors.cjs

@@ -0,0 +1,115 @@
+const fs = require('fs');
+const path = require('path');
+const { buildAndroidColors } = require('./mobile/android.cjs');
+const { buildIosColors } = require('./mobile/ios.cjs');
+const { buildWebColors } = require('./web/web.cjs');
+const { buildJSONColors } = require('./json/json.cjs');
+
+const tokensPath = '../../tokens';
+const files = {
+    primitive: '01 Primitive.value.json',
+    semanticLight: '02 Semantic.Light.json',
+    semanticDark: '02 Semantic.Dark.json',
+    context: '03 Context.Default.json',
+    contextAccent: '03 Context.Accent.json',
+};
+
+function filePath(filename) {
+    return path.resolve(__dirname, tokensPath, filename);
+}
+
+function loadColorsFromTokens(fileName, referenceDict) {
+    const colorDict = {};
+    const jsonContent = JSON.parse(
+        fs
+            .readFileSync(filePath(fileName), 'utf8')
+            .replaceAll('-', '.')
+            .toLowerCase(),
+    );
+    const processColorTokens = (obj, prefix = '') => {
+        for (const [key, value] of Object.entries(obj)) {
+            if (value.$type === 'color') {
+                const cssVarName = `${prefix}${key}`;
+                if (!referenceDict) {
+                    colorDict[cssVarName] = value.$value;
+                } else {
+                    const colorValue = referenceDict[value.$value.slice(1, -1)];
+                    if (!colorValue) {
+                        throw new Error(
+                            `In file ${fileName} .Color value (${colorValue}) for ${cssVarName} is missing in the reference dictionary.`,
+                        );
+                    }
+                    colorDict[cssVarName] = colorValue;
+                }
+            } else if (typeof value === 'object') {
+                processColorTokens(value, `${prefix}${key}.`);
+            }
+        }
+    };
+    processColorTokens(jsonContent);
+    return colorDict;
+}
+
+function buildColorDict() {
+    const primitiveColors = loadColorsFromTokens(files.primitive);
+    const semanticLightColors = loadColorsFromTokens(
+        files.semanticLight,
+        primitiveColors,
+    );
+    const semanticDarkColors = loadColorsFromTokens(
+        files.semanticDark,
+        primitiveColors,
+    );
+
+    return {
+        light: loadColorsFromTokens(files.context, semanticLightColors),
+        dark: loadColorsFromTokens(files.context, semanticDarkColors),
+        lightAccent: loadColorsFromTokens(
+            files.contextAccent,
+            semanticLightColors,
+        ),
+        darkAccent: loadColorsFromTokens(
+            files.contextAccent,
+            semanticDarkColors,
+        ),
+    };
+}
+
+function buildColors(platforms, iosPaths, androidPaths, jsonPaths, webPaths) {
+    console.log(platforms, iosPaths, androidPaths);
+    if (!platforms || (!androidPaths && !iosPaths && !jsonPaths && !webPaths)) {
+        console.error('Platform and path arguments are required.');
+        return;
+    }
+    if (
+        !platforms.includes('android') &&
+        !platforms.includes('ios') &&
+        !platforms.includes('json') &&
+        !platforms.includes('web')
+    ) {
+        console.error(
+            "Platform must include 'android', 'ios', 'json, or 'web'.",
+        );
+        return;
+    }
+
+    const colorDict = buildColorDict();
+    if (platforms.includes('android')) {
+        buildAndroidColors(androidPaths, colorDict);
+    }
+    if (platforms.includes('ios')) {
+        buildIosColors(iosPaths, colorDict);
+    }
+    if (platforms.includes('web')) {
+        buildWebColors(webPaths, colorDict);
+    }
+    if (platforms.includes('json')) {
+        buildJSONColors(jsonPaths, colorDict);
+    }
+}
+
+module.exports = {
+    loadColorsFromTokens,
+    buildColorDict,
+    buildColors,
+};

package/scripts/build-colors/json/json.cjs

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+const { writeToFile } = require('../../utils.cjs');
+
+function buildJSONColors(paths, colors) {
+    paths.forEach(path => {
+        writeToFile(path + '/colors-semantic.json')(
+            JSON.stringify(colors, null, 2),
+        );
+    });
+}
+
+module.exports = { buildJSONColors };

package/scripts/build-colors/mobile/android.cjs

@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+const { writeToFile } = require('../../utils.cjs');
+
+const removeHash = value => (value.startsWith('#') ? value.slice(1) : value);
+const cssHexToAndroidHex = str => str.slice(-2) + str.slice(0, -2);
+
+function transformToAndroidHex(value) {
+    value = removeHash(value).toUpperCase();
+    if (value.length === 6) {
+        return `0xFF${value}`;
+    } else if (value.length === 8) {
+        return `0x${cssHexToAndroidHex(value)}`;
+    } else {
+        throw new Error(
+            `Invalid color value: ${value}. Expected 6 or 8 characters (with or without #).`,
+        );
+    }
+}
+
+function transformToAndroidColorName(name) {
+    return name
+        .split('.')
+        .map((part, idx) =>
+            idx === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1),
+        )
+        .join('');
+}
+
+function generateAndroidColorFileContent(colors) {
+    return `
+/* Generated from Figma tokens */
+/* Dokumentasjon på: https://sparebank1.github.io/designsystem/?path=/docs/design-farger-native--docs */
+/* Fargene er bygget fra FFE Core versjon: ${require('../../../package.json').version} */
+
+object Colors {
+
+    object LightDefault {
+        ${Object.entries(colors.light)
+            .map(
+                ([name, value]) =>
+                    `val ${transformToAndroidColorName(
+                        name,
+                    )} = Color(${transformToAndroidHex(value)})`,
+            )
+            .join('\n')}
+    }
+
+    object DarkDefault {
+        ${Object.entries(colors.dark)
+            .map(
+                ([name, value]) =>
+                    `val ${transformToAndroidColorName(
+                        name,
+                    )} = Color(${transformToAndroidHex(value)})`,
+            )
+            .join('\n')}
+    }
+
+    object LightAccent {
+        ${Object.entries(colors.lightAccent)
+            .map(
+                ([name, value]) =>
+                    `val ${transformToAndroidColorName(
+                        name,
+                    )} = Color(${transformToAndroidHex(value)})`,
+            )
+            .join('\n')}
+    }
+
+    object DarkAccent {
+        ${Object.entries(colors.darkAccent)
+            .map(
+                ([name, value]) =>
+                    `\t\tval ${transformToAndroidColorName(
+                        name,
+                    )} = Color(${transformToAndroidHex(value)})`,
+            )
+            .join('\n')}
+    }
+}
+
+
+`;
+}
+
+function buildAndroidColors(paths, colors) {
+    paths.forEach(path => {
+        writeToFile(path + '/Colors.kt')(
+            generateAndroidColorFileContent(colors),
+        );
+    });
+}
+
+module.exports = {
+    buildAndroidColors,
+    generateAndroidColorFileContent,
+    transformToAndroidHex,
+    transformToAndroidColorName,
+};

package/scripts/build-colors/mobile/android.test.js

@@ -0,0 +1,98 @@
+const mockWrite = jest.fn();
+const mockWriteToFile = jest.fn(() => mockWrite);
+
+jest.mock("../../utils.cjs", () => ({
+  writeToFile: mockWriteToFile,
+}));
+
+const android = require("./android.cjs");
+
+describe("android.cjs", () => {
+  describe("transformToAndroidHex", () => {
+    it("should convert #hex to C0xFF... (uppercase)", () => {
+      expect(android.transformToAndroidHex("#123abc")).toBe("C0xFF123ABC");
+      expect(android.transformToAndroidHex("#ABCDEF")).toBe("C0xFFABCDEF");
+    });
+
+    it("should convert 0x hex to uppercase", () => {
+      expect(android.transformToAndroidHex("0xFFAABBCC")).toBe("0XFFAABBCC");
+    });
+
+    it("should throw on invalid format", () => {
+      expect(() => android.transformToAndroidHex("red")).toThrow(
+        "Invalid color format"
+      );
+      expect(() => android.transformToAndroidHex("123456")).toThrow(
+        "Invalid color format"
+      );
+      expect(() => android.transformToAndroidHex("")).toThrow(
+        "Invalid color format"
+      );
+    });
+  });
+
+  describe("transformToAndroidColorName", () => {
+    it("should convert dot notation to camelCase", () => {
+      expect(android.transformToAndroidColorName("primary.color")).toBe(
+        "primaryColor"
+      );
+      expect(android.transformToAndroidColorName("a.b.c")).toBe("aBC");
+      expect(android.transformToAndroidColorName("single")).toBe("single");
+    });
+
+    it("should handle empty string", () => {
+      expect(android.transformToAndroidColorName("")).toBe("");
+    });
+  });
+
+  describe("generateAndroidColorFileContent", () => {
+    it("should generate Kotlin color file content", () => {
+      const colors = {
+        "primary.color": "#123456",
+        "secondary.color": "#abcdef",
+      };
+      const content = android.generateAndroidColorFileContent(colors);
+      expect(content).toContain("val primaryColor = Color(C0xFF123456)");
+      expect(content).toContain("val secondaryColor = Color(C0xFFABCDEF)");
+      expect(content).toContain(
+        "package com.<domain_name>.<app_name>.ui.theme"
+      );
+    });
+
+    it("should throw if color value is invalid", () => {
+      const colors = { "bad.color": "notacolor" };
+      expect(() => android.generateAndroidColorFileContent(colors)).toThrow(
+        "Invalid color format"
+      );
+    });
+  });
+
+  describe("buildAndroidColors", () => {
+    it("should call writeToFile for each color variant", () => {
+      const paths = ["/tmp/test"];
+      const colors = {
+        light: { "a.b": "#111111" },
+        dark: { "a.b": "#222222" },
+        lightAccent: { "a.b": "#333333" },
+        darkAccent: { "a.b": "#444444" },
+      };
+
+      android.buildAndroidColors(paths, colors);
+
+      expect(mockWriteToFile).toHaveBeenCalledTimes(4);
+      expect(mockWriteToFile).toHaveBeenCalledWith(
+        "/tmp/test/ColorsDefaultLight.kt"
+      );
+      expect(mockWriteToFile).toHaveBeenCalledWith(
+        "/tmp/test/ColorsDefaultDark.kt"
+      );
+      expect(mockWriteToFile).toHaveBeenCalledWith(
+        "/tmp/test/ColorsAccentLight.kt"
+      );
+      expect(mockWriteToFile).toHaveBeenCalledWith(
+        "/tmp/test/ColorsAccentDark.kt"
+      );
+      expect(mockWrite).toHaveBeenCalledTimes(4);
+    });
+  });
+});

package/scripts/build-colors/mobile/ios.cjs

@@ -0,0 +1,205 @@
+#!/usr/bin/env node
+const { writeToFile } = require('../../utils.cjs');
+
+function buildContents(paths) {
+    paths.forEach(path => {
+        writeToFile(path + '/SemanticColors.xcassets/Contents.json')(
+            `{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}`,
+        );
+        writeToFile(path + '/SemanticColors.xcassets/README.md')(
+            `# Semantic Colors
+
+Fargene er bygget fra FFE Core versjon: ${require('../../../package.json').version}
+
+Dokumentasjon på: https://sparebank1.github.io/designsystem/?path=/docs/design-farger-native--docs
+`,
+        );
+        writeToFile(path + '/SemanticColors.xcassets/default/Contents.json')(
+            `{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}`,
+        );
+        writeToFile(path + '/SemanticColors.xcassets/accent/Contents.json')(
+            `{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}`,
+        );
+    });
+}
+
+function buildSRGBComponentsFromHex(hex) {
+    // Remove # if present and convert to lowercase
+    const cleanHex = hex.replace('#', '').toLowerCase();
+
+    let r,
+        g,
+        b,
+        a = 255; // Default alpha to 255 (fully opaque)
+
+    if (cleanHex.length === 3) {
+        // RGB format: aaa -> aaaaaa
+        r = parseInt(cleanHex[0] + cleanHex[0], 16);
+        g = parseInt(cleanHex[1] + cleanHex[1], 16);
+        b = parseInt(cleanHex[2] + cleanHex[2], 16);
+    } else if (cleanHex.length === 4) {
+        // RGBA format: aaaf -> aaaaafff
+        r = parseInt(cleanHex[0] + cleanHex[0], 16);
+        g = parseInt(cleanHex[1] + cleanHex[1], 16);
+        b = parseInt(cleanHex[2] + cleanHex[2], 16);
+        a = parseInt(cleanHex[3] + cleanHex[3], 16);
+    } else if (cleanHex.length === 6) {
+        // RRGGBB format: aaaaaa
+        r = parseInt(cleanHex.slice(0, 2), 16);
+        g = parseInt(cleanHex.slice(2, 4), 16);
+        b = parseInt(cleanHex.slice(4, 6), 16);
+    } else if (cleanHex.length === 8) {
+        // RRGGBBAA format: aaaaaaff
+        r = parseInt(cleanHex.slice(0, 2), 16);
+        g = parseInt(cleanHex.slice(2, 4), 16);
+        b = parseInt(cleanHex.slice(4, 6), 16);
+        a = parseInt(cleanHex.slice(6, 8), 16);
+    } else {
+        throw new Error(`Invalid hex color format: ${hex}`);
+    }
+
+    // Convert to 0-1 range and format to 3 decimal places
+    return `{
+        "alpha": "${(a / 255).toFixed(3)}",
+        "blue": "${(b / 255).toFixed(3)}",
+        "green": "${(g / 255).toFixed(3)}",
+        "red": "${(r / 255).toFixed(3)}"
+    }`;
+}
+
+function colorNameToFolderName(name, prefix = '') {
+    const str = prefix ? prefix + '.' : '';
+    const parts = (str + name).split('.').filter(part => part !== 'color'); // Remove 'color' prefix if present
+
+    if (parts.length === 0) return '.colorset';
+
+    // First part: lowercase first letter, rest unchanged
+    const first = parts[0].charAt(0).toLowerCase() + parts[0].slice(1);
+
+    // Remaining parts: uppercase first letter, rest unchanged
+    const rest = parts
+        .slice(1)
+        .map(part => part.charAt(0).toUpperCase() + part.slice(1));
+
+    return [first, ...rest].join('') + '.colorset';
+}
+
+function buildColorFileContents(
+    path,
+    name,
+    light,
+    lightAccent,
+    dark,
+    darkAccent,
+) {
+    writeToFile(
+        path +
+            '/SemanticColors.xcassets/default/' +
+            colorNameToFolderName(name) +
+            '/Contents.json',
+    )(
+        `{
+  "colors" : [
+   {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : ${buildSRGBComponentsFromHex(light)}
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : ${buildSRGBComponentsFromHex(dark)}
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
+`,
+    );
+
+    writeToFile(
+        path +
+            '/SemanticColors.xcassets/accent/' +
+            colorNameToFolderName(name, 'accent') +
+            '/Contents.json',
+    )(
+        `{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : ${buildSRGBComponentsFromHex(lightAccent)}
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : ${buildSRGBComponentsFromHex(darkAccent)}
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
+`,
+    );
+}
+
+function buildColorFiles(paths, colors) {
+    Object.keys(colors.light).forEach(name => {
+        paths.forEach(path => {
+            buildColorFileContents(
+                path,
+                name,
+                colors.light[name],
+                colors.lightAccent[name],
+                colors.dark[name],
+                colors.darkAccent[name],
+            );
+        });
+    });
+}
+
+function buildIosColors(paths, colors) {
+    buildContents(paths);
+    buildColorFiles(paths, colors);
+}
+
+module.exports = { buildIosColors };

package/scripts/build-colors/web/chevron.cjs

@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+const { writeToFile } = require('../../utils.cjs');
+
+function transformToCssProperty(name, value) {
+    return `--ffe-${name.replaceAll('.', '-')}: ${value};`;
+}
+
+function generateChevronCssColorFileContent(colors) {
+    return `
+/* Generated from Figma tokens */
+
+
+
+// Chevron colors to make it work with semantic colors
+@ffe-color-chevron-light-default: ${Object.entries(colors.light)
+        .filter(([name]) => name === 'color.foreground.default')
+        .map(([_, value]) => value)[0]
+        .substring(1)};
+@ffe-color-chevron-dark-default: ${Object.entries(colors.lightAccent)
+        .filter(([name]) => name === 'color.foreground.default')
+        .map(([_, value]) => value)[0]
+        .substring(1)};
+@ffe-color-chevron-light-accent: ${Object.entries(colors.dark)
+        .filter(([name]) => name === 'color.foreground.default')
+        .map(([_, value]) => value)[0]
+        .substring(1)};
+@ffe-color-chevron-dark-accent: ${Object.entries(colors.darkAccent)
+        .filter(([name]) => name === 'color.foreground.default')
+        .map(([_, value]) => value)[0]
+        .substring(1)};
+
+
+
+`;
+}
+
+function buildChevronCssColors(paths, colors) {
+    paths.forEach(path => {
+        const content = generateChevronCssColorFileContent(colors);
+        writeToFile(path + 'less/colors-semantic-chevron.less')(content);
+    });
+}
+
+module.exports = { buildChevronCssColors };

package/scripts/build-colors/web/color-names.cjs

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+const { writeToFile } = require('../../utils.cjs');
+
+function transformToCssProperty(name) {
+    return `--ffe-${name.replaceAll('.', '-')}`;
+}
+
+function generateColorNamesFileContent(colors) {
+    const colorNames = {
+        colors: Object.entries(colors.light).map(([name]) =>
+            transformToCssProperty(name),
+        ),
+    };
+    return JSON.stringify(colorNames, null, 2);
+}
+
+function buildColorsNames(paths, colors) {
+    paths.forEach(path => {
+        const content = generateColorNamesFileContent(colors);
+        writeToFile(path + 'gen-src/semantic-color-names.json')(content);
+    });
+}
+
+module.exports = { buildColorsNames };