Shadow Tokens

const css = `
  .sense-p-16 {
    padding: 1rem;
  }

  .sense-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  div[class*='shadow-'] {
    height: var(--ods-sys-size-96);
    margin-top: var(--ods-sys-space-8);
    border: 1px solid var(--ods-sys-color-outline-base);
    font-size: var(--ods-sys-font-size-base);
  }

  .shadow-1 {
    box-shadow: var(--ods-sys-shadow-1);
  }

  .shadow-2 {
    box-shadow: var(--ods-sys-shadow-2);
  }

  .shadow-3 {
    box-shadow: var(--ods-sys-shadow-3);
  }

  .shadow-4 {
    box-shadow: var(--ods-sys-shadow-4);
  }

  .shadow-5 {
    box-shadow: var(--ods-sys-shadow-5);
  }

  .shadow-6 {
    box-shadow: var(--ods-sys-shadow-6);
  }

  .dark {
    .shadow-1, .shadow-2, .shadow-3, .shadow-4, .shadow-5, .shadow-6 {
      border: 1px solid var(--ods-sys-color-outline-base);
    }
  }
`;

const Example = () => {
  return (
    <div className="sense-stack">
      <div className="sense-p-16 shadow-1">Shadow 1</div>
      <div className="sense-p-16 shadow-2">Shadow 2</div>
      <div className="sense-p-16 shadow-3">Shadow 3</div>
      <div className="sense-p-16 shadow-4">Shadow 4</div>
      <div className="sense-p-16 shadow-5">Shadow 5</div>
      <div className="sense-p-16 shadow-6">Shadow 6</div>

      <style>{css}</style>
    </div>
  );
}

export default Example;