New color_palette colors not selectable within color_scheme color inputs

[connie]

Short description of issue

The new color_palette colors are not showing/selectable within color_scheme color inputs.

Reproduction steps

1. Add the color_palette setting with some default colors
2. Open a color_scheme setting in the theme editor.
3. Try to select one of the newly added palette colors in a color input.
4. Notice that the new colors are not available/selectable.

Additional info

In one screenshot, you can see a regular color input where the Color palette colors are showing. In the other screenshot, you can see a color input within a color_scheme where the Color palette colors are not showing.

What type of topic is this

Bug report

Upload screenshot(s) of issue

[Alan_G]

Hey @connie thanks for flagging. We’re looking into things:

Bug in the new color picker

Thanks for your patience while we looked into this. We’ve shipped a fix for the default transparent color issue. The issues around color schemes and color palettes are being looked at separately, and we’ll share more information once we have an update.

[Alan_G]

Hi @connie , just following up here - this should be resolved. Can you let me know if you’re still seeing the issue?

[connie]

Thanks for getting back to me about this! The palette colors are selectable within the color_scheme color inputs now, so that seems fixed

However, I see a new issue when implementing the color palette colors into the color_schemes further. When I reference to a color_palette color within a preset in settings_data.json, this does technically work but the preview color is transparent.

For example, I have referenced it like this in settings_data.json:

"color_schemes": {
  "scheme-2": {
    "settings": {
      "primary_bg": "{{ settings.color_palette.color_2 }}"
    }
  }
}

Which displays as a transparent color in the color scheme preview:

[Alan_G]

Hey @connie - thanks for confirming the original issue is resolved. Just to narrow down this new preview behaviour:

• Does the preview display correctly if you select the same palette color manually in the theme editor, rather than defining it through settings_data.json?
• Is this happening with every color used in the scheme preview, or only primary_bg?
• Could you share the relevant color_palette and color_scheme_group definitions from settings_schema.json if you have that?

That should help clarify whether this is specific to preset values or palette references more generally. Thanks!

[connie]

@Alan_G

• Does the preview display correctly if you select the same palette color manually in the theme editor, rather than defining it through settings_data.json?
• Is this happening with every color used in the scheme preview, or only primary_bg?
• Could you share the relevant color_palette and color_scheme_group definitions from settings_schema.json if you have that?

1. Yes it does preview correctly when I manually select the same palette color in the theme editor.
2. It’s happening for every color as far as I can see, every role color (the text/buttons) is transparent in the preview as you can see in my previously attached screenshot.
3. Sure, this is the relevant snippet from settings_schema.json:

{
        "type": "color_palette",
        "id": "color_palette",
        "default": {
          "color_1": "#ffffff",
          "color_2": "#000000",
          "color_3": "#fafafa",
          "color_4": "#f4f4f4",
          "color_5": "#ecedec",
          "color_6": "#d5f1ee",
          "color_7": "#fbea61",
          "color_8": "#8a8a9e",
          "color_9": "#f0702c",
          "color_10": "#378cde",
          "color_11": "#0b1613",
          "color_12": "#000096"
        }
      },
      {
        "type": "color_scheme_group",
        "id": "color_schemes",
        "definition": [
          {
            "type": "header",
            "content": "t:settings_schema.colors.settings.color_scheme.background.header"
          },
          {
            "type": "color",
            "id": "primary_bg",
            "label": "t:settings_schema.colors.settings.color_scheme.background.primary_bg.label",
            "default": "{{ settings.color_palette.color_1 }}"
          },
          {
            "type": "color_background",
            "id": "primary_bg_gradient",
            "label": "t:settings_schema.colors.settings.color_scheme.background.primary_bg_gradient.label",
            "info": "t:settings_schema.colors.settings.color_scheme.background.primary_bg_gradient.info"
          },
          {
            "type": "color",
            "id": "secondary_bg",
            "label": "t:settings_schema.colors.settings.color_scheme.background.secondary_bg.label",
            "default": "{{ settings.color_palette.color_3 }}"
          },
          {
            "type": "header",
            "content": "t:settings_schema.colors.settings.color_scheme.typography.header"
          },
          {
            "type": "color",
            "id": "title_color",
            "label": "t:settings_schema.colors.settings.color_scheme.typography.title_color.label",
            "default": "{{ settings.color_palette.color_2 }}"
          },
          {
            "type": "color_background",
            "id": "title_color_gradient",
            "label": "t:settings_schema.colors.settings.color_scheme.typography.title_color_gradient.label",
            "info": "t:settings_schema.colors.settings.color_scheme.typography.title_color_gradient.info"
          },
          {
            "type": "color",
            "id": "primary_fg",
            "label": "t:settings_schema.colors.settings.color_scheme.typography.primary_fg.label",
            "default": "{{ settings.color_palette.color_11 }}"
          },
          {
            "type": "header",
            "content": "t:settings_schema.colors.settings.color_scheme.primary_button.header"
          },
          {
            "type": "color",
            "id": "primary_button_bg",
            "label": "t:settings_schema.colors.settings.color_scheme.primary_button.primary_button_bg.label",
            "default": "{{ settings.color_palette.color_9 }}"
          },
          {
            "type": "color",
            "id": "primary_button_fg",
            "label": "t:settings_schema.colors.settings.color_scheme.primary_button.primary_button_fg.label",
            "default": "{{ settings.color_palette.color_1 }}"
          },
          {
            "type": "header",
            "content": "t:settings_schema.colors.settings.color_scheme.secondary_button.header"
          },
          {
            "type": "color",
            "id": "secondary_button_bg",
            "label": "t:settings_schema.colors.settings.color_scheme.secondary_button.secondary_button_bg.label",
            "default": "{{ settings.color_palette.color_9 }}"
          },
          {
            "type": "color",
            "id": "secondary_button_fg",
            "label": "t:settings_schema.colors.settings.color_scheme.secondary_button.secondary_button_fg.label",
            "default": "{{ settings.color_palette.color_1 }}"
          },
          {
            "type": "header",
            "content": "t:settings_schema.colors.settings.color_scheme.tertiary_button.header"
          },
          {
            "type": "color",
            "id": "tertiary_button_bg",
            "label": "t:settings_schema.colors.settings.color_scheme.tertiary_button.tertiary_button_bg.label",
            "default": "{{ settings.color_palette.color_9 }}"
          },
          {
            "type": "color",
            "id": "tertiary_button_fg",
            "label": "t:settings_schema.colors.settings.color_scheme.tertiary_button.tertiary_button_fg.label",
            "default": "{{ settings.color_palette.color_1 }}"
          },
          {
            "type": "header",
            "content": "t:settings_schema.colors.settings.color_scheme.inputs.header"
          },
          {
            "type": "color",
            "id": "input_bg",
            "label": "t:settings_schema.colors.settings.color_scheme.inputs.input_bg.label",
            "default": "{{ settings.color_palette.color_1 }}"
          },
          {
            "type": "color",
            "id": "input_fg",
            "label": "t:settings_schema.colors.settings.color_scheme.inputs.input_fg.label",
            "default": "{{ settings.color_palette.color_2 }}"
          },
          {
            "type": "header",
            "content": "t:settings_schema.colors.settings.color_scheme.general.header"
          },
          {
            "type": "color",
            "id": "primary_bd",
            "label": "t:settings_schema.colors.settings.color_scheme.general.primary_bd.label",
            "default": "{{ settings.color_palette.color_5 }}"
          },
          {
            "type": "color",
            "id": "accent",
            "label": "t:settings_schema.colors.settings.color_scheme.general.accent.label",
            "default": "{{ settings.color_palette.color_9 }}"
          },
          {
            "type": "color_background",
            "id": "accent_gradient",
            "label": "t:settings_schema.colors.settings.color_scheme.general.accent_gradient.label",
            "info": "t:settings_schema.colors.settings.color_scheme.general.accent_gradient.info"
          }
        ],
        "role": {
          "background": {
            "solid": "primary_bg",
            "gradient": "primary_bg_gradient"
          },
          "text": "primary_fg",
          "links": "primary_fg",
          "icons": "primary_fg",
          "primary_button": "primary_button_bg",
          "on_primary_button": "primary_button_fg",
          "primary_button_border": "primary_button_bg",
          "secondary_button": "secondary_button_bg",
          "on_secondary_button": "secondary_button_fg",
          "secondary_button_border": "secondary_button_bg"
        }
      }

[Alan_G]

Hey @connie - thanks for sending those details over. I was able to reproduce this on my end. The palette references and colors load correctly in the scheme inputs, but the scheme preview initially treats the role colors as transparent. Reselecting the same palette color makes that role display correctly, so this does look strange.

I’m going to look into this further internally and I’ll loop back here once I have more info. Thanks again for the detailed repro!