Epigraph-Button

Is there a list of all CSS variables for basic customizations?

Indeed... Here it is:

--color-brand-base
--color-brand-base-secondary
--color-brand-base-tertiary
--color-brand-accent
--color-brand-accent-secondary
--color-brand-accent-tertiary
--color-brand-light
--color-brand-dark
--font-brand-heading
--font-brand-body
--unit-brand-radius

How do I customize the button style?

In order to customize what the epigraph-button looks like on your page you can just add a child element to the element, just like you would do with any other HTML element and add a slot="slot-custom-view-in-your-space-button" attribute to it.

<style>
  .custom-button {
    width: 150px;
    height: 50px;
    border-radius: 10px;
    background-color: rgba(255, 167, 167, 1);
    transition: 0.25s;
  }

  .custom-button:hover {
    background-color: rgba(189, 93, 93, 1);
    color: white;
    cursor: pointer;
  }
</style>

<epigraph-button sku="sku-epigraph-logo-red" api-mode="%VITE_APP_API_MODE%">
  <button class="custom-button" slot="slot-custom-view-in-your-space-button">Custom Button</button>
</epigraph-button>

Even though that is the case in example above, the child component doesn't even need to be just a <button>, it could be any of the valid HTML components and the rest of the functionality should still work as expected. For example, clicking on this custom button would still perform all the necessary actions.

How do I customize the styles of these solutions?

There might be instances where you might want to customize the CSS styling of the components within our solutions. In order to do so, we provide a functionality to define a custom <template> element on the page with the id set to "epigraphCustomStyles" (VERY IMPORTANT). Now whatever CSS class class of selector you target from in here should pick up the style overrides at runtime. The only things to remember is that certain properties might be enforced internally and you may need to use the "!important" successor on these property values to override the internal values.

IMPORTANT: Please ensure that this template is appended to the page before you r add any of our solutions to the page in order for them pick up the overrides

  <template id="epigraphCustomStyles">
      <style>
          .collapse-expand-button {
              background-color: green !important;
          }

          .hotspot-main {
              background-color: rgb(208 230 197 / 90%) !important;
          }
      </style>
  </template>