@sb1/ffe-core 33.2.0 → 100.0.3

package/lib/semanticColorsTailwind.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 
-exports['background-default'] = exports['background-subtle'] = exports['surface-primary-default'] = exports['surface-primary-default-hover'] = exports['surface-primary-default-pressed'] = exports['surface-secondary-default'] = exports['surface-secondary-default-hover'] = exports['surface-secondary-default-pressed'] = exports['surface-tertiary-default'] = exports['surface-tertiary-default-hover'] = exports['surface-tertiary-default-pressed'] = exports['surface-neutral-default'] = exports['surface-neutral-default-hover'] = exports['surface-neutral-default-pressed'] = exports['surface-feedback-info'] = exports['surface-feedback-success'] = exports['surface-feedback-warning'] = exports['surface-feedback-critical'] = exports['surface-feedback-tip'] = exports['fill-primary-default'] = exports['fill-primary-default-hover'] = exports['fill-primary-default-pressed'] = exports['fill-primary-selected-default'] = exports['fill-primary-selected-hover'] = exports['fill-primary-selected-pressed'] = exports['fill-primary-subtle'] = exports['fill-primary-subtle-hover'] = exports['fill-primary-subtle-pressed'] = exports['fill-primary-invisible'] = exports['fill-secondary-default'] = exports['fill-secondary-default-hover'] = exports['fill-secondary-default-pressed'] = exports['fill-secondary-subtle'] = exports['fill-secondary-subtle-hover'] = exports['fill-secondary-subtle-pressed'] = exports['fill-tertiary-default'] = exports['fill-tertiary-default-hover'] = exports['fill-tertiary-default-pressed'] = exports['fill-tertiary-subtle'] = exports['fill-tertiary-subtle-hover'] = exports['fill-tertiary-subtle-pressed'] = exports['fill-neutral-default'] = exports['fill-neutral-default-hover'] = exports['fill-neutral-default-pressed'] = exports['fill-neutral-subtle'] = exports['fill-neutral-subtle-hover'] = exports['fill-neutral-subtle-pressed'] = exports['fill-neutral-extra-subtle'] = exports['fill-neutral-extra-subtle-hover'] = exports['fill-neutral-extra-subtle-pressed'] = exports['fill-feedback-info'] = exports['fill-feedback-info-subtle'] = exports['fill-feedback-success'] = exports['fill-feedback-success-subtle'] = exports['fill-feedback-warning'] = exports['fill-feedback-warning-subtle'] = exports['fill-feedback-critical'] = exports['fill-feedback-critical-subtle'] = exports['fill-feedback-tip'] = exports['fill-feedback-tip-subtle'] = exports['foreground-default'] = exports['foreground-subtle'] = exports['foreground-emphasis'] = exports['foreground-inverse'] = exports['foreground-interactive-link'] = exports['foreground-interactive-link-hover'] = exports['foreground-interactive-link-pressed'] = exports['foreground-interactive-link-active'] = exports['foreground-feedback-info'] = exports['foreground-feedback-success'] = exports['foreground-feedback-warning'] = exports['foreground-feedback-critical'] = exports['foreground-feedback-tip'] = exports['component-form-input-foreground-default'] = exports['component-form-input-foreground-subtle'] = exports['component-form-input-foreground-placeholder'] = exports['component-form-input-foreground-disabled'] = exports['component-form-input-foreground-read-only'] = exports['component-form-input-foreground-error'] = exports['component-form-input-border-active'] = exports['component-form-input-fill-default'] = exports['component-form-input-fill-default-hover'] = exports['component-form-input-fill-default-pressed'] = exports['component-form-input-fill-disabled'] = exports['component-form-input-fill-read-only'] = exports['component-form-input-fill-error'] = exports['component-form-toggleswitch-handle-default'] = exports['component-form-toggleswitch-fill-default'] = exports['component-form-toggleswitch-fill-default-hover'] = exports['component-form-toggleswitch-fill-default-pressed'] = exports['component-form-toggleswitch-fill-selected'] = exports['component-form-toggleswitch-fill-selected-hover'] = exports['component-form-toggleswitch-fill-selected-pressed'] = exports['component-form-toggleswitch-fill-critical'] = exports['component-button-action-border-default'] = exports['component-button-action-border-hover'] = exports['component-button-action-border-pressed'] = exports['component-button-action-fill-default'] = exports['component-button-action-fill-hover'] = exports['component-button-action-fill-pressed'] = exports['component-button-action-foreground-default'] = exports['component-button-action-foreground-hover'] = exports['component-button-primary-border-default'] = exports['component-button-primary-border-hover'] = exports['component-button-primary-border-pressed'] = exports['component-button-primary-fill-default'] = exports['component-button-primary-fill-hover'] = exports['component-button-primary-fill-pressed'] = exports['component-button-primary-foreground-default'] = exports['component-button-primary-foreground-hover'] = exports['component-button-secondary-border-default'] = exports['component-button-secondary-border-hover'] = exports['component-button-secondary-border-pressed'] = exports['component-button-secondary-fill-default'] = exports['component-button-secondary-fill-hover'] = exports['component-button-secondary-fill-pressed'] = exports['component-button-secondary-foreground-default'] = exports['component-button-secondary-foreground-hover'] = exports['component-button-tertiary-fill-default'] = exports['component-button-tertiary-fill-hover'] = exports['component-button-tertiary-fill-pressed'] = exports['component-button-tertiary-foreground-default'] = exports['component-button-tertiary-foreground-hover'] = exports['component-logo-name'] = exports['component-logo-number1'] = exports['component-logo-circle-dark-red'] = exports['component-logo-circle-light-red'] = exports['border-primary-default'] = exports['border-primary-default-hover'] = exports['border-primary-default-pressed'] = exports['border-primary-subtle'] = exports['border-primary-subtle-hover'] = exports['border-primary-subtle-pressed'] = exports['border-primary-emphasis'] = exports['border-feedback-info'] = exports['border-feedback-success'] = exports['border-feedback-warning'] = exports['border-feedback-critical'] = exports['border-feedback-tip'] = exports['border-interactive-focus'] = exports['border-interactive-selected'] =   void 0
+exports['background-default'] = exports['background-subtle'] = exports['surface-primary-default'] = exports['surface-primary-default-hover'] = exports['surface-primary-default-pressed'] = exports['surface-secondary-default'] = exports['surface-secondary-default-hover'] = exports['surface-secondary-default-pressed'] = exports['surface-tertiary-default'] = exports['surface-tertiary-default-hover'] = exports['surface-tertiary-default-pressed'] = exports['surface-neutral-default'] = exports['surface-neutral-default-hover'] = exports['surface-neutral-default-pressed'] = exports['surface-feedback-info'] = exports['surface-feedback-success'] = exports['surface-feedback-warning'] = exports['surface-feedback-critical'] = exports['surface-feedback-tip'] = exports['fill-primary-default'] = exports['fill-primary-default-hover'] = exports['fill-primary-default-pressed'] = exports['fill-primary-selected-default'] = exports['fill-primary-selected-hover'] = exports['fill-primary-selected-pressed'] = exports['fill-primary-subtle'] = exports['fill-primary-subtle-hover'] = exports['fill-primary-subtle-pressed'] = exports['fill-primary-invisible'] = exports['fill-secondary-default'] = exports['fill-secondary-default-hover'] = exports['fill-secondary-default-pressed'] = exports['fill-secondary-subtle'] = exports['fill-secondary-subtle-hover'] = exports['fill-secondary-subtle-pressed'] = exports['fill-tertiary-default'] = exports['fill-tertiary-default-hover'] = exports['fill-tertiary-default-pressed'] = exports['fill-tertiary-subtle'] = exports['fill-tertiary-subtle-hover'] = exports['fill-tertiary-subtle-pressed'] = exports['fill-neutral-default'] = exports['fill-neutral-default-hover'] = exports['fill-neutral-default-pressed'] = exports['fill-neutral-subtle'] = exports['fill-neutral-subtle-hover'] = exports['fill-neutral-subtle-pressed'] = exports['fill-neutral-extra-subtle'] = exports['fill-neutral-extra-subtle-hover'] = exports['fill-neutral-extra-subtle-pressed'] = exports['fill-feedback-info'] = exports['fill-feedback-info-subtle'] = exports['fill-feedback-success'] = exports['fill-feedback-success-subtle'] = exports['fill-feedback-warning'] = exports['fill-feedback-warning-subtle'] = exports['fill-feedback-critical'] = exports['fill-feedback-critical-subtle'] = exports['fill-feedback-tip'] = exports['fill-feedback-tip-subtle'] = exports['foreground-default'] = exports['foreground-subtle'] = exports['foreground-emphasis'] = exports['foreground-inverse'] = exports['foreground-interactive-link'] = exports['foreground-interactive-link-hover'] = exports['foreground-interactive-link-pressed'] = exports['foreground-interactive-link-active'] = exports['foreground-interactive-disabled'] = exports['foreground-feedback-info'] = exports['foreground-feedback-success'] = exports['foreground-feedback-warning'] = exports['foreground-feedback-critical'] = exports['foreground-feedback-tip'] = exports['component-form-input-foreground-default'] = exports['component-form-input-foreground-subtle'] = exports['component-form-input-foreground-placeholder'] = exports['component-form-input-foreground-disabled'] = exports['component-form-input-foreground-read-only'] = exports['component-form-input-foreground-error'] = exports['component-form-input-border-active'] = exports['component-form-input-fill-default'] = exports['component-form-input-fill-default-hover'] = exports['component-form-input-fill-default-pressed'] = exports['component-form-input-fill-disabled'] = exports['component-form-input-fill-read-only'] = exports['component-form-input-fill-error'] = exports['component-form-toggleswitch-handle-default'] = exports['component-form-toggleswitch-handle-disabled'] = exports['component-form-toggleswitch-fill-default'] = exports['component-form-toggleswitch-fill-default-hover'] = exports['component-form-toggleswitch-fill-default-pressed'] = exports['component-form-toggleswitch-fill-selected'] = exports['component-form-toggleswitch-fill-selected-hover'] = exports['component-form-toggleswitch-fill-selected-pressed'] = exports['component-form-toggleswitch-fill-selected-disabled'] = exports['component-form-toggleswitch-fill-selected-read-only'] = exports['component-form-toggleswitch-fill-critical'] = exports['component-form-toggleswitch-fill-disabled'] = exports['component-form-toggleswitch-fill-read-only'] = exports['component-button-action-border-default'] = exports['component-button-action-border-hover'] = exports['component-button-action-border-pressed'] = exports['component-button-action-fill-default'] = exports['component-button-action-fill-hover'] = exports['component-button-action-fill-pressed'] = exports['component-button-action-foreground-default'] = exports['component-button-action-foreground-hover'] = exports['component-button-primary-border-default'] = exports['component-button-primary-border-hover'] = exports['component-button-primary-border-pressed'] = exports['component-button-primary-fill-default'] = exports['component-button-primary-fill-hover'] = exports['component-button-primary-fill-pressed'] = exports['component-button-primary-foreground-default'] = exports['component-button-primary-foreground-hover'] = exports['component-button-secondary-border-default'] = exports['component-button-secondary-border-hover'] = exports['component-button-secondary-border-pressed'] = exports['component-button-secondary-fill-default'] = exports['component-button-secondary-fill-hover'] = exports['component-button-secondary-fill-pressed'] = exports['component-button-secondary-foreground-default'] = exports['component-button-secondary-foreground-hover'] = exports['component-button-tertiary-fill-default'] = exports['component-button-tertiary-fill-hover'] = exports['component-button-tertiary-fill-pressed'] = exports['component-button-tertiary-foreground-default'] = exports['component-button-tertiary-foreground-hover'] = exports['component-logo-name'] = exports['component-logo-number1'] = exports['component-logo-circle-dark-red'] = exports['component-logo-circle-light-red'] = exports['border-primary-default'] = exports['border-primary-default-hover'] = exports['border-primary-default-pressed'] = exports['border-primary-subtle'] = exports['border-primary-subtle-hover'] = exports['border-primary-subtle-pressed'] = exports['border-primary-emphasis'] = exports['border-feedback-info'] = exports['border-feedback-success'] = exports['border-feedback-warning'] = exports['border-feedback-critical'] = exports['border-feedback-tip'] = exports['border-interactive-focus'] = exports['border-interactive-selected'] =   void 0
 
 exports['background-default'] = 'var(--ffe-color-background-default)';
 exports['background-subtle'] = 'var(--ffe-color-background-subtle)';
@@ -71,6 +71,7 @@ exports['foreground-interactive-link'] = 'var(--ffe-color-foreground-interactive
 exports['foreground-interactive-link-hover'] = 'var(--ffe-color-foreground-interactive-link-hover)';
 exports['foreground-interactive-link-pressed'] = 'var(--ffe-color-foreground-interactive-link-pressed)';
 exports['foreground-interactive-link-active'] = 'var(--ffe-color-foreground-interactive-link-active)';
+exports['foreground-interactive-disabled'] = 'var(--ffe-color-foreground-interactive-disabled)';
 exports['foreground-feedback-info'] = 'var(--ffe-color-foreground-feedback-info)';
 exports['foreground-feedback-success'] = 'var(--ffe-color-foreground-feedback-success)';
 exports['foreground-feedback-warning'] = 'var(--ffe-color-foreground-feedback-warning)';
@@ -90,13 +91,18 @@ exports['component-form-input-fill-disabled'] = 'var(--ffe-color-component-form-
 exports['component-form-input-fill-read-only'] = 'var(--ffe-color-component-form-input-fill-read-only)';
 exports['component-form-input-fill-error'] = 'var(--ffe-color-component-form-input-fill-error)';
 exports['component-form-toggleswitch-handle-default'] = 'var(--ffe-color-component-form-toggleswitch-handle-default)';
+exports['component-form-toggleswitch-handle-disabled'] = 'var(--ffe-color-component-form-toggleswitch-handle-disabled)';
 exports['component-form-toggleswitch-fill-default'] = 'var(--ffe-color-component-form-toggleswitch-fill-default)';
 exports['component-form-toggleswitch-fill-default-hover'] = 'var(--ffe-color-component-form-toggleswitch-fill-default-hover)';
 exports['component-form-toggleswitch-fill-default-pressed'] = 'var(--ffe-color-component-form-toggleswitch-fill-default-pressed)';
 exports['component-form-toggleswitch-fill-selected'] = 'var(--ffe-color-component-form-toggleswitch-fill-selected)';
 exports['component-form-toggleswitch-fill-selected-hover'] = 'var(--ffe-color-component-form-toggleswitch-fill-selected-hover)';
 exports['component-form-toggleswitch-fill-selected-pressed'] = 'var(--ffe-color-component-form-toggleswitch-fill-selected-pressed)';
+exports['component-form-toggleswitch-fill-selected-disabled'] = 'var(--ffe-color-component-form-toggleswitch-fill-selected-disabled)';
+exports['component-form-toggleswitch-fill-selected-read-only'] = 'var(--ffe-color-component-form-toggleswitch-fill-selected-read-only)';
 exports['component-form-toggleswitch-fill-critical'] = 'var(--ffe-color-component-form-toggleswitch-fill-critical)';
+exports['component-form-toggleswitch-fill-disabled'] = 'var(--ffe-color-component-form-toggleswitch-fill-disabled)';
+exports['component-form-toggleswitch-fill-read-only'] = 'var(--ffe-color-component-form-toggleswitch-fill-read-only)';
 exports['component-button-action-border-default'] = 'var(--ffe-color-component-button-action-border-default)';
 exports['component-button-action-border-hover'] = 'var(--ffe-color-component-button-action-border-hover)';
 exports['component-button-action-border-pressed'] = 'var(--ffe-color-component-button-action-border-pressed)';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-core",
-    "version": "33.2.0",
+    "version": "100.0.3",
     "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": "^0.10.2",
+        "@sb1/ffe-buildtool": "^100.0.3",
         "case": "^1.5.5",
         "less": "^4.1.2",
         "postcss": "^8.3.6"
@@ -43,5 +45,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "cc5bdf057ae2acf93315e4eb4d8e026320cf03be"
+    "gitHead": "8b55768332b15f6ac19ddde8e17edbbcfff2be8c"
 }

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 };