npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@gaia-awesome/theme

v0.1.0

Published

Gaia theme for Web Awesome.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

mr-vismamr-visma

Keywords

Readme

Gaia Theme

Reusable Gaia theme package for Web Awesome.

Install

npm install @gaia-awesome/theme @awesome.me/webawesome

@awesome.me/webawesome is a peer dependency. Install and configure Web Awesome using Web Awesome's own CDN, npm, download, and base-path instructions; this package only adds Gaia styling on top. It does not replace Web Awesome's loader, component imports, runtime assets, or setBasePath() setup. This package also consumes Gaia design tokens from @vsn-ux/gaia-styles.

Which stylesheet should I import?

Use the full theme in most npm/bundled apps. Import Web Awesome's base stylesheet first, then the Gaia theme. Web Awesome components are still imported from @awesome.me/webawesome according to Web Awesome's own docs.

import "@awesome.me/webawesome/dist/styles/webawesome.css";
import "@gaia-awesome/theme/styles/gaia.css";

Use gaia-core.css when the app already owns native HTML styling. It includes the Gaia palette, semantic variants, tokens, dimensions, and Web Awesome component overrides. It excludes native HTML element styling.

import "@gaia-awesome/theme/styles/gaia-core.css";

Use gaia-native.css only when adding Gaia native HTML styling separately. This native layer is intentionally baseline styling for common HTML elements; it does not yet aim to mirror the full Web Awesome native utility matrix.

import "@gaia-awesome/theme/styles/gaia-native.css";

Apply the theme and palette classes to the document root.

<html class="wa-theme-gaia wa-palette-gaia"></html>

This package targets Web Awesome >=3.6.0 <4.

Package exports

  • @gaia-awesome/theme: imports the full Gaia theme stylesheet as a side effect.
  • @gaia-awesome/theme/styles/gaia.css: full Gaia theme plus native element styling.
  • @gaia-awesome/theme/styles/gaia-core.css: Web Awesome theme tokens, palette, dimensions, and component overrides.
  • @gaia-awesome/theme/styles/gaia-native.css: Gaia native element styling only.

The package publishes built CSS under dist/ and source CSS under src/styles/ so bundlers can use the style, development, or default export conditions.

Build and verify

The theme uses vp build rather than vp pack because Vite handles CSS import inlining and URL rebasing for the split stylesheet sources.

vp run @gaia-awesome/theme#build
npm_config_cache=/private/tmp/npm-cache-gaia npm pack --dry-run

Ownership model

  • wa-* elements and their public APIs belong to Web Awesome.
  • wa-theme-gaia and wa-palette-gaia belong to @gaia-awesome/theme.
  • Gaia-owned theme tokens use --gaia-*.
  • Gaia-owned data attributes use data-gaia-*.
  • Gaia-owned custom events use gwc-*.

Gaia component overrides must prefer semantic Web Awesome tokens first. Use ::part(), :state(), and component-local custom properties only when tokens are not expressive enough.

Gaia page shell

The canonical Gaia application shell is <gwc-page> from @gaia-awesome/components. Its internal layout CSS lives with the component so the theme package stays focused on tokens and Web Awesome primitive styling. Use it for Gaia SaaS shells that need persisted sidebar state, pinned or floating desktop navigation, explicit aside state, and product-app layout rules; use Web Awesome's <wa-page> for generic page composition.

The theme only adds light-DOM polish for shell content that apps provide, such as header action alignment, navigation search inputs, module selects, and card headings.

<gwc-page
  mobile-breakpoint="920"
  storage-scope="approval"
  sidebar-open
  sidebar-pinned
  persist-sidebar
>
  <header slot="header">
    <gwc-page-menu-toggle controls="app-navigation"></gwc-page-menu-toggle>
    <div data-gaia-page-region="actions"></div>
  </header>

  <gwc-page-navigation id="app-navigation" slot="navigation"></gwc-page-navigation>

  <main
    id="main-content"
    class="wa-grid wa-gap-m"
    style="--min-column-size: var(--gaia-page-card-min-width, 24rem)"
  >
    <wa-card></wa-card>
  </main>
</gwc-page>

The shell exposes component-local hooks such as --gwc-page-sidebar-width, --gwc-page-aside-width, --gwc-page-header-height, and --gwc-page-main-padding. Main content layout is opt-in: Web Awesome's wa-grid, wa-stack, wa-cluster, wa-split, wa-flank, wa-frame, gap classes, and wa-span-grid are already available from webawesome.css. The theme provides --gaia-page-card-min-width for recipes that opt into a responsive card grid.

Semantic brand mapping

Gaia brand semantics intentionally combine the Gaia secondary peach tint for quiet and normal fills with the Gaia primary deep blue for loud fills. This is a Gaia semantic mapping, not a single-hue Web Awesome brand ramp.