Custom colors

import { defineConfig } from "@croff/core";

export default defineConfig({
  theme: {
    colors: {
      accent: "#ff5c00",
      surface: "oklch(20% 0.01 90)",
      slate: { 100: "#f1f5f9", 500: "#64748b", 900: "#0f172a" },
    },
  },
});

html

<div class="bg(surface) color(slate-100) border(1,slate-500) hover:bg(accent)">Card</div>

Opacity

alpha(color,percent) works wherever a color does, and with any color token.

html

<div class="bg(alpha(accent,20)) border(1,alpha(brand,50))"></div>

Generated CSS

:root {
  --croff-color-brand: #c8fd12;
  --croff-color-accent: #ff5c00;
}

.bg\(alpha\(accent\,20\)\) {
  background-color: color-mix(in srgb, var(--croff-color-accent) 20%, transparent);
}

.border\(1\,alpha\(brand\,50\)\) {
  border-width: 1px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--croff-color-brand) 50%, transparent);
}

It compiles to color-mix(). See Browser support.

Keywords

Color utilities also accept transparent, current and inherit.

Custom properties of your own

html

<div class="bg(var(--my-color))"></div>

Generated CSS

.bg\(var\(--my-color\)\) {
  background-color: var(--my-color);
}