CSS @layer in Themes

[jamesarosen]

The content of shoelace-style/shoelace/dist/themes/light.css is all in the unnamed, topmost CSS layer. This makes it a bit difficult to manage the relationship between Shoelace styles, styles from other design systems, and overrides.

I'd love to be able to have Shoelace emit its styles within the shoelace layer.

Then, I can do this to define that Shoelace's styles overrides other components, but my utility classes win over Shoelace:

/* entrypoint.css */
@layer base;
@layer components;
@layer shoelace;
@layer utilities;

Without a @layerwrapper Shoelace's theme, Shoelace's styles win over everything else. That means I can't do something like this:

@layer utilities {
  .red { color: red; }
}

<sl-button class="red">A red button</sl-button>

No amount of CSS specificity will cause something in @layer utilities to win over Shoelace's layer-less styles.

[jamesarosen]

For even more control, I recommend

@layer shoelace.base {
  :root,
  :host,
  .sl-theme-light {
    color-scheme: light;

    --sl-color-gray-50: hsl(0 0% 97.5%);
    --sl-color-gray-100: hsl(240 4.8% 95.9%);
    --sl-color-gray-200: hsl(240 5.9% 90%);
    /* ... */
    --sl-z-index-toast: 950;
    --sl-z-index-tooltip: 1000
  }
}

@layer shoelace.components {
  .sl-toast-stack {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    z-index: var(--sl-z-index-toast);
    width: 28rem;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
  }

  .sl-toast-stack sl-alert {
    margin: var(--sl-spacing-medium);
  }

  .sl-toast-stack sl-alert::part(base) {
    box-shadow: var(--sl-shadow-large);
  }
}

@layer shoelace.utilities {
  @supports (scrollbar-gutter: stable) {
    .sl-scroll-lock {
      scrollbar-gutter: var(--sl-scroll-lock-gutter) !important;
    }

    .sl-scroll-lock body {
      overflow: hidden !important;
    }
  }

  @supports not (scrollbar-gutter: stable) {
    .sl-scroll-lock body {
      padding-right: var(--sl-scroll-lock-size) !important;
      overflow: hidden !important;
    }
  }
}