A minions.css extensions for Planning Center app colors.
Supports background-color, border-color, color, and fill properties.
planningcenter-minions.css is a context-provider. In the majority case, context is provided by the host application. However, cross-applicatin modals need a way to cascade styles where host context is unavailable (iFrame).
In minions, these context providers look like variables: <body class="appcolor=accounts">.
The elements that observe these contexts are written like this: <div class="c-appcolor">. This element's color would be the application color.
<body class="appcolor=accounts">
<div><!-- modal-like thing -->
<header class="gc-appcolor c-white">
Edit a Person
</header>
<div>
<p>Contentz.</p>
</div>
<footer>
<button
class="bc-appcolor c-appcolor gc-transparent"
type="button"
value="Create"
/>
<input
class="gc-appcolor c-white"
type="submit"
value="Create"
/>
</footer>
</div>
</body>
The main css file is in the root of this project. Copy/paste
Install the package.
npm i -D planningcenter-minions.css
Add it to your build pipeline. I'll assume you know how to do that. Here's what it looks like using Webpakc/css-laoder:
import "planningcenter-minions"
Obviously you can include this using a link-tag.
<link rel="stylesheet" href="./path/to/planningcenter-minions.css" />