@sb1/ffe-core 100.0.0 → 100.0.3

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

@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+const { writeToFile } = require('../../utils.cjs');
+
+function transformToCssProperty(name, value) {
+    return `--ffe-${name.replaceAll('.', '-')}: ${value};`;
+}
+
+function generateCssColorFileContent(colors) {
+    return `
+/* Generated from Figma tokens */
+
+
+
+/* dark mode default context */
+@media (prefers-color-scheme: dark) {
+    .regard-color-scheme-preference,
+    .regard-color-scheme-preference .ffe-default-mode {
+    ${Object.entries(colors.dark)
+        .map(([name, value]) => transformToCssProperty(name, value))
+        .join('\n')}
+    }
+}
+
+
+/* dark mode accent når en overstyrer os/nettleser light/dark preferanse*/
+.ffe-dark,
+.ffe-dark .ffe-default-mode {
+${Object.entries(colors.dark)
+    .map(([name, value]) => transformToCssProperty(name, value))
+    .join('\n')}
+}
+
+/* dark mode accent context */
+@media (prefers-color-scheme: dark) {
+    .regard-color-scheme-preference .ffe-accent-mode {
+    ${Object.entries(colors.darkAccent)
+        .map(([name, value]) => transformToCssProperty(name, value))
+        .join('\n')}
+    }
+}
+
+/* dark mode accent når en overstyrer os/nettleser light/dark preferanser*/
+.ffe-dark .ffe-accent-mode, .ffe-dark.ffe-accent-mode {
+${Object.entries(colors.darkAccent)
+    .map(([name, value]) => transformToCssProperty(name, value))
+    .join('\n')}
+} 
+
+/* Default context */
+:root,
+:host,
+.ffe-default-mode,
+.ffe-light,
+.ffe-light .ffe-default-mode, .ffe-light.ffe-default-mode {
+  ${Object.entries(colors.light)
+      .map(([name, value]) => transformToCssProperty(name, value))
+      .join('\n')}
+}
+
+/* Accent context */
+.ffe-light .ffe-accent-mode,
+.ffe-accent-mode {
+  ${Object.entries(colors.lightAccent)
+      .map(([name, value]) => transformToCssProperty(name, value))
+      .join('\n')}
+}
+`;
+}
+
+function buildCssColors(paths, colors) {
+    paths.forEach(path => {
+        const content = generateCssColorFileContent(colors);
+        writeToFile(path + 'less/colors-semantic.less')(content);
+        writeToFile(path + 'css/colors-semantic.css')(content);
+    });
+}
+
+module.exports = { buildCssColors };

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

@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+const { writeToFile } = require('../../utils.cjs');
+
+function transformToCssPropertyName(name) {
+    return `--ffe-${name.replaceAll('.', '-')}`;
+}
+
+function transformToJsVariableName(name) {
+    return name
+        .slice(6)
+        .replaceAll('-', '.')
+        .split('.')
+        .map((part, idx) =>
+            idx === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1),
+        )
+        .join('');
+}
+
+function generateJsColorFileContent(colors) {
+    return `
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+
+${Object.entries(colors.light)
+    .map(([name]) => `exports.${transformToJsVariableName(name)} = `)
+    .join('')}  void 0
+
+${Object.entries(colors.light)
+    .map(
+        ([name]) =>
+            `exports.${transformToJsVariableName(name)} = 'var(${transformToCssPropertyName(name)})';`,
+    )
+    .join('\n')}
+`;
+}
+
+function buildJsColors(paths, colors) {
+    paths.forEach(path => {
+        const content = generateJsColorFileContent(colors);
+        writeToFile(path + 'lib/semanticColors.js')(content);
+    });
+}
+
+module.exports = { buildJsColors };

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

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+const { writeToFile } = require('../../utils.cjs');
+
+function transformToCssPropertyName(name) {
+    return `--ffe-${name.replaceAll('.', '-')}`;
+}
+
+function transformToTailwindJsVariableName(name) {
+    return `['${name.slice(6).replaceAll('.', '-')}']`;
+}
+
+function generateJsTailwindColorFileContent(colors) {
+    return `"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+
+${Object.entries(colors.light)
+    .map(([name]) => `exports${transformToTailwindJsVariableName(name)} = `)
+    .join('')}  void 0
+
+${Object.entries(colors.light)
+    .map(
+        ([name]) =>
+            `exports${transformToTailwindJsVariableName(name)} = 'var(${transformToCssPropertyName(name)})';`,
+    )
+    .join('\n')}
+`;
+}
+
+function buildTailwindJsColors(paths, colors) {
+    paths.forEach(path => {
+        const content = generateJsTailwindColorFileContent(colors);
+        writeToFile(path + 'lib/semanticColorsTailwind.js')(content);
+    });
+}
+
+module.exports = { buildTailwindJsColors };

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

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+const { writeToFile } = require('../../utils.cjs');
+
+function transformToTW4CssProperty(name, value) {
+    return `--${name.replaceAll('.', '-')}: var(--ffe-${name.replaceAll('.', '-')});`;
+}
+
+function generateTailwind4CssColorFileContent(colors) {
+    return `@theme inline {
+\t${Object.entries(colors.light)
+        .map(([name]) => transformToTW4CssProperty(name))
+        .join('\n\t')}
+}
+`;
+}
+
+function buildTailwind4CssColors(paths, colors) {
+    paths.forEach(path => {
+        const content = generateTailwind4CssColorFileContent(colors);
+        writeToFile(path + 'css/colors-semantic-tailwind-4.css')(content);
+    });
+}
+
+module.exports = { buildTailwind4CssColors };

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

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+const { buildChevronCssColors } = require('./chevron.cjs');
+const { buildCssColors } = require('./css.cjs');
+const { buildJsColors } = require('./js.cjs');
+const { buildColorsNames } = require('./color-names.cjs');
+const { buildTailwindJsColors } = require('./tailwind.cjs');
+const { buildTailwind4CssColors } = require('./tailwind4.cjs');
+
+function buildWebColors(paths, colors) {
+    buildCssColors(paths, colors);
+    buildJsColors(paths, colors);
+    buildChevronCssColors(paths, colors);
+    buildColorsNames(paths, colors);
+    buildTailwindJsColors(paths, colors);
+    buildTailwind4CssColors(paths, colors);
+}
+
+module.exports = { buildWebColors };

package/scripts/build-custom-mq.cjs

@@ -0,0 +1,45 @@
+#!/usr/bin/env node
+const path = require('path');
+const postcss = require('postcss');
+
+const renderLessVarsToCSSProps = require('./lib/renderLessVarsToCSSProps.cjs');
+const writeToFile = require('./lib/writeToFile.cjs');
+
+const lessFile = process.argv[2];
+const customMqFile = process.argv[3];
+
+if (!customMqFile) {
+    console.error('Usage: build-custom-mq.js input.less output.css');
+    process.exit(1);
+}
+
+/**
+ * convert css custom props. to css custom media queries
+ *
+ * input:  @breakpoint-sm: 480px;
+ * result: @custom-media --ffe-breakpoint-sm screen and (min-width: 480px);
+ */
+renderLessVarsToCSSProps(path.resolve(lessFile))
+    .then(css =>
+        postcss().process(css, {
+            from: false,
+            hideNothingWarning: true,
+        }),
+    )
+    .then(({ root }) => {
+        let str = '';
+
+        root.walkDecls(decl => {
+            str += `@custom-media ${decl.prop.replace(
+                /^--(ffe-)?/,
+                '--ffe-',
+            )} screen and (min-width: ${decl.value});\n`;
+        });
+
+        return str;
+    })
+    .then(writeToFile(customMqFile))
+    .catch(err => {
+        console.error(err);
+        process.exit(1);
+    });

package/scripts/build.cjs

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+const path = require('path');
+
+const writeToFile = require('./lib/writeToFile.cjs');
+const renderLessVarsToCSSProps = require('./lib/renderLessVarsToCSSProps.cjs');
+const extractCustomProps = require('./lib/extractCustomProps.cjs');
+const { genTSSource, genTSModIndex } = require('./lib/genTypeScript.cjs');
+
+const configFilePath = process.argv[2];
+
+if (!configFilePath) {
+    console.error('Usage: build.js path/to/build.config.js');
+    process.exit(1);
+}
+
+const config = require(path.resolve(configFilePath));
+const lessFiles = config.sources.map(p => path.resolve(p));
+
+const basename = fname => path.basename(fname, '.less');
+const cssFilePathFor = fname =>
+    path.join(config.output.css, `${basename(fname)}.css`);
+const tsFilePathFor = fname =>
+    path.join(config.output.typescript, `${basename(fname)}.ts`);
+
+const pipeline = lessFile =>
+    renderLessVarsToCSSProps(lessFile)
+        .then(writeToFile(cssFilePathFor(lessFile)))
+        .then(extractCustomProps)
+        .then(genTSSource)
+        .then(writeToFile(tsFilePathFor(lessFile)));
+
+Promise.all(lessFiles.map(pipeline))
+    .then(() => genTSModIndex(lessFiles.map(basename)))
+    .then(writeToFile(path.join(config.output.typescript, 'index.ts')))
+    .catch(err => {
+        console.error(err);
+        process.exit(1);
+    });

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

@@ -0,0 +1,126 @@
+import { colorApproximatelyEqual, parseColor, rgbToHex } from './color';
+
+describe('colorApproximatelyEqual', () => {
+    it('compares by hex value', () => {
+        expect(
+            colorApproximatelyEqual({ r: 0, g: 0, b: 0 }, { r: 0, g: 0, b: 0 }),
+        ).toBe(true);
+        expect(
+            colorApproximatelyEqual(
+                { r: 0, g: 0, b: 0 },
+                { r: 0, g: 0, b: 0, a: 1 },
+            ),
+        ).toBe(true);
+        expect(
+            colorApproximatelyEqual(
+                { r: 0, g: 0, b: 0, a: 0.5 },
+                { r: 0, g: 0, b: 0, a: 0.5 },
+            ),
+        ).toBe(true);
+        expect(
+            colorApproximatelyEqual(
+                { r: 0, g: 0, b: 0 },
+                { r: 0, g: 0, b: 0, a: 0 },
+            ),
+        ).toBe(false);
+
+        expect(
+            colorApproximatelyEqual(
+                { r: 0, g: 0, b: 0 },
+                { r: 0.001, g: 0, b: 0 },
+            ),
+        ).toBe(true);
+        expect(
+            colorApproximatelyEqual(
+                { r: 0, g: 0, b: 0 },
+                { r: 0.0028, g: 0, b: 0 },
+            ),
+        ).toBe(false);
+    });
+});
+
+describe('parseColor', () => {
+    it('parses hex values', () => {
+        // 3-value syntax
+        expect(parseColor('#000')).toEqual({ r: 0, g: 0, b: 0 });
+        expect(parseColor('#fff')).toEqual({ r: 1, g: 1, b: 1 });
+        expect(parseColor('#FFF')).toEqual({ r: 1, g: 1, b: 1 });
+        expect(parseColor('#f09')).toEqual({ r: 1, g: 0, b: 153 / 255 });
+        expect(parseColor('#F09')).toEqual({ r: 1, g: 0, b: 153 / 255 });
+
+        // 4-value syntax
+        expect(parseColor('#0000')).toEqual({ r: 0, g: 0, b: 0, a: 0 });
+        expect(parseColor('#000F')).toEqual({ r: 0, g: 0, b: 0, a: 1 });
+        expect(parseColor('#f09a')).toEqual({
+            r: 1,
+            g: 0,
+            b: 153 / 255,
+            a: 170 / 255,
+        });
+
+        // 6-value syntax
+        expect(parseColor('#000000')).toEqual({ r: 0, g: 0, b: 0 });
+        expect(parseColor('#ffffff')).toEqual({ r: 1, g: 1, b: 1 });
+        expect(parseColor('#FFFFFF')).toEqual({ r: 1, g: 1, b: 1 });
+        expect(parseColor('#ff0099')).toEqual({ r: 1, g: 0, b: 153 / 255 });
+        expect(parseColor('#FF0099')).toEqual({ r: 1, g: 0, b: 153 / 255 });
+
+        // 8-value syntax
+        expect(parseColor('#00000000')).toEqual({ r: 0, g: 0, b: 0, a: 0 });
+        expect(parseColor('#00000080')).toEqual({
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 128 / 255,
+        });
+        expect(parseColor('#000000ff')).toEqual({ r: 0, g: 0, b: 0, a: 1 });
+        expect(parseColor('#5EE0DCAB')).toEqual({
+            r: 0.3686274509803922,
+            g: 0.8784313725490196,
+            b: 0.8627450980392157,
+            a: 0.6705882352941176,
+        });
+    });
+
+    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(
+            'Invalid color format',
+        );
+        expect(() => parseColor('#000000000')).toThrowError(
+            'Invalid color format',
+        );
+        expect(() => parseColor('#hhh')).toThrowError('Invalid color format');
+    });
+});
+
+describe('rgbToHex', () => {
+    it('should convert rgb to hex', () => {
+        expect(rgbToHex({ r: 1, g: 1, b: 1 })).toBe('#ffffff');
+        expect(rgbToHex({ r: 0, g: 0, b: 0 })).toBe('#000000');
+        expect(rgbToHex({ r: 0.5, g: 0.5, b: 0.5 })).toBe('#808080');
+        expect(
+            rgbToHex({
+                r: 0.3686274509803922,
+                g: 0.8784313725490196,
+                b: 0.8627450980392157,
+            }),
+        ).toBe('#5ee0dc');
+    });
+
+    it('should convert rgba to hex', () => {
+        expect(rgbToHex({ r: 1, g: 1, b: 1, a: 1 })).toBe('#ffffff');
+        expect(rgbToHex({ r: 0, g: 0, b: 0, a: 0.5 })).toBe('#00000080');
+        expect(rgbToHex({ r: 0.5, g: 0.5, b: 0.5, a: 0.5 })).toBe('#80808080');
+        expect(
+            rgbToHex({
+                r: 0.3686274509803922,
+                g: 0.8784313725490196,
+                b: 0.8627450980392157,
+                a: 0,
+            }),
+        ).toBe('#5ee0dc00');
+    });
+});

package/scripts/figma-api/color.ts

@@ -0,0 +1,52 @@
+import { RGB, RGBA } from '@figma/rest-api-spec';
+
+export function rgbToHex({ r, g, b, ...rest }: RGB | RGBA) {
+    const a = 'a' in rest ? rest.a : 1;
+
+    const toHex = (value: number) => {
+        const hex = Math.round(value * 255).toString(16);
+        return hex.length === 1 ? `0${hex}` : hex;
+    };
+
+    const hex = [toHex(r), toHex(g), toHex(b)].join('');
+    return `#${hex}${a !== 1 ? toHex(a) : ''}`.trim();
+}
+
+/**
+ * Compares two colors for approximate equality since converting between Figma RGBA objects (from 0 -> 1) and
+ * hex colors can result in slight differences.
+ */
+export function colorApproximatelyEqual(
+    colorA: RGB | RGBA,
+    colorB: RGB | RGBA,
+) {
+    return rgbToHex(colorA) === rgbToHex(colorB);
+}
+
+export function parseColor(color: string): RGB | RGBA {
+    const trimmedColor = color.trim();
+    const hexRegex = /^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2}){0,1}$/;
+    const hexShorthandRegex = /^#([A-Fa-f0-9]{3})([A-Fa-f0-9]){0,1}$/;
+
+    if (hexRegex.test(trimmedColor) || hexShorthandRegex.test(color)) {
+        const hexValue = trimmedColor.substring(1);
+        const expandedHex =
+            hexValue.length === 3 || hexValue.length === 4
+                ? hexValue
+                      .split('')
+                      .map(char => char + char)
+                      .join('')
+                : hexValue;
+
+        const alphaValue =
+            expandedHex.length === 8 ? expandedHex.slice(6, 8) : undefined;
+
+        return {
+            r: parseInt(expandedHex.slice(0, 2), 16) / 255,
+            g: parseInt(expandedHex.slice(2, 4), 16) / 255,
+            b: parseInt(expandedHex.slice(4, 6), 16) / 255,
+            ...(alphaValue ? { a: parseInt(alphaValue, 16) / 255 } : {}),
+        };
+    }
+    throw new Error('Invalid color format');
+}

package/scripts/figma-api/figma_api.ts

@@ -0,0 +1,41 @@
+import axios from 'axios';
+import {
+    GetLocalVariablesResponse,
+    PostVariablesRequestBody,
+    PostVariablesResponse,
+} from '@figma/rest-api-spec';
+
+export default class FigmaApi {
+    private baseUrl = 'https://api.figma.com';
+    private token: string;
+
+    constructor(token: string) {
+        this.token = token;
+    }
+
+    async getLocalVariables(fileKey: string) {
+        const resp = await axios.request<GetLocalVariablesResponse>({
+            url: `${this.baseUrl}/v1/files/${fileKey}/variables/local`,
+            headers: {
+                Accept: '*/*',
+                'X-Figma-Token': this.token,
+            },
+        });
+
+        return resp.data;
+    }
+
+    async postVariables(fileKey: string, payload: PostVariablesRequestBody) {
+        const resp = await axios.request<PostVariablesResponse>({
+            url: `${this.baseUrl}/v1/files/${fileKey}/variables`,
+            method: 'POST',
+            headers: {
+                Accept: '*/*',
+                'X-Figma-Token': this.token,
+            },
+            data: payload,
+        });
+
+        return resp.data;
+    }
+}

package/scripts/figma-api/sync_figma_to_tokens.ts

@@ -0,0 +1,57 @@
+import 'dotenv/config';
+import * as fs from 'fs';
+
+import FigmaApi from './figma_api';
+
+import { green } from './utils';
+import { tokenFilesFromLocalVariables } from './token_export';
+
+/**
+ * Usage:
+ *
+ * // Defaults to writing to the tokens_new directory
+ * npm run sync-figma-to-tokens
+ *
+ * // Writes to the specified directory
+ * npm run sync-figma-to-tokens -- --output directory_name
+ */
+
+async function main() {
+    if (!process.env.PERSONAL_ACCESS_TOKEN || !process.env.FILE_KEY) {
+        throw new Error(
+            'PERSONAL_ACCESS_TOKEN and FILE_KEY environemnt variables are required',
+        );
+    }
+    const fileKey = process.env.FILE_KEY;
+
+    const api = new FigmaApi(process.env.PERSONAL_ACCESS_TOKEN);
+    const localVariables = await api.getLocalVariables(fileKey);
+
+    const tokensFiles = tokenFilesFromLocalVariables(localVariables);
+
+    let outputDir = './packages/ffe-core/tokens';
+    const outputArgIdx = process.argv.indexOf('--output');
+    if (outputArgIdx !== -1) {
+        outputDir = process.argv[outputArgIdx + 1];
+    }
+
+    if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir);
+    }
+
+    Object.entries(tokensFiles).forEach(([fileName, fileContent]) => {
+        fs.writeFileSync(
+            `${outputDir}/${fileName}`,
+            JSON.stringify(fileContent, null, 2),
+        );
+        console.log(`Wrote ${fileName}`);
+    });
+
+    console.log(
+        green(
+            `✅ Tokens files have been written to the ${outputDir} directory`,
+        ),
+    );
+}
+
+main();