Developers - UI Control

Color Group

All our UI-controls require an array of name/value-pairs, where name is the shown value, and value is the class to toggle. Some of the controls have an additional display-property used to present custom CSS or icons.

The ui-colorgroup-control is for showing colors or gradients.

You need to specify the color or gradient in the display-property.

If your color is a gradient, you also need to add a color for the selected color-icon (checkmark).

As this is calculated through CSS's color-contrast()-function, you need to specify the contrast-color.

Let's say you have a light gradient:

{
  "label": "Light Gray Gradient",
  "value": "bg-gray-gradient",
  "display": "linear-gradient(200deg, hsl(0,0%,90%) 20%, hsl(0,0%,100%))"
}

To define the color for the icon, decide whether the gradient is closest to white or black. Then add that in front of the gradient:

"white linear-gradient(200deg, hsl(0,0%,90%) 20%, hsl(0,0%,100%))"

Example:

{
  "name": "Color",
  "ui": "ui-colorgroup",
  "values": [
    {
      "name": "Light",
      "value": "ub-hc-1",
      "display": "rgb(250, 250, 250)"
    },
    {
      "name": "Dark",
      "value": "ub-hc-2",
      "display": "rgb(5, 5, 5)"
    },
    {
      "name": "Gradient",
      "value": "ub-hc-3",
      "display": "white linear-gradient(91.11deg, #8e6bc8 27.84%, #00e9ee 75%)"
    },
    {
      "name": "Slab Serif",
      "value": "ub-hc-4",
      "display": "linear-gradient(60deg, #E21143, #FFB03A)"
    }
  ]
}

tip

If you want an option to be "none" (as in: no selection), set value to pf-none. This tells our script to remove any of the other values from the array of values from the target DOM-node.