Config being ignored?

[djmtype]

Even though I am using Terrazzo, I am making assumptions based on Cobalt.

I ran npx terrazzo init which produced an example tokens file. The color object includes hex values. So, why are these being transformed to srgb values?

Example: #fcfcfc transforms to color(srgb 0.9882352941176471 0.9882352941176471 0.9882352941176471)

Is this because of its css plugin? Shouldn't color transforms be an opt-in feature?

In any case, I even tried setting colorFormat to hex, and it still returned srgb format. Also, the prefix value was never applied to the compiled css file. Maybe these plugin features weren't carried over from Cobalt?

My config:

import { defineConfig } from "@terrazzo/cli";
import css from "@terrazzo/plugin-css";

export default defineConfig({
  tokens: "./src/tokens/tokens.json",
  outDir: "./src/tokens/output/",
  plugins: [css({
    prefix: "sol-",
    p3: false,
    colorFormat: "hex",
  })],
});

[drwpow]

#fcfcfc transforms to color(srgb 0.9882352941176471 0.9882352941176471 0.9882352941176471)

That’s actually a feature of better color handling: upconverting to CSS Module 4 is an improvement over soon-to-be-obsolete hex codes because it’s future-proof and no longer locked into 8-bit, sRGB color depth. It’s more verbose, sure, but it’s preparing for better universal color handling in a world with P3 color and high-color-depth displays that hex codes aren’t capable of providing (that other languages like Swift have had to deal with for a long time, and now web has caught up with CSS Color Module 4).

Put another way, hex already is sRGB so this actually isn’t a transformation at all; this is a 100% accurate way of expressing the same color, just in a more universal, futureproof way.

In any case, I even tried setting colorFormat to hex, and it still returned srgb format. Also, the prefix value was never applied to the compiled css file. Maybe these plugin features weren't carried over from Cobalt?

Correct; this is a “major breaking version” which means changes are expected (technically it’s 0.x now during the beta, but I’m thinking about releasing it at 2.x just to signal that it’s a continuation of Cobalt’s versioning, but I digress). If you’re using @terrazzo/plugin-css, you’ll want to refer to that plugin’s documentation that lists the current config. But to your point, having an “upgrade guide” section would be helpful!

• prefix should be replaced with variableName
• p3 wasn’t carried over; this has just been improved overall so that this isn’t needed
• colorFormat also isn’t supported, because with upcoming upgrades with how colors work in the Design Token format, this plugin will just preserve your colors 1:1 rather than transforming them*

*Sidenote on transforming colors

Because transforming colors [is a controversial topic with lots of footguns](https://bottosson.github.io/posts/gamutclipping/), for now the only way to transform colors is by either: 1. using the `transform()` callback to transform colors yourself, or 2. just declaring colors differently in the first place in `tokens.json` Even though dealing with color is complex, like you pointed out, unexpected transformations can lead to even worse results. So unfortunately, exposing this complexity to users via the `transform()` option is just the best way to deal with this for now if you would like the plugin to output colors in a different colorspace than `tokens.json`.

[drwpow]

Closing because I think this was just a matter of missing documentation on the CSS plugin, which is now updated and improved.