WRNexusJS/packages/ui/components/Section.wrn

import Container from "./Container.wrn"

component Section {
  props {
    id: string = ""
    size: string = "default"
    color: string = "primary"
    variant: string = "default"
    spacing: string = "lg"
    maxWidth: string = "xl"
    fullWidth: boolean = false
    borderTop: boolean = false
    borderBottom: boolean = false
    class: string = ""
  }

  view {
    <section
      {...attrs}
      data-ui-component="Section"
      class='wrn-section {class}'
      id='{id}'
      data-size='{size}'
      data-color='{color}'
      data-variant='{variant}'
      data-spacing='{spacing}'
      data-border-top='{borderTop}'
      data-border-bottom='{borderBottom}'
    >
      {#if fullWidth}
        <slot></slot>
      {:else}
        <Container
          columns="1"
          gap="md"
          maxWidth='{maxWidth}'
          size='{size}'
          color='{color}'
        >
          <slot></slot>
        </Container>
      {/if}
    </section>
  }

  style {
    .wrn-section {
      --section-tint: transparent;
      --section-ink: inherit;
      position: relative;
      isolation: isolate;
      width: 100%;
      min-width: 0;
      padding-block: 3rem;
      background: var(--section-tint);
      color: var(--section-ink);
      scroll-margin-top: var(--wrn-sticky-header-offset, 5rem);
    }

    .wrn-section[data-spacing="sm"] {
      padding-block: 2rem;
    }

    .wrn-section[data-spacing="md"] {
      padding-block: 3rem;
    }

    .wrn-section[data-spacing="xl"] {
      padding-block: 5rem;
    }

    .wrn-section[data-variant="soft"] {
      --section-tint: var(--wrn-color-surface-soft);
    }

    .wrn-section[data-variant="raised"] {
      --section-tint: var(--wrn-color-surface-raised);
    }

    /*
     * tinted and solid pick their fill from the component colour, which is
     * why these are two attributes rather than one class per pairing. The
     * previous version spent a line on every variant and colour combination.
     */
    .wrn-section[data-variant="tinted"][data-color="primary"] {
      --section-tint: var(--wrn-color-primary-soft);
    }

    .wrn-section[data-variant="tinted"][data-color="success"] {
      --section-tint: var(--wrn-color-success-soft);
    }

    .wrn-section[data-variant="tinted"][data-color="warning"] {
      --section-tint: var(--wrn-color-warning-soft);
    }

    .wrn-section[data-variant="tinted"][data-color="danger"] {
      --section-tint: var(--wrn-color-danger-soft);
    }

    .wrn-section[data-variant="tinted"][data-color="info"] {
      --section-tint: var(--wrn-color-info-soft);
    }

    .wrn-section[data-variant="solid"][data-color="primary"] {
      --section-tint: var(--wrn-color-primary);
      --section-ink: var(--wrn-color-on-primary);
    }

    .wrn-section[data-variant="solid"][data-color="danger"] {
      --section-tint: var(--wrn-color-danger);
      --section-ink: var(--wrn-color-on-danger);
    }

    .wrn-section[data-variant="solid"][data-color="secondary"] {
      --section-tint: var(--wrn-color-secondary);
      --section-ink: var(--wrn-color-on-secondary, #fff);
    }

    .wrn-section[data-variant="solid"][data-color="success"] {
      --section-tint: var(--wrn-color-success);
      --section-ink: #fff;
    }

    .wrn-section[data-variant="solid"][data-color="info"] {
      --section-tint: var(--wrn-color-info);
      --section-ink: #fff;
    }

    .wrn-section[data-variant="solid"][data-color="warning"] {
      --section-tint: var(--wrn-color-warning);
      --section-ink: #fff;
    }

    .wrn-section[data-spacing="none"] {
      padding-block: 0;
    }

    /* Soft and raised read as bands: hairlines mark where they start and end. */
    .wrn-section[data-variant="soft"],
    .wrn-section[data-variant="tinted"] {
      box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--wrn-color-border) 70%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--wrn-color-border) 70%, transparent);
    }

    .wrn-section[data-variant="raised"] {
      box-shadow:
        inset 0 1px 0 var(--wrn-color-border),
        inset 0 -1px 0 var(--wrn-color-border),
        0 12px 32px -20px rgb(0 0 0 / 0.25);
    }

    /* Solid bands carry a faint dot texture so large fills do not look flat. */
    .wrn-section[data-variant="solid"] {
      background:
        radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.12) 1px, transparent 0) 0 0 / 20px 20px,
        var(--section-tint);
    }

    /* Panel: the section becomes a framed, rounded band inside the page gutter. */
    .wrn-section[data-variant="panel"] {
      --section-tint: var(--wrn-color-surface);
      width: auto;
      margin-inline: clamp(0.75rem, 3vw, 2rem);
      border: 1px solid var(--wrn-color-border);
      border-radius: var(--wrn-radius-lg, 1rem);
      box-shadow: var(--wrn-shadow-1);
    }

    /* Grid: a blueprint backdrop that fades out toward the edges. */
    .wrn-section[data-variant="grid"]::before {
      position: absolute;
      z-index: -1;
      inset: 0;
      background:
        linear-gradient(var(--wrn-color-border) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, var(--wrn-color-border) 1px, transparent 1px) 0 0 / 32px 32px;
      content: "";
      -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
      mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
      pointer-events: none;
    }

    .wrn-section[data-border-top="true"] {
      border-top: 1px solid var(--wrn-color-border);
    }

    .wrn-section[data-border-bottom="true"] {
      border-bottom: 1px solid var(--wrn-color-border);
    }

    @media (min-width: 640px) {
      .wrn-section[data-spacing="lg"] {
        padding-block: 5rem;
      }

      .wrn-section[data-spacing="xl"] {
        padding-block: 6rem;
      }
    }
  }
}