@shopify/polaris/dist/esm/utilities/theme/utils.js

Shopify’s product component library

import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
import tokens$1 from '@shopify/polaris-tokens';
import { colorFactory } from '@shopify/polaris-tokens/dist-modern';
import { mergeConfigs } from '@shopify/polaris-tokens/dist-modern/utils';
import { config as config$1 } from '@shopify/polaris-tokens/dist-modern/configs/base';
import { colorToHsla, hslToRgb, hslToString } from '../color-transformers.js';
import { isLight } from '../color-validation.js';
import { constructColorName } from '../color-names.js';
import { createLightColor } from '../color-manipulation.js';
import { needsVariantList } from './config.js';

function buildCustomPropertiesNoMemo(themeConfig, newDesignLanguage, tokens) {
  var {
    colors = {},
    colorScheme,
    config,
    frameOffset = 0
  } = themeConfig;
  var mergedConfig = mergeConfigs(config$1, config || {});
  return newDesignLanguage ? customPropertyTransformer(_objectSpread2(_objectSpread2(_objectSpread2({}, colorFactory(colors, colorScheme, mergedConfig)), tokens), {}, {
    frameOffset: "".concat(frameOffset, "px")
  })) : _objectSpread2(_objectSpread2({}, buildLegacyColors(themeConfig)), customPropertyTransformer({
    frameOffset: "".concat(frameOffset, "px")
  }));
}
function buildThemeContext(themeConfig, cssCustomProperties) {
  var {
    logo,
    colors = {},
    colorScheme
  } = themeConfig;

  var newDesignLanguageColors = _objectWithoutProperties(colors, ["topBar"]);

  return {
    logo,
    cssCustomProperties: toString(cssCustomProperties),
    colors: newDesignLanguageColors,
    colorScheme
  };
}

function toString(obj) {
  if (obj) {
    return Object.entries(obj).map(pair => pair.join(':')).join(';');
  } else {
    return undefined;
  }
}

function customPropertyTransformer(properties) {
  return Object.entries(properties).reduce((transformed, [key, value]) => _objectSpread2(_objectSpread2({}, transformed), {}, {
    [toCssCustomPropertySyntax(key)]: value
  }), {});
}

function toCssCustomPropertySyntax(camelCase) {
  return "--p-".concat(camelCase.replace(/([A-Z0-9])/g, '-$1').toLowerCase());
}

function buildLegacyColors(theme) {
  var colorPairs;
  var colors = theme && theme.colors && theme.colors.topBar ? theme.colors.topBar : {
    background: '#00848e',
    backgroundLighter: '#1d9ba4',
    color: '#f9fafb'
  };
  var colorKey = 'topBar';
  var colorKeys = Object.keys(colors);

  if (colorKeys.length > 1) {
    colorPairs = colorKeys.map(key => {
      return [constructColorName(colorKey, key), colors[key]];
    });
  } else {
    colorPairs = parseColors([colorKey, colors]);
  }

  return colorPairs.reduce((state, [key, value]) => _objectSpread2(_objectSpread2({}, state), {}, {
    [key]: value
  }), {});
}

function needsVariant(name) {
  return needsVariantList.includes(name);
}

function lightenToString(color, lightness, saturation) {
  return hslToString(createLightColor(color, lightness, saturation));
}

function setTextColor(name, variant = 'dark') {
  if (variant === 'light') {
    return [name, tokens$1.colorInk];
  }

  return [name, tokens$1.colorWhite];
}
function setBorderColor(name, variant = 'dark') {
  if (variant === 'light') {
    return [name, tokens$1.colorInkLighter];
  }

  return [name, tokens$1.colorSkyDark];
}
function setTheme(color, baseName, key, variant) {
  var colorPairs = [];

  switch (variant) {
    case 'light':
      colorPairs.push(setTextColor(constructColorName(baseName, null, 'color'), 'light'));
      colorPairs.push(setBorderColor(constructColorName(baseName, null, 'border'), 'light'));
      colorPairs.push([constructColorName(baseName, key, 'lighter'), lightenToString(color, 7, -10)]);
      break;

    case 'dark':
      colorPairs.push(setTextColor(constructColorName(baseName, null, 'color'), 'dark'));
      colorPairs.push(setBorderColor(constructColorName(baseName, null, 'border'), 'dark'));
      colorPairs.push([constructColorName(baseName, key, 'lighter'), lightenToString(color, 15, 15)]);
      break;
  }

  return colorPairs;
}

function parseColors([baseName, colors]) {
  var keys = Object.keys(colors);
  var colorPairs = [];

  for (var _key of keys) {
    colorPairs.push([constructColorName(baseName, _key), colors[_key]]);

    if (needsVariant(baseName)) {
      var hslColor = colorToHsla(colors[_key]);

      if (typeof hslColor === 'string') {
        return colorPairs;
      }

      var rgbColor = hslToRgb(hslColor);

      if (isLight(rgbColor)) {
        colorPairs.push(...setTheme(hslColor, baseName, _key, 'light'));
      } else {
        colorPairs.push(...setTheme(hslColor, baseName, _key, 'dark'));
      }
    }
  }

  return colorPairs;
}

function memoize(fnToMemoize) {
  var cache = new Map();
  return function (...args) {
    var key = JSON.stringify([fnToMemoize.name, args]);

    if (cache.get(key) === undefined) {
      cache.set(key, fnToMemoize(...args));
    }

    return cache.get(key);
  };
}

var buildCustomProperties = memoize(buildCustomPropertiesNoMemo);

export { buildCustomProperties, buildCustomPropertiesNoMemo, buildThemeContext, needsVariant, setBorderColor, setTextColor, setTheme, toCssCustomPropertySyntax };