Zen Palette: CSS Variables for the current Zen theme

[GuiMar10]

So, Arc injects custom CSS Variables like --arc-palette-accent or --arc-palette-Bg for developers to make their website follow the browser theme, and I think it would be pretty nice to have :)

[chrtz]

A complete reference list of all available Arc palette variables can be found here: https://arc.net/colors.html.

The following code snippet, provided by devslovecoffee.com, illustrates how these variables are used:

CSS

    --arc-palette-subtitle: #D4AD97FF;
    --arc-palette-foregroundSecondary: #EF8C62FF;
    --arc-palette-foregroundPrimary: #EF8C62FF;
    --arc-palette-hover: #E9D6CBFF;
    --arc-palette-background: #F4EBE5FF;
    --arc-palette-maxContrastColor: #993810FF;
    --arc-palette-title: #2E1000FF;
    --arc-palette-minContrastColor: #FCEBE4FF;
    --arc-palette-backgroundExtra: #FEFDFCFF;
    --arc-palette-foregroundTertiary: #FCEBE4FF;
    --arc-palette-focus: #CA997EFF;
    --arc-background-simple-color: #EF8C62FF;
    --arc-palette-cutoutColor: #FCEBE4FF;

Variable Naming Conflict Warning
Please note the potential for naming conflicts. The Zenit Design System (https://themedocs.zenit.design/en/content/shopping-experiences/css-variables) already uses a similar variable prefix structure, specifically beginning with --zen-.