Shadow Tokens

const css = `
  .ods-shadow__demo {
    background-color: var(--ods-sys-color-surface-sunken);
    border: 1px solid var(--ods-sys-color-outline-base);
  }

  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);
    background-color: var(--ods-sys-color-surface-raised);
  }

  .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="ods-shadow__demo" ods-layout="p:16 block gap:md align:inline-stretch">
      <div ods-layout="p:16" className="shadow-1">Shadow 1</div>
      <div ods-layout="p:16" className="shadow-2">Shadow 2</div>
      <div ods-layout="p:16" className="shadow-3">Shadow 3</div>
      <div ods-layout="p:16" className="shadow-4">Shadow 4</div>
      <div ods-layout="p:16" className="shadow-5">Shadow 5</div>
      <div ods-layout="p:16" className="shadow-6">Shadow 6</div>

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

export default Example;