@loadsmart/miranda-tokens/dist/index.js

Design tokens for the Miranda Design System

import { LoadsmartTheme } from './themes.js';

/**
 * Sort an array of strings in a special way that considers numeric parts within the strings.
 *
 * @param values An array of strings to be sorted.
 * @returns A new array containing the sorted strings.
 */
function sortNumericValues(values) {
    // Create a copy of the input array to avoid modifying the original array.
    return [...values].sort((a, b) => {
        return a.localeCompare(b, undefined, {
            numeric: true,
            sensitivity: 'base',
        });
    });
}

function extractTokens(tokens, prefix) {
    return tokens.filter((token) => {
        return token.startsWith(prefix);
    });
}
function excludeTokens(tokens, prefix) {
    return tokens.filter((token) => {
        return !token.startsWith(prefix);
    });
}
const ALL_TOKENS = Object.keys(LoadsmartTheme);
// We strip brand and platform-specific tokens as they should not be used directly.
const TOKENS = sortNumericValues(excludeTokens(excludeTokens(ALL_TOKENS, 'brand-'), 'platform-'));
const BACKGROUND_COLOR_TOKENS = extractTokens(TOKENS, 'color-background-');
const BORDER_RADIUS_TOKENS = extractTokens(TOKENS, 'border-radius-');
const BORDER_TOKENS = extractTokens(TOKENS, 'border-');
const BORDER_WIDTH_TOKENS = [
    'border-none',
    'border-thin',
    'border-medium',
    'border-thick',
];
const COLOR_TOKENS = extractTokens(TOKENS, 'color-');
const ELEVATION_TOKENS = extractTokens(TOKENS, 'elevation-');
const FONT_FAMILY_TOKENS = extractTokens(TOKENS, 'font-family-');
const FONT_SIZE_TOKENS = extractTokens(TOKENS, 'font-size-');
const FONT_WEIGHT_TOKENS = extractTokens(TOKENS, 'font-weight-');
const GLOBAL_TOKENS = extractTokens(TOKENS, 'global-');
const GLOW_TOKENS = extractTokens(TOKENS, 'glow-');
const LINE_HEIGHT_TOKENS = extractTokens(TOKENS, 'line-height-');
const OPACITY_TOKENS = extractTokens(TOKENS, 'opacity-');
const SPACING_TOKENS = extractTokens(TOKENS, 'spacing-');
const MEDIA_QUERY_TOKENS = extractTokens(TOKENS, 'media-');
const SPACING_TOKENS_WITH_NONE = ['none', ...SPACING_TOKENS];

/**
 * Get token value.
 *
 * @example
 * ```js
 * getToken('color-primary')
 * ```
 *
 * @param token Token whose value should be retrieved.
 * @returns Token value or `undefined` otherwise.
 */
function getToken(token) {
    return LoadsmartTheme[token];
}

function toCSSVariable(token) {
    const value = getToken(token);
    if (value == null) {
        return value;
    }
    return `--m-${token}`;
}

function toCSSValue(token, alpha) {
    const value = getToken(token);
    if (value == null) {
        return '';
    }
    if (token.startsWith('color-')) {
        return `rgba(var(${toCSSVariable(token)}, ${value}), ${alpha ?? 1})`;
    }
    return `var(${toCSSVariable(token)}, ${value})`;
}

/**
 * Get css value for spacing token validating 'none'.
 *
 * @param spacing Spacing token or 'none'
 * @param defaultSpacing Default spacing token if the provided spacing is not valid
 * @returns The css value for the spacing token
 */
function toSpacingCSSValue(spacing, defaultSpacing) {
    const defaultValue = defaultSpacing ? toCSSValue(defaultSpacing) : '';
    if (!spacing) {
        return defaultValue;
    }
    return (spacing === 'none' ? '0' : toCSSValue(spacing)) ?? defaultValue;
}

/**
 * Get the hex value for a color token.
 *
 * @example
 * ```js
 * getHexColor('color-primary')
 * ```
 *
 * @param token Color token whose value should be retrieved.
 * @returns Hexadecimal color value or undefined
 */
function getHexColor(token) {
    const tokenValue = String(getToken(token) || '');
    if (!tokenValue)
        return undefined;
    const colors = tokenValue.split(', ').map(Number);
    if (colors.length !== 3)
        throw new Error('color token must be in the `R, G, B` format');
    return colors.reduce((hexColor, current) => {
        const hexValue = current.toString(16).padStart(2, '0');
        return hexColor.concat(hexValue);
    }, '#');
}

export { BACKGROUND_COLOR_TOKENS, BORDER_RADIUS_TOKENS, BORDER_TOKENS, BORDER_WIDTH_TOKENS, COLOR_TOKENS, ELEVATION_TOKENS, FONT_FAMILY_TOKENS, FONT_SIZE_TOKENS, FONT_WEIGHT_TOKENS, GLOBAL_TOKENS, GLOW_TOKENS, LINE_HEIGHT_TOKENS, MEDIA_QUERY_TOKENS, OPACITY_TOKENS, SPACING_TOKENS, SPACING_TOKENS_WITH_NONE, TOKENS, getHexColor, getToken, toCSSValue, toCSSVariable, toSpacingCSSValue };