@jaredpdesigns/pasta/src/shadows.css

Pasta provides a great starting place for web projects. It combines light styling for common web elements, yummy!

@layer props {
  :root {
    --shadow__strength: 0.375;

    @media screen and (prefers-color-scheme: light) {
      --shadow__color: var(--color__set--base);
      --shadow__value: var(--shadow__strength);
    }

    &[data-theme="light"],
    [data-theme="light"] {
      --shadow__color: var(--color__set--base);
      --shadow__value: var(--shadow__strength);
    }

    @media screen and (prefers-color-scheme: dark) {
      --shadow__color: black;
      --shadow__value: calc(var(--shadow__strength) * 2);
    }

    &[data-theme="dark"],
    [data-theme="dark"] {
      --shadow__color: black;
      --shadow__value: calc(var(--shadow__strength) * 2);
    }

    --shadow: 0 var(--size__xxs) var(--size__xs) calc(var(--size__xxs) * -1) color-mix(in srgb, var(--shadow__color) calc(var(--shadow__value)*100%), transparent),
    0 var(--size__m) var(--size__l) calc(var(--size__m) * -1) color-mix(in srgb, var(--shadow__color) calc(var(--shadow__value)*100%), transparent);
    --shadow__all: 0 0 var(--size__xxs) color-mix(in srgb, var(--shadow__color) calc(var(--shadow__value)*100%), transparent),
    0 0 var(--size__l) color-mix(in srgb, var(--shadow__color) calc(var(--shadow__value)*100%), transparent);
  }
}

@layer helpers {
  .shadow {
    box-shadow: var(--shadow);

    &__all {
      box-shadow: var(--shadow__all);
    }

    &__none {
      box-shadow: none;
    }
  }
}