additional sources for contrast colors

[bnomei]

to keep the color definitions DRY... being able to pull the colors from

• config setting
• another field using query language

would be awesome.

[nilshoerrmann]

That's a good idea, especially using the query language. But I have no idea how to do this actually.

[bnomei]

you could try to get inspiration from here: https://github.com/sylvainjule/kirby-color-palette#dynamic-options

[distantnative]

If you have figured out a good syntax, it's not too difficult, @nilshoerrmann:

1. Create the prop in the PHP field setup. Can be very simple

'yourProp' => function (string $prop = null) {
    return $prop;
},

2. Create a computed prop, that will take the normal prop and run it as a query:

'yourProp' => function () {
    if ($this->yourProp !== null) {
        return $this->model()->toString($this->yourProp);
    }
},

[ebz8]

Hi, is there a way today to configure contrast options with a query from an other field? (if I want to pick colors for background AND text in my panel and check accessibility) Thank you :)

[nilshoerrmann]

No, I don't think so. But we should finally add this option. Can you provide me with the desired field setup in YAML you were thinking of?

[ebz8]

It would be wonderfull!! I tried something like that:

fields:
  backgroundcolor:
    type: colors
    alpha: true
    default: "#ff"

  textcolor:
     type: colors
     alpha: true
     contrast:
       type: query
       query: page.backgroundcolor    // or   page.backgroundcolor.toStructure and a correct text/value like {{item.color}}
    default: "#00"

I don't know, something like kirby-color-palette dynamic option and queries for kirby 3.8.1 select fields ?

[nilshoerrmann]

So I noticed something that certainly is the reason why we have not implemented this yet: it's one thing to set up the relationship between two field via queries in the blueprint – that's purely on the server. But we also have to deal with live updates inside the panel, in the browser. E. g. your two fields are on the same page and thus changing the one should automatically update the other on the fly. So somehow the Vue components have to listen to other fields as well and not just the PHP backend.

Are there other examples of fields doing this already?

[Werbschaft]

We had Sylvain Jule make us a plugin that we can get colours directly from the site settings. It is still online and can be found here. It's in heavy use every day and with cache function.

https://github.com/sylvainjule/kirby-color-palette/tree/custom-classes

[nilshoerrmann]

Thanks @Werbschaft!

I'm thinking about a good syntax. So we have this pattern for server side rendered options already:

contrast:
  type: query
  query: site.colors

What about this for live field updates?

contrast:
  type: watch
  field: nameoffield

Alternatively (or additionally), it could also be an idea to add an option to edit the contrast color directly, allowing users to switch the color they are editing:

contrast: editable

[nilshoerrmann]

/cc @johannahoerrmann

[ebz8]

Yes @nilshoerrmann , making the contrast field editable at first would personally allow me to set up what I want. Otherwise the syntax you suggest seems really good to me.

[nilshoerrmann]

Please have a look at https://github.com/hananils/kirby-colors/releases/tag/1.7.0. Feedback welcome :)

[ebz8]

Wow thank you SO MUCH, it's a great great feature. Web accessibility is really important to me and thanks to your work I can offer it very simply in the panel. I'll mention it on the Kirby forum. Thanks again!

[nilshoerrmann]

Just so you know: The new version only includes the blueprint queries, not contrast: editable. This will require more time and consideration because the field markup and CSS is already quite complex.