@nopwdio/ui/dist/demo-app.js

Nopwd Design System

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";
import "./components/ui-darkmode.js";
import "./components/ui-cards.js";
import "./components/ui-card.js";
import "./components/ui-color.js";
import "./components/ui-colors.js";
import "./components/ui-clipboard.js";
import "./components/ui-text-tokens.js";
import "./components/ui-border-tokens.js";
import "./components/ui-mobile.js";
import "./components/ui-editor.js";
import style from "./demo-app.styles";
import core from "./styles/core.js";
import sementic from "./styles/sementic.js";
import { github, nopwd } from "./icons/brand.js";
let DemoApp = class DemoApp extends LitElement {
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener("np:theme", (e) => {
            const theme = e.detail;
            console.log("theme", theme);
            this.setAttribute("theme", theme);
        }, true);
    }
    render() {
        return html `
      <header>
        <h1>${nopwd} Nopwd <strong>Design</strong></h1>
        <ui-darkmode></ui-darkmode>
        <a href="https://github.com/nopwdio/design.nopwd.io">${github}</a>
      </header>
      <main>
        <section>
          <h1>Welcome to the Nopwd Design System!</h1>
          <p>
            The Nopwd Design System (NDS) is a comprehensive set of guidelines, principles, and
            patterns for designing and building user interfaces at Nopwd. It ensures a cohesive and
            consistent user experience across all products.
          </p>
          <p>The design system consists of three main tiers:</p>
          <ui-cards>
            <ui-card href="#core">
              <span slot="title">Core Tokens</span>
              <span slot="desc">
                Core tokens define the foundational elements such as colors, sizing, and typography
                for the design system.
              </span>
            </ui-card>
            <ui-card href="#semantic-tokens">
              <span slot="title">Semantic Tokens</span>
              <span slot="desc">
                Semantic tokens are aliases for core tokens, providing more meaningful names to the
                tokens.
              </span>
            </ui-card>
            <ui-card href="#components">
              <span slot="title">Components</span>
              <span slot="desc">
                Components are the building blocks of the design system, utilizing semantic tokens
                to ensure consistency.
              </span>
            </ui-card>
          </ui-cards>
        </section>
        <section>
          <h2 id="components">Components</h2>
          <p>
            Components are reusable elements that can be combined to create a wide variety of
            interfaces. Each component is designed to be flexible, accessible, and easy to use.
          </p>

          <h4>ui-mobile</h4>
          <ui-mobile></ui-mobile>

          <h4>ui-darkmode</h4>
          <ui-darkmode></ui-darkmode>
          <h4>ui-editor</h4>
          <ui-editor title="Text Editor" clipboard="ui-editor"></ui-editor>
        </section>
        <section>
          <h2 id="semantic-tokens">Semantic Tokens</h2>
          <p>
            Semantic tokens ensure consistency across the app and support different themes without
            any changes to the components.
          </p>
          <h3>Colors</h3>
          <ui-colors prefix="--np-bg-color" suffix="-muted,,-emphasis"></ui-colors>
          <ui-colors prefix="--np-text-color" suffix="-muted,,-emphasis,-onfill"></ui-colors>
          <ui-colors prefix="--np-border-color" suffix="-muted,,-emphasis"></ui-colors>
          <ui-colors prefix="--np-fill-color-accent" suffix="-muted,,-emphasis"></ui-colors>
          <ui-colors prefix="--np-fill-color-warning" suffix="-muted,,-emphasis"></ui-colors>
          <ui-colors prefix="--np-fill-color-error" suffix="-muted,,-emphasis"></ui-colors>
          <ui-colors prefix="--np-fill-color-confirm" suffix="-muted,,-emphasis"></ui-colors>
          <h3>Typography</h3>
          <p>
            This section showcases the semantic typography styles used in the Nopwd Design System.
            These styles provide meaningful names to the core typography tokens, ensuring
            consistency and readability across the application.
          </p>
          <ui-text-tokens
            prefix="--np-text-size"
            applyto="font-size"
            suffix="muted,,emphasis"
          ></ui-text-tokens>
          <ui-text-tokens
            prefix="--np-text-size-heading"
            applyto="font-size"
            suffix="muted,,emphasis"
          ></ui-text-tokens>
          <ui-text-tokens
            prefix="--np-text-weight"
            applyto="font-weight"
            suffix="muted,,emphasis"
          ></ui-text-tokens>
          <ui-text-tokens
            prefix="--np-text-weight-heading"
            applyto="font-weight"
            suffix="muted,,emphasis"
          ></ui-text-tokens>

          <h3>Border</h3>
          <ui-border-tokens
            prefix="--np-border-width"
            applyto="border-width"
            suffix="muted,,emphasis"
          ></ui-border-tokens>
          <ui-border-tokens
            prefix="--np-border-radius"
            applyto="border-radius"
            suffix="muted,,emphasis"
          ></ui-border-tokens>

          <ui-border-tokens
            prefix="--np-padding"
            applyto="padding"
            suffix="muted,,emphasis"
          ></ui-border-tokens>

          <ui-border-tokens
            prefix="--np-gap"
            applyto="padding"
            suffix="muted,,emphasis"
          ></ui-border-tokens>
        </section>
        <section>
          <h2 id="core">Core Tokens</h2>
          <p>
            Core tokens are the most basic form of tokens, reducing the infinite possibilities to a
            select few that are most relevant to the brand. They are the foundation of the design
            system and provide a consistent set of colors and typography styles to be used across
            the application.
          </p>

          <h3>Colors</h3>
          <ui-colors
            prefix="--np-core-color-black"
            suffix="-100,-200,-300,-400,-500,-600,-700,-800,-900"
          ></ui-colors>
          <ui-colors
            prefix="--np-core-color-white"
            suffix="-100,-200,-300,-400,-500,-600,-700,-800,-900"
          ></ui-colors>

          <ui-colors
            prefix="--np-core-color-blue"
            suffix="-100,-200,-300,-400,-500,-600,-700,-800,-900"
          ></ui-colors>
          <ui-colors
            prefix="--np-core-color-gray"
            suffix="-100,-200,-300,-400,-500,-600,-700,-800,-900"
          ></ui-colors>
          <ui-colors
            prefix="--np-core-color-green"
            suffix="-100,-200,-300,-400,-500,-600,-700,-800,-900"
          ></ui-colors>
          <ui-colors
            prefix="--np-core-color-orange"
            suffix="-100,-200,-300,-400,-500,-600,-700,-800,-900"
          ></ui-colors>
          <ui-colors
            prefix="--np-core-color-pink"
            suffix="-100,-200,-300,-400,-500,-600,-700,-800,-900"
          ></ui-colors>
          <ui-colors
            prefix="--np-core-color-purple"
            suffix="-100,-200,-300,-400,-500,-600,-700,-800,-900"
          ></ui-colors>
          <ui-colors
            prefix="--np-core-color-red"
            suffix="-100,-200,-300,-400,-500,-600,-700,-800,-900"
          ></ui-colors>
          <ui-colors
            prefix="--np-core-color-yellow"
            suffix="-100,-200,-300,-400,-500,-600,-700,-800,-900"
          ></ui-colors>

          <h3>Typography</h3>
          <p>
            This section showcases the core typography styles used in the Nopwd Design System.
            Explore the different styles and see how they can be applied to create a consistent and
            readable interface.
          </p>
          <ui-text-tokens
            prefix="--np-core-font-size"
            applyto="font-size"
            suffix="xs,s,m,l,xl"
          ></ui-text-tokens>

          <ui-text-tokens
            prefix="--np-core-font-weight"
            applyto="font-weight"
            suffix="xs,s,m,l,xl"
          ></ui-text-tokens>
          <h3>Icons</h3>
          <p>
            The Nopwd Design System includes a set of icons that can be used to enhance the user
            interface. These icons are designed to be simple, clear, and consistent across the
            application. The icons are available in two styles: outlined or solid.
          </p>
          <h3>Border</h3>
          <ui-border-tokens
            prefix="--np-core-border-width"
            applyto="border-width"
            suffix="xs,s,m,l,xl"
          ></ui-border-tokens>
          <ui-border-tokens
            prefix="--np-core-border-radius"
            applyto="border-radius"
            suffix="xs,s,m,l,xl"
          ></ui-border-tokens>
        </section>
      </main>
      <footer>
        <p>&copy; ${new Date().getFullYear()} Nopwd. All rights reserved.</p>
        <nav>
          <a href="#core">Core Tokens</a>
          <a href="#semantic-tokens">Semantic Tokens</a>
          <a href="#components">Components</a>
        </nav>
      </footer>
    `;
    }
};
DemoApp.styles = [core, sementic, style];
DemoApp = __decorate([
    customElement("demo-app")
], DemoApp);
export { DemoApp };
//# sourceMappingURL=demo-app.js.map