@loadsmart/miranda-wc
Version:
Miranda Web Components component library
242 lines (233 loc) • 8.66 kB
JavaScript
/**
* Auto-generated file
* Do not edit directly
*/
var LoadsmartTheme = {
"brand-color-brand": "20, 214, 77",
"brand-color-brand-accent-1": "0, 215, 215",
"brand-color-brand-accent-2": "132, 241, 30",
"border-radius-none": "0px",
"border-radius-s": "4px",
"border-radius-m": "8px",
"border-radius-l": "16px",
"border-radius-circle": "50%",
"border-none": 0,
"border-thin": "1px",
"border-medium": "2px",
"border-thick": "4px",
"color-background-primary": "252, 252, 255",
"color-background-secondary": "248, 249, 251",
"color-background-tertiary": "230, 237, 242",
"color-background-highlight": "202, 219, 221",
"color-background-inverted": "32, 41, 49",
"color-background-secondary-inverted": "61, 74, 85",
"color-border-input": "193, 206, 217",
"color-border": "230, 237, 242",
"color-divider": "230, 237, 242",
"color-brand": "20, 214, 77",
"color-brand-accent-1": "0, 215, 215",
"color-brand-accent-2": "132, 241, 30",
"color-primary-20": "202, 219, 221",
"color-primary-60": "0, 84, 84",
"color-primary-100": "0, 51, 51",
"color-accent-20": "229, 245, 255",
"color-accent-60": "0, 98, 159",
"color-accent-100": "15, 66, 97",
"color-neutral-0": "252, 252, 255",
"color-neutral-10": "248, 249, 251",
"color-neutral-20": "230, 237, 242",
"color-neutral-40": "193, 206, 217",
"color-neutral-60": "94, 118, 138",
"color-neutral-80": "92, 106, 118",
"color-neutral-90": "61, 74, 85",
"color-neutral-100": "32, 41, 49",
"color-success-20": "227, 247, 239",
"color-success-60": "3, 124, 94",
"color-success-100": "0, 94, 71",
"color-danger-20": "255, 233, 230",
"color-danger-60": "186, 27, 27",
"color-danger-100": "104, 0, 3",
"color-warning-20": "255, 243, 214",
"color-warning-60": "248, 182, 14",
"color-warning-100": "102, 63, 25",
"color-text-primary": "32, 41, 49",
"color-text-secondary": "61, 74, 85",
"color-text-tertiary": "92, 106, 118",
"color-text-placeholder": "94, 118, 138",
"color-text-disabled": "193, 206, 217",
"color-text-inverted": "252, 252, 255",
"color-text-secondary-inverted": "193, 206, 217",
"color-text-error": "186, 27, 27",
"color-text-highlight": "0, 98, 159",
"color-text-link": "0, 84, 84",
"font-family-default": "'Manrope', sans-serif",
"font-family-title": "'Plus Jakarta Sans', 'Manrope', sans-serif",
"font-size-1": "0.625rem",
"font-size-2": "0.75rem",
"font-size-3": "0.875rem",
"font-size-4": "1rem",
"font-size-5": "1.25rem",
"font-size-6": "1.625rem",
"font-size-7": "2.375rem",
"font-size-8": "3rem",
"font-size-9": "3.625rem",
"font-weight-regular": 500,
"font-weight-medium": 600,
"font-weight-bold": 700,
"line-height-1": "100%",
"line-height-2": "125%",
"line-height-3": "130%",
"line-height-4": "140%",
"line-height-5": "150%",
"line-height-6": "180%",
"global-height-small": "1.75rem",
"global-height-default": "2.5rem",
"global-height-large": "3rem",
"media-screen-desktop": "1025px",
"media-screen-tablet": "481px",
"opacity-0": "0%",
"opacity-20": "20%",
"opacity-40": "40%",
"opacity-60": "60%",
"opacity-100": "100%",
"elevation-1": "0px 0px 2px rgba(94, 118, 138, 0.1), 0px 1px 6px 2px rgba(61, 74, 85, 0.15)",
"elevation-2": "0px 1px 3px rgba(94, 118, 138, 0.2), 0px 4px 8px 3px rgba(61, 74, 85, 0.15)",
"elevation-3": "0px 0px 4px rgba(94, 118, 138, 0.2), 0px 6px 12px 6px rgba(61, 74, 85, 0.15)",
"elevation-4": "0px 5px 6px 4px rgba(94, 118, 138, 0.2), 0px 8px 10px rgba(61, 74, 85, 0.1)",
"glow-primary": "0.0px 0.0px 4.0px 0px rgba(3, 124, 94, .5)",
"glow-warning": "0.0px 0.0px 4.0px 0px rgba(255, 206, 79, 1.0)",
"spacing-1": "4px",
"spacing-2": "8px",
"spacing-3": "12px",
"spacing-4": "16px",
"spacing-5": "20px",
"spacing-6": "24px",
"spacing-8": "32px",
"spacing-10": "40px",
"spacing-12": "48px",
"spacing-14": "56px",
"spacing-16": "64px",
"spacing-20": "80px",
"spacing-30": "120px",
"spacing-0-5": "2px",
"platform-font-default": "'Manrope', sans-serif",
"platform-font-title": "'Plus Jakarta Sans', 'Manrope', sans-serif"
};
/**
* 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, LoadsmartTheme, MEDIA_QUERY_TOKENS, OPACITY_TOKENS, SPACING_TOKENS, SPACING_TOKENS_WITH_NONE, TOKENS, getHexColor, getToken, toCSSValue, toCSSVariable, toSpacingCSSValue };