color-attributes.css

/* "primary", "secondary", "success", "warning", "danger", "light", "medium", "dark" */

/* "primary", "secondary", "ok",                 "error",  "white", "medium", "dark" */

/*                         "green",   "yellow-light",  "red",    "light", "medium", "dark" */

[color="primary"] {
  --color-base: var(--primary-color);
  --color-contrast: var(--primary-contrast-color);
  --color-active: var(--primary-active-color);
}

[color="secondary"] {
  --color-base: var(--secondary-color);
  --color-contrast: var(--secondary-contrast-color);
}

[color="light"] {
  --color-base: var(--light-color);
  --color-contrast: var(--light-contrast-color);
}

[color="medium"], [color="gray"] {
  --color-base: var(--medium-color);
  --color-contrast: var(--medium-contrast-color);
}

[color="dark"] {
  --color-base: var(--dark-color);
  --color-contrast: var(--dark-contrast-color);
}

[color="ok"], [color="success"] {
  --color-base: var(--success-color);
  --color-contrast: var(--success-contrast-color);
}

[color="warning"] {
  --color-base: var(--warning-color);
  --color-contrast: var(--warning-contrast-color);
}

[color="danger"], [color="error"], [color="alert"] {
  --color-base: var(--danger-color);
  --color-contrast: var(--danger-contrast-color);
}

[color="red"] {
  --color-base: var(--red);
  --color-contrast: var(--danger-contrast-color);
}

[color="green"] {
  --color-base: var(--green);
  --color-contrast: var(--success-contrast-color);
}

[color="blue"] {
  --color-base: var(--blue);
  --color-contrast: var(--success-contrast-color);
}

[color="orange"] {
  --color-base: var(--orange);
  --color-contrast: var(--success-contrast-color);
}

[color="yellow"] {
  --color-base: var(--yellow);
  --color-contrast: var(--warning-contrast-color);
}

[color="violet"] {
  --color-base: var(--indigo);
  --color-contrast: var(--success-contrast-color);
}

[color="brown"] {
  --color-base: var(--brown);
  --color-contrast: var(--dark-contrast-color);
}

[color="black"] {
  --color-base: var(--black);
  --color-contrast: var(--dark-contrast-color);
}

[color="white"] {
  --color-base: var(--white);
  --color-contrast: var(--light-contrast-color);
}

[color="current"] {
  --color-base: currentColor;
}

[color="grid"] {
  --color-base: var(--grid-background-color);
  --color-contrast: var(--dark-contrast-color);
}

[color="transparent"] {
  --color-base: transparent;
}

[color="translucent"] {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.2);
}

[color="cold"] {
  --color-base: var(--cold-color);
  --color-contrast: var(--success-contrast-color);
}

[color="hot"] {
  --color-base: var(--hot-color);
  --color-contrast: var(--danger-contrast-color);
}

/* gradient colors */
[color="cold-hot"] {
  --color-base: linear-gradient(90deg, var(--cold-color) 35%, var(--hot-color) 65%);
  --color-min: var(--cold-color);
  --color-max: var(--hot-color);
  --color-mix: var(--cold-hot-mix-color);
  --color-contrast: var(--white);
}

[color="cold-hot"][is-vertical] {
  --color-base: linear-gradient(var(--hot-color) 35%, var(--cold-color) 65%);
}

[color="ok-alert"] {
  --color-base: linear-gradient(90deg, var(--success-color) 35%, var(--danger-color) 65%);
  --color-min: var(--success-color);
  --color-max: var(--danger-color);
  --color-mix: var(--success-danger-color);
  --color-contrast: var(--white);
}

[color="ok-alert"][is-vertical] {
  --color-base: linear-gradient(var(--success-color) 30%, var(--danger-color) 65%);
}

[color="ok-warning-alert"] {
  --color-base: linear-gradient(90deg, var(--success-color) 30%, var(--warning-color) 70%, var(--danger-color) 90%);
  --color-min: var(--success-color);
  --color-max: var(--danger-color);
  --color-contrast: var(--black);
}

[color="ok-warning-alert"][is-vertical] {
  --color-base: linear-gradient(var(--danger-color) 20%, var(--warning-color) 40%, var(--success-color) 60%);
}