Function updateUI

packages/core/src/utils/ColorPicker.ts:793–862

()

    }

    function updateUI() {
      textInput.removeClass('sp-validation-error');

      updateHelperLocations();

      // Update dragger background color (gradients take care of saturation and value).
      var flatColor = tinycolor.fromRatio({ h: currentHue, s: 1, v: 1 });
      dragger.css('background-color', flatColor.toHexString());

      // Get a format that alpha will be included in (hex and names ignore alpha)
      var format = currentPreferredFormat;
      if (currentAlpha < 1 && !(currentAlpha === 0 && format === 'name')) {
        if (format === 'hex' || format === 'hex3' || format === 'hex6' || format === 'name') {
          format = 'rgb';
        }
      }

      var realColor = get({ format: format }),
        displayColor = '';

      //reset background info for preview element
      previewElement.removeClass('sp-clear-display');
      previewElement.css('background-color', 'transparent');

      if (!realColor && allowEmpty) {
        // Update the replaced elements background with icon indicating no color selection
        previewElement.addClass('sp-clear-display');
      } else {
        var realHex = realColor.toHexString(),
          realRgb = realColor.toRgbString();

        // Update the replaced elements background color (with actual selected color)
        if (rgbaSupport || realColor.alpha === 1) {
          previewElement.css('background-color', realRgb);
        } else {
          previewElement.css('background-color', 'transparent');
          previewElement.css('filter', realColor.toFilter());
        }

        if (opts.showAlpha) {
          var rgb = realColor.toRgb();
          rgb.a = 0;
          var realAlpha = tinycolor(rgb).toRgbString();
          var gradient = 'linear-gradient(left, ' + realAlpha + ', ' + realHex + ')';

          if (IE) {
            alphaSliderInner.css('filter', tinycolor(realAlpha).toFilter({ gradientType: 1 }, realHex));
          } else {
            alphaSliderInner.css('background', '-webkit-' + gradient);
            alphaSliderInner.css('background', '-moz-' + gradient);
            alphaSliderInner.css('background', '-ms-' + gradient);
            // Use current syntax gradient on unprefixed property.
            alphaSliderInner.css('background', 'linear-gradient(to right, ' + realAlpha + ', ' + realHex + ')');
          }
        }

        displayColor = realColor.toString(format);
      }