[v4] How to alias a whole color?

[carltongibson]

Following the guide to Customizing your theme adding aliases works:

@theme {
    --color-brand-100: var(--color-indigo-100);
    /* ... skip ... */
    --color-brand-500: var(--color-indigo-500);
    --color-brand-600: var(--color-indigo-600);
    --color-brand-700: var(--color-indigo-700);
    /* ... skip ... */
}

But is there a way to do that in a single line?

Something like:

@theme {
    --color-brand: var(--color-indigo);
}

(But that doesn't work)

Thanks!

[adamwathan]

Hey! Right now there's no way to do it in a single line, haven't had the "eureka" moment that inspired the right API yet. Might be something we add though if we can come up with a syntax that feels right 👍

[carltongibson]

Great. Thanks for the quick reply.

I tried using theme() but without luck, so maybe that’d be worth leveraging, if that’s not a silly idea.

[emmnull]

Would an API similar to functional utilities be out of left field?

@theme {
  --color-brand-*: var(--color-indigo-*);
}

[brizzo]

I would rely on this a lot in version 3 with something like this in the config:

colors: {
    primary: {
        DEFAULT: colors.blue['500'],
        ...colors.blue
    },
}

Having similar in v4 would be great. In meantime we'll just need to explicitly map custom color names.

[digitalextremist]

Assuming you want the range of shades for a given named color:

/* alias-tailwind-color.scss */
@mixin alias-tailwind-color($alias-name, $base-color-name) {
  $color-shades: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950);

  @theme {
    @each $shade in $color-shades {
      $variable-name: "--color-" + $alias-name + "-" + $shade;
      $base-variable-name: "--color-" + $base-color-name + "-" + $shade;

      #{$variable-name}: var(#{$base-variable-name});
    }
  }
}

That mixin generates a @theme block for each color being aliased.

Then invoke where needed:

@use `alias-tailwind-color.scss` as *;
@include alias-tailwind-color("grayish", "zinc");

[carltongibson]

Thanks for the suggestion. I think (for my case) bringing in scss for (just) this would be a much, but yes that's an option.

[digitalextremist]

I ended up abandoning this and using the copy and paste approach, taking the color range I wanted and renaming it; so zinc in this case, calling it grayish