# Useful CSS Stuff

**URL:** <https://forum.inductiveautomation.com/t/useful-css-stuff/95414>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 2, 2024, 1:58am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414 "2024-09-02T01:58:19Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [September 2, 2024, 3:14am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/2 "2024-09-02T03:14:48Z")

</div>

### Using CSS Custom Properties to Build Composable Style Systems

* * *

I'm gonna try to distill this down into something approachable.

Let's say you want to style your buttons. You make a palette of colors, and use those colors to style your button:

![20240901_224432](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/9/69fe466abfc445847f8f99308b482327aceb879a.png)

```css
[data-component='ia.input.button'] {
    color: var(--palette-primary-50);
    background-color: var(--palette-primary-500);
    border-color: var(--palette-primary-600);
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
}

:root {
    --palette-primary-50: #edf5fd;
    --palette-primary-100: #e3effb;
    --palette-primary-200: #c7dff7;
    --palette-primary-300: #97c3f0;
    --palette-primary-400: #4393e4;
    --palette-primary-500: #0b6bcb;
    --palette-primary-600: #185ea5;
    --palette-primary-700: #12467b;
    --palette-primary-800: #0a2744;
    --palette-primary-900: #051423;

    --palette-neutral-50: #fbfcfe;
    --palette-neutral-100: #f0f4f8;
    --palette-neutral-200: #dde7ee;
    --palette-neutral-300: #cdd7e1;
    --palette-neutral-400: #9fa6ad;
    --palette-neutral-500: #636b74;
    --palette-neutral-600: #555e68;
    --palette-neutral-700: #32383e;
    --palette-neutral-800: #171a1c;
    --palette-neutral-900: #0b0d0e;

    --palette-danger-50: #fef6f6;
    --palette-danger-100: #fce4e4;
    --palette-danger-200: #f7c5c5;
    --palette-danger-300: #f09898;
    --palette-danger-400: #e47474;
    --palette-danger-500: #c41c1c;
    --palette-danger-600: #a51818;
    --palette-danger-700: #7d1212;
    --palette-danger-800: #430a0a;
    --palette-danger-900: #240505;
}

```

Cool! But now _all_ our buttons are blue, and we need more options. We have 3 color palettes, and it would be nice if we could use them all on our buttons.

Let's add a layer of indirection:

```css
.psc-Color\/primary {
    --palette-50: var(--palette-primary-50);
    --palette-100: var(--palette-primary-100);
    --palette-200: var(--palette-primary-200);
    --palette-300: var(--palette-primary-300);
    --palette-400: var(--palette-primary-400);
    --palette-500: var(--palette-primary-500);
    --palette-600: var(--palette-primary-600);
    --palette-700: var(--palette-primary-700);
    --palette-800: var(--palette-primary-800);
    --palette-900: var(--palette-primary-900);
}

.psc-Color\/neutral {
    --palette-50: var(--palette-neutral-50);
    --palette-100: var(--palette-neutral-100);
    --palette-200: var(--palette-neutral-200);
    --palette-300: var(--palette-neutral-300);
    --palette-400: var(--palette-neutral-400);
    --palette-500: var(--palette-neutral-500);
    --palette-600: var(--palette-neutral-600);
    --palette-700: var(--palette-neutral-700);
    --palette-800: var(--palette-neutral-800);
    --palette-900: var(--palette-neutral-900);
}

.psc-Color\/danger {
    --palette-50: var(--palette-danger-50);
    --palette-100: var(--palette-danger-100);
    --palette-200: var(--palette-danger-200);
    --palette-300: var(--palette-danger-300);
    --palette-400: var(--palette-danger-400);
    --palette-500: var(--palette-danger-500);
    --palette-600: var(--palette-danger-600);
    --palette-700: var(--palette-danger-700);
    --palette-800: var(--palette-danger-800);
    --palette-900: var(--palette-danger-900);
}

```

And use this computed/indirect palette on our button:

```css
[data-component='ia.input.button'] {
    color: var(--palette-50);
    background-color: var(--palette-500);
    border-color: var(--palette-600);
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
}

```

Now, by applying the style classes `Color\neutral`, `Color\primary`, and `Color\danger` we can get three different looks for our button.  
 ![20240901_230337](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/e/8ee946acc5ed9d6836870192aa4f208bac3ffb70.png)

This is a simple example, but it can be taken much further.

Our [pyro-mui-joy](https://github.com/mussonindustrial/pyro/tree/main/packages/pyro-mui-joy) theme takes this to the extreme, with 4 variants (`solid`, `outlined`, `soft`, and `neutral`), 5 palettes (`neutral`, `primary`, `success`, `info`, and `danger`), and three sizes (`sm`, `md`, and `lg`) that can all be applied to a component to affect its look and feel.

 ![20240901_230858](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/7/e795d004bdc36a21fe30b3e07703271892165d0f.png)

 ![20240901_230921](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/1/b1b67b58c82b8516e2c79fc88031057f4b96f2a5.png)

 ![20240901_230945](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/e/8ee57e7f522e5ecbdc8bb6719c42c32b80f80b98.png)

When you get this scale though, handwriting the CSS classes becomes sadistic and you will want to turn to automation to generate them for you (maybe a topic for another time).

---

_[View the full topic](https://forum.inductiveautomation.com/t/useful-css-stuff/95414)._