@pexip/components 19.3.0 → 20.0.0

package/design-tokens/base/all-sizes.variables.scss

@@ -1,15 +0,0 @@
-$all-sizes: (
-    size-0: 0,
-    size-1: 6px,
-    size-2: 8px,
-    size-3: 12px,
-    size-4: 16px,
-    size-5: 24px,
-    size-6: 30px,
-    size-7: 32px,
-    size-8: 36px,
-    size-9: 40px,
-    size-10: 48px,
-    size-11: 56px,
-    size-12: 64px,
-);

package/design-tokens/base/alphas.variables.scss

@@ -1,7 +0,0 @@
-$alpha-10: 0.1;
-$alpha-20: 0.2;
-$alpha-30: 0.3;
-$alpha-40: 0.4;
-$alpha-60: 0.6;
-$alpha-80: 0.8;
-$alpha-90: 0.9;

package/design-tokens/base/border-radius.variables.scss

@@ -1,8 +0,0 @@
-$border-radius: (
-    'square': 0%,
-    'round': 50%,
-    'small-box': 4px,
-    'box': 8px,
-    'medium-box': 16px,
-    'pill': 36px,
-);

package/design-tokens/base/circle-sizes.variables.scss

@@ -1,8 +0,0 @@
-$circle-sizes: (
-    circle-compact: 24px,
-    circle-small: 30px,
-    circle-medium: 56px,
-    circle-large: 96px,
-);
-
-$user-avatar-sizes: ('compact', 'small', 'medium', 'large');

package/design-tokens/base/font-family.variables.scss

@@ -1,13 +0,0 @@
-$font-inter:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    'Roboto',
-    'Oxygen',
-    'Ubuntu',
-    'Cantarell',
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;

package/design-tokens/base/palette.variables.scss

@@ -1,59 +0,0 @@
-$primary-color-100: color-hex('deep-blue-100');
-$primary-color-200: color-hex('deep-blue-90');
-$primary-color-300: color-hex('deep-blue-80');
-$primary-color-400: color-hex('deep-blue-60');
-$primary-color-500: color-hex('deep-blue-50');
-$primary-color-600: color-hex('deep-blue-40');
-$primary-color-700: color-hex('deep-blue-30');
-$primary-color-800: color-hex('deep-blue-20');
-$primary-color-900: color-hex('deep-blue-10');
-$primary-color-1000: color-hex('white');
-
-$secondary-color-100: color-hex('white');
-$secondary-color-200: color-hex('deep-blue-10');
-$secondary-color-300: color-hex('deep-blue-20');
-$secondary-color-400: color-hex('deep-blue-30');
-$secondary-color-500: color-hex('deep-blue-40');
-$secondary-color-600: color-hex('deep-blue-50');
-$secondary-color-700: color-hex('deep-blue-60');
-$secondary-color-800: color-hex('deep-blue-80');
-$secondary-color-900: color-hex('deep-blue-90');
-$secondary-color-1000: color-hex('deep-blue-100');
-
-$bordered-color-100: color-hex('white');
-$bordered-color-200: color-hex('neutral-10');
-$bordered-color-300: color-hex('neutral-20');
-$bordered-color-400: color-hex('neutral-30');
-$bordered-color-500: color-hex('neutral-40');
-$bordered-color-600: color-hex('neutral-50');
-$bordered-color-700: color-hex('neutral-60');
-$bordered-color-800: color-hex('neutral-80');
-$bordered-color-900: color-hex('neutral-90');
-$bordered-color-1000: color-hex('neutral-100');
-
-$error-bg-color: color-hex('signal-red');
-$error-bg-color-hover: color-hex('signal-red-hover');
-$error-text-color: color-hex('white');
-
-$success-bg-color: color-hex('signal-green');
-$success-hover-color: color-hex('signal-green-130');
-$success-text-color: color-hex('white');
-
-$obvious-bg-color: color-hex('blue-100');
-$obvious-bg-color-hover: color-hex('blue-90');
-$obvious-text-color: color-hex('white');
-
-$signal-red: color-hex('signal-red');
-$signal-green: color-hex('signal-green');
-
-$red-100: color-hex('red-100');
-$red-200: color-hex('red-90');
-$red-300: color-hex('red-80');
-$red-400: color-hex('red-60');
-$red-500: color-hex('red-40');
-
-$green-100: color-hex('green-100');
-$green-200: color-hex('green-90');
-$green-300: color-hex('green-80');
-$green-400: color-hex('green-60');
-$green-500: color-hex('green-40');

package/design-tokens/base/sizes.variables.scss

@@ -1 +0,0 @@
-$sizes: ('none', 'compact', 'small', 'medium', 'large');

package/design-tokens/base/transitions.variables.scss

@@ -1,3 +0,0 @@
-$durations: (
-    'default': 0.3s,
-);

package/design-tokens/base/variants.variables.scss

@@ -1,35 +0,0 @@
-$color-schemes: ('dark', 'light');
-
-$base-variants: $color-schemes;
-$base-select-variants: $base-variants;
-$base-toggle-switch-variants: $base-variants;
-
-$base-input-variants: ('standard', 'transparent');
-$base-button-variants: (
-    'primary',
-    'secondary',
-    'tertiary',
-    'translucent',
-    'text',
-    'danger',
-    'dangerBordered',
-    'success',
-    // FIXME: variants below are used for call controls, we need to probably find a better naming,
-    // but currently there is only one variant in the design system called `call` so I sticked to what we have for now,
-    // but we should probably rename it or implement call controls as separate component
-    'neutral',
-    'transparent',
-    'transparentAlternative'
-);
-$base-text-variants: (
-    'standard',
-    'link',
-    'subtle',
-    'tinted',
-    'disabled',
-    'success',
-    'danger',
-    'hidden',
-    'warning'
-);
-$base-badge-counter-variants: ('info', 'notification');

package/design-tokens/build-scripts/breakpoints.mjs

@@ -1,53 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-
-import {Content} from './content.mjs';
-
-const generatedByFile =
-    '/* FILE GENERATED BY packages/components/design-tokens/build-scripts/breakpoints.js DO NOT CHANGE */';
-
-const breakpoints = {
-    xs: 0,
-    sm: 479,
-    md: 744,
-    lg: 1025,
-    xl: 2000,
-};
-
-export function getBreakpoints() {
-    return breakpoints;
-}
-
-function exportBreakpoints(breakpoints) {
-    const content = new Content(generatedByFile);
-    content.push('export const breakpoints = ');
-    content.push(JSON.stringify(breakpoints));
-    content.push(';');
-
-    content.push('export type Breakpoint = keyof typeof breakpoints;');
-
-    content.push('export const breakpointNames: Breakpoint[] = ');
-    content.push(JSON.stringify(Object.keys(breakpoints)));
-    content.push(';');
-
-    fs.writeFileSync(
-        path.resolve('..', 'generated', 'breakpoints.ts'),
-        content.print('typescript'),
-    );
-}
-
-export function syncBreakpoints(breakpoints) {
-    const content = new Content(generatedByFile);
-    content.push('$grid-breakpoints: (');
-    for (const name in breakpoints) {
-        const value = breakpoints[name];
-        content.push(`'${name}': ${value}${value !== 0 ? 'px' : ''},`);
-    }
-    content.push(') !default;');
-    fs.writeFileSync(
-        path.resolve('..', 'generated', 'breakpoints.variables.scss'),
-        content.print('scss'),
-    );
-
-    exportBreakpoints(breakpoints);
-}

package/design-tokens/build-scripts/colors.mjs

@@ -1,111 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-
-import {fetchWithAccessToken} from './fetchWithAccessToken.mjs';
-import {FRAME_ID, RESOURCES_IDS} from './constants.mjs';
-import {Content} from './content.mjs';
-
-function floatToInt(float) {
-    return Math.round(float * 255);
-}
-
-function intToHex(int) {
-    return Number(int).toString(16).padStart(2, '0');
-}
-
-function rgbToHex(...rgb) {
-    return `#${rgb.map(v => intToHex(floatToInt(v))).join('')}`;
-}
-
-function toRgbValue(...rgb) {
-    return rgb.map(v => floatToInt(v)).join(',');
-}
-
-function normalizeColorName(color) {
-    return color.split('/')[1].toLowerCase().replace(/ +/g, '-');
-}
-
-function convertKebabToPascalCase(color) {
-    return color.replace(/(^\w|-\w)/g, text =>
-        text.replace(/-/, '').toUpperCase(),
-    );
-}
-
-export async function getColors() {
-    const {
-        nodes: {[RESOURCES_IDS.COLORS]: colorsFrame},
-    } = await fetchWithAccessToken(
-        `files/${FRAME_ID}/nodes?ids=${RESOURCES_IDS.COLORS}`,
-    );
-    return colorsFrame.document.children.reduce((acc, child) => {
-        const childNodes = child.children || [];
-        const newGroups = childNodes
-            .filter(n => n.name.includes('Group'))
-            .flatMap(c => c.children);
-
-        const newColors = [child, ...newGroups, ...childNodes]
-            .filter(s => !!s.styles)
-            .map(c => ({
-                ...c,
-                styles: colorsFrame.styles[c.styles.fill],
-            }))
-            .reduce((c, current) => {
-                const colorName = normalizeColorName(current.styles.name);
-                const [colorObj] = current.fills;
-                c[colorName] = colorObj.color;
-
-                return c;
-            }, {});
-
-        return Object.assign(acc, newColors);
-    }, {});
-}
-
-function exportColors(colors) {
-    const content = new Content(
-        `/* FILE GENERATED BY packages/components/design-tokens/build-scripts/colors.js DO NOT CHANGE */
-        /* eslint-disable @typescript-eslint/no-duplicate-enum-values -- same colors with different names in figma */
-        `,
-    );
-    content.push('export enum Color {');
-    for (const key in colors) {
-        const {r, g, b} = colors[key];
-        content.push(
-            `${convertKebabToPascalCase(key)} = '${rgbToHex(r, g, b)}',`,
-        );
-    }
-    content.push('};');
-    content.push('export enum RgbColor {');
-    for (const key in colors) {
-        const {r, g, b} = colors[key];
-        content.push(
-            `${convertKebabToPascalCase(key)} = '${toRgbValue(r, g, b)}',`,
-        );
-    }
-    content.push('};');
-    content.push(
-        '/* eslint-enable @typescript-eslint/no-duplicate-enum-values -- same colors with different names in figma */',
-    );
-    fs.writeFileSync(
-        path.resolve('..', 'generated', 'colors.ts'),
-        content.print('typescript'),
-    );
-}
-
-export function syncColors(colors) {
-    const content = new Content(
-        '/* FILE GENERATED BY packages/components/design-tokens/build-scripts/colors.js DO NOT CHANGE */',
-    );
-    content.push('$colors: (');
-    for (const key in colors) {
-        const {r, g, b} = colors[key];
-        content.push(`'${key}': ${rgbToHex(r, g, b)},`);
-    }
-    content.push(');');
-    fs.writeFileSync(
-        path.resolve('..', 'generated', 'colors.variables.scss'),
-        content.print('scss'),
-    );
-
-    exportColors(colors);
-}

package/design-tokens/build-scripts/constants.mjs

@@ -1,10 +0,0 @@
-export const API_URL = 'https://api.figma.com/v1/';
-export const FRAME_ID = '88rQRQU5LaIUIzesjpdt1j';
-export const ICONS_FRAME_ID = 'hE9toOmPYV61a1ysNMTSbG';
-export const VARIABLES_FRAME_ID = 'Z2GR4oIYL20ZgbQ3YvYFKw';
-export const RESOURCES_IDS = {
-    COLORS: '5433:21000',
-    ICONS: '2052:20',
-    FONTS: '28:154',
-    FONTS_MOBILE: '3058:3083',
-};

package/design-tokens/build-scripts/content.mjs

@@ -1,51 +0,0 @@
-import prettier from 'prettier';
-
-import config from '../../prettier.config.js';
-
-export class Content {
-    constructor(banner = '') {
-        this.banner = banner;
-        this.blocks = new Map();
-        this.strings = [];
-    }
-
-    /**
-     * add strings to a content block,
-     * if the first argument is a number strings will be grouped by that index.
-     *
-     * @param {[number,] string[]} args
-     * @memberof Content
-     */
-    push(...args) {
-        const [first, ...rest] = Array.from(args);
-        if (typeof first === 'number') {
-            const lines = (
-                this.blocks.has(first) ? this.blocks.get(first) : []
-            ).concat(rest);
-            this.blocks.set(args[0], lines);
-        } else {
-            this.strings = this.strings.concat([first, ...rest]);
-        }
-    }
-
-    /**
-     * Pretty print using the defined parser.
-     * Since prettier has no file extension to go by we need to pass this in.
-     *
-     * @param {'babel' | 'typescript' | 'scss' | 'html' | ...other prettier parsers } parser
-     * @returns string
-     * @memberof Content
-     */
-    print(parser) {
-        let lines = this.banner ? [this.banner] : [];
-        if (this.strings.length) {
-            lines = lines.concat([this.strings.join('\n')]);
-        }
-        if (this.blocks.size) {
-            lines = lines.concat(
-                Array.from(this.blocks.values()).map(l => l.join('\n')),
-            );
-        }
-        return prettier.format(lines.join('\n\n'), {...config, parser});
-    }
-}

package/design-tokens/build-scripts/download-icons.mjs

@@ -1,120 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-import {pascalCase} from 'change-case';
-
-import {fetchWithAccessToken} from './fetchWithAccessToken.mjs';
-import {ICONS_FRAME_ID, RESOURCES_IDS} from './constants.mjs';
-
-function normalizeIconName(frameName, iconDetails) {
-    // iconDetails = " Size=24px, Direction=right, Styling=primary "
-    const details = iconDetails
-        .trim()
-        .split(',')
-        .map(detail => detail.replace(/.+\=/g, ''));
-    // size = "24px"
-    const size = details.slice(0, 1).join();
-    // modifier = "right-primary"
-    const modifier = details.slice(1).join('-');
-    const iconName = frameName
-        .replace(/Icons/, 'icon')
-        .replace(/\//g, '-')
-        .toLowerCase();
-    return `${size}-${iconName}${modifier ? `-${modifier}` : ''}`;
-}
-
-function newIconName(name) {
-    const figmaName = name.split('-');
-    // Push the first part of the name to the back.
-    figmaName.push(figmaName.shift());
-    return figmaName.join('-').replace('px', '');
-}
-
-function saveIconResource(icon) {
-    console.log(
-        `fetching resource and storing meta: ${JSON.stringify(icon, null, 2)}`,
-    );
-    fetchWithAccessToken(icon.resource, 'text')
-        .then(graphic =>
-            fs.promises.writeFile(
-                path.resolve(
-                    '..',
-                    'generated',
-                    'icons',
-                    `${icon.iconName}.json`,
-                ),
-                JSON.stringify({...icon, graphic}, null, 2),
-            ),
-        )
-        .then(() => console.log(`wrote ${icon.iconName}.json`))
-        .catch(reason => console.log(reason));
-}
-
-function fetchResource(vector) {
-    return fetchWithAccessToken(
-        `images/${ICONS_FRAME_ID}/?ids=${vector.id}&format=svg`,
-    )
-        .then(icon => {
-            const name = normalizeIconName(vector.parentFrameName, vector.name);
-            const iconName = newIconName(name);
-            saveIconResource({
-                iconName,
-                name,
-                pascalName: `Icon${pascalCase(iconName)}`,
-                resource: icon.images[vector.id],
-            });
-        })
-        .catch(reason => console.log(reason));
-}
-
-export async function downloadIcons() {
-    const {
-        nodes: {[RESOURCES_IDS.ICONS]: iconsFrame},
-    } = await fetchWithAccessToken(
-        `files/${ICONS_FRAME_ID}/nodes?ids=${RESOURCES_IDS.ICONS}`,
-    );
-
-    const frames = iconsFrame.document.children;
-
-    // If only a specific icon(s) should be fetched provide it as a command line arg: --icon-name=background-blur,participant
-    const iconNames =
-        process.argv
-            .find(arg => arg.startsWith('--icon-name='))
-            ?.split('=')[1]
-            ?.split(',')
-            .map(s => s.trim())
-            .filter(Boolean) || [];
-
-    // frames now contain multiple nested icons
-    const allIcons = frames
-        .reduce((icons, currentFrame) => {
-            if (
-                iconNames.length > 0 &&
-                !iconNames.includes(currentFrame.name)
-            ) {
-                return icons;
-            }
-            icons.push(
-                currentFrame.children.map(child => ({
-                    ...child,
-                    parentFrameName: currentFrame.name,
-                })),
-            );
-            return icons;
-        }, [])
-        .flat();
-
-    console.log(
-        `preparing to fetch ${allIcons.length} icons from ${frames.length} frames`,
-    );
-
-    await allIcons
-        // needs to be sequential, else we get http 429 from figma
-        .reduce(
-            (promise, vector) =>
-                promise.then(async icons => [
-                    ...icons,
-                    await fetchResource(vector),
-                ]),
-            Promise.resolve([]),
-        );
-}

package/design-tokens/build-scripts/fetchWithAccessToken.mjs

@@ -1,26 +0,0 @@
-import {API_URL} from './constants.mjs';
-
-export async function fetchWithAccessToken(path, parse = 'json') {
-    const url = path.startsWith('http') ? path : API_URL + path;
-    try {
-        console.log(url);
-        const response = await fetch(url, {
-            headers: {
-                'X-Figma-Token': process.env.ACCESS_TOKEN,
-            },
-        });
-        if (parse === 'json') {
-            const result = await response.json();
-            console.log(result);
-            return result;
-        }
-        if (parse === 'text') {
-            const result = await response.text();
-            console.log(result);
-            return result;
-        }
-        return response;
-    } catch (reason) {
-        console.log(reason);
-    }
-}

package/design-tokens/build-scripts/fonts.mjs

@@ -1,125 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-import {camelCase, paramCase, pascalCase} from 'change-case';
-
-import {fetchWithAccessToken} from './fetchWithAccessToken.mjs';
-import {FRAME_ID} from './constants.mjs';
-import {Content} from './content.mjs';
-
-const getFrameChildren = parent => {
-    let children = [];
-    for (const child of parent.children) {
-        children.push(child);
-        if (child.children) {
-            children = [...children, ...getFrameChildren(child)];
-        }
-    }
-    return children;
-};
-
-export async function getFonts(recourceIds) {
-    const {
-        nodes: {[recourceIds]: fontsFrame},
-    } = await fetchWithAccessToken(
-        `files/${FRAME_ID}/nodes?ids=${recourceIds}`,
-    );
-    return getFrameChildren(fontsFrame.document)
-        .filter(x => !!x.styles)
-        .map(t => ({
-            ...t,
-            styles: fontsFrame.styles[t.styles.text],
-        }))
-        .reduce((acc, curr) => {
-            if (/semibold/i.test(curr.style.fontPostScriptName)) {
-                curr.style.fontWeight = 600;
-                if (/bold/i.test(curr.styles.name)) {
-                    curr.styles.name = 'body-bold';
-                }
-            }
-            acc[paramCase(curr.styles.name)] = {
-                fontName: camelCase(curr.styles.name),
-                fontSize: curr.style.fontSize,
-                lineHeight: curr.style.lineHeightPercentFontSize,
-                fontWeight: curr.style.fontWeight,
-            };
-            return acc;
-        }, {});
-}
-
-function pxToRem(bodySizePx, relativeSizeInPx) {
-    const relativeSize = Number(relativeSizeInPx);
-    if (Number.isNaN(relativeSize)) {
-        throw Error('Cannot get relative size, returned NaN.');
-    }
-    const remSize = Number.parseFloat(relativeSize) / bodySizePx;
-    return Math.round(remSize * 100) / 100;
-}
-
-function stripFontVariantKey(key) {
-    return key.replace(/(mobile-|desktop-)/, '');
-}
-
-export function syncFonts(fonts, destination, suffix) {
-    const content = new Content(
-        '/* FILE GENERATED BY packages/components/design-tokens/build-scripts/fonts.js DO NOT CHANGE */',
-    );
-
-    const fontsObject = Object.entries(fonts);
-    const bodySize = fontsObject.find(property => {
-        const variant = stripFontVariantKey(property[0]);
-        return variant === 'body';
-    })[1].fontSize;
-
-    content.push(
-        `${['$base-size', suffix].filter(s => !!s).join('-')}: ${bodySize}px;`,
-    );
-
-    content.push(0, `${['$font-size', suffix].filter(s => !!s).join('-')}: (`);
-    content.push(
-        1,
-        `${['$font-line-height', suffix].filter(s => !!s).join('-')}: (`,
-    );
-    content.push(
-        2,
-        `${['$font-weight', suffix].filter(s => !!s).join('-')}: (`,
-    );
-
-    for (const [key, {fontSize, lineHeight, fontWeight}] of fontsObject) {
-        const strippedKey = stripFontVariantKey(key);
-        content.push(0, `${strippedKey}: ${pxToRem(bodySize, fontSize)}rem,`);
-        content.push(1, `${strippedKey}: ${lineHeight}%,`);
-        content.push(2, `${strippedKey}: ${fontWeight},`);
-    }
-    for (let i = 0; i <= 2; i++) {
-        content.push(i, ');');
-    }
-    fs.writeFileSync(
-        path.resolve('..', 'generated', destination),
-        content.print('scss'),
-    );
-    syncConstants(fonts);
-}
-
-function syncConstants(fonts) {
-    console.log(fonts);
-
-    const content = new Content(
-        '// FILE GENERATED BY packages/components/design-tokens/build-scripts/fonts.js DO NOT CHANGE',
-    );
-
-    content.push('export enum FontVariant {');
-    for (const {fontName} of Object.values(fonts)) {
-        const strippedFontName = fontName.replace(/(mobile|desktop)/, '');
-        content.push(
-            `${pascalCase(strippedFontName)} = '${camelCase(
-                strippedFontName,
-            )}',`,
-        );
-    }
-    content.push('}');
-
-    fs.writeFileSync(
-        path.resolve('..', 'generated', 'constants.ts'),
-        content.print('typescript'),
-    );
-}