Share the idea to support Custom CSS (additional opinions are welcomed!)

[TomokoMiyake]

We are considering supporting Custom CSS following Theming concept of Lit:
https://lit.dev/docs/components/styles/#theming
Please feel free to comment if you have any questions or additional requests.

Developer can set a custom style for kintone UI Component as follows:

Step 1: Create buttons

const btnA = new Button({
  className: 'custom-style-1',
  text: 'button A'
})

const btnB = new Button({
  className: 'custom-style-1',
  text: 'button B'
})

const btnC = new Button({
  className: 'custom-style-2',
  text: 'button C'
})

Step 2: Create <style> tag and append it to the header

<style>
  .custom-style-1 {
    --kuc-button-text-color: #ffffff
    --kuc-button-background: #3498db;
    --kuc-button-background-hover: #1d6fa5;
  }

  .custom-style-2 {
    --kuc-button-text-color: white;
    --kuc-button-background: red;
    --kuc-button-background-hover: black;
  }
</style>

Following the above example, the btnA, btnB will have the style of "custom-style-1" and the btnC will have the style of "custom-style-2".

---

Here are the examples of Intended Properties to be supported:

Button

  --kuc-button-width
  --kuc-button-height
  --kuc-button-background
  --kuc-button-background-hover
  --kuc-button-background-focus
  --kuc-button-background-active
  --kuc-button-text-color
  --kuc-button-font-size

Notification

  --kuc-notification-background
  --kuc-notification-text-color
  --kuc-notification-font-size
  --kuc-notification-close-button-background
  --kuc-notification-close-button-color