Toast

CSS

:root {
  --toast: #9f715f;
  --toast-rgb: 159 113 95;
  --toast-oklch: oklch(0.591 0.065 42.3);
}

.element {
  color: var(--toast);
  background-color: hsl(17 25% 50%);
  border-color: oklch(0.591 0.065 42.3);
}

Tailwind CSS v4

@theme {
  --color-toast: #9f715f;
  --color-toast-50: #fff0e6;
  --color-toast-100: #fce2d7;
  --color-toast-200: #edccbe;
  --color-toast-300: #d5ae9d;
  --color-toast-400: #c09281;
  --color-toast-500: #ab7864;
  --color-toast-600: #916655;
  --color-toast-700: #745144;
  --color-toast-800: #563b31;
  --color-toast-900: #3c2821;
  --color-toast-950: #261611;
}

SCSS

$toast: #9f715f;
$toast-rgb: 159, 113, 95;
$toast-light: mix(#fff, $toast, 20%);
$toast-dark: mix(#000, $toast, 20%);

.element {
  color: $toast;
  box-shadow: 0 0 0 2px rgba($toast, 0.35);
}