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

Nopwd Design System

import { css } from "lit";
export default css `
  :host {
    display: flex;
    flex-flow: column;
    width: 100wh;
    transition: all var(--np-transition-duration) ease;

    background-color: var(--np-bg-color);
    color: var(--np-text-color);
    container-type: inline-size;
  }

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    padding: var(--np-padding);

    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: var(--np-border-width) solid var(--np-border-color-muted);
  }

  header h1 {
    display: flex;
    gap: var(--np-gap-muted);
    align-items: center;

    margin: 0;
    font-weight: var(--np-text-weight);
    font-size: var(--np-text-size-muted);
  }

  ui-colors,
  ui-text-tokens,
  ui-border-tokens {
    margin: var(--np-gap-emphasis) 0;
  }

  strong {
    font-weight: var(--np-text-weight-emphasis);
  }

  main {
    padding: var(--np-padding);
    max-width: 800px;
    margin: 0 auto;
  }

  ui-mobile {
    max-width: 200px;
  }

  ui-darkmode {
    max-width: 200px;
  }

  h1 {
    margin: var(--np-gap-emphasis) 0 var(--np-gap) 0;
    font-size: var(--np-text-size-heading-emphasis);
    font-weight: var(--np-text-weight-heading-emphasis);
  }

  h2 {
    margin: var(--np-gap-emphasis) 0 var(--np-gap) 0;
    font-size: var(--np-text-size-heading);
    font-weight: var(--np-text-weight-heading-emphasis);
  }

  h3 {
    margin: var(--np-gap-emphasis) 0 var(--np-gap) 0;
    font-size: var(--np-text-size-heading-muted);
    font-weight: var(--np-text-weight-heading-emphasis);
  }

  h4 {
    margin: var(--np-gap-emphasis) 0 var(--np-gap) 0;
    font-size: var(--np-text-size-heading-muted);
    font-weight: var(--np-text-weight-heading);
  }
  p {
    margin: var(--np-gap-emphasis) 0;
    font-size: var(--np-text-size);
    font-weight: var(--np-text-weight);
  }

  a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: currentColor;
  }

  @media (min-width: 800px) {
    main {
      max-width: 800px;
    }
  }

  .icon {
    width: var(--np-text-size);
    height: var(--np-text-size);
  }
`;
//# sourceMappingURL=demo-app.styles.js.map