@nopwdio/ui/dist/styles/sementic.js

Nopwd Design System

import { css } from "lit";
export default css `
  :host {
    --np-border-radius: var(--np-core-border-radius-m);
    --np-border-radius-muted: var(--np-core-border-radius-s);
    --np-border-radius-emphasis: var(--np-core-border-radius-xl);

    --np-border-width: var(--np-core-border-width-xs);
    --np-border-width-muted: var(--np-core-border-width-xs);
    --np-border-width-emphasis: var(--np-core-border-width-s);

    --np-text-size: var(--np-core-font-size-m);
    --np-text-size-muted: var(--np-core-font-size-s);
    --np-text-size-emphasis: var(--np-core-font-size-l);

    --np-text-size-heading: var(--np-core-font-size-l);
    --np-text-size-heading-muted: var(--np-core-font-size-m);
    --np-text-size-heading-emphasis: var(--np-core-font-size-xl);

    --np-text-family: inter, system-ui, sans-serif;

    --np-text-weight: var(--np-core-font-weight-m);
    --np-text-weight-muted: var(--np-core-font-weight-s);
    --np-text-weight-emphasis: var(--np-core-font-weight-l);

    --np-text-weight-heading: var(--np-core-font-weight-l);
    --np-text-weight-heading-muted: var(--np-core-font-weight-m);
    --np-text-weight-heading-emphasis: var(--np-core-font-weight-xl);

    --np-padding: var(--np-core-spacing-s);
    --np-padding-muted: var(--np-core-spacing-xs);
    --np-padding-emphasis: var(--np-core-spacing-m);

    --np-gap: var(--np-core-spacing-s);
    --np-gap-muted: var(--np-core-spacing-xs);
    --np-gap-emphasis: var(--np-core-spacing-l);

    --np-transition-duration: var(--np-core-transition-m);
    --np-transition-duration-muted: var(--np-core-transition-s);
    --np-transition-duration-emphasis: var(--np-core-transition-l);
  }

  /* Color light */
  :host,
  :host([theme="light"]) {
    --np-fill-color-accent: var(--np-core-color-purple-500);
    --np-fill-color-accent-muted: var(--np-core-color-purple-300);
    --np-fill-color-accent-emphasis: var(--np-core-color-purple-700);
    --np-fill-color-warning: var(--np-core-color-orange-500);
    --np-fill-color-warning-muted: var(--np-core-color-orange-300);
    --np-fill-color-warning-emphasis: var(--np-core-color-orange-700);
    --np-fill-color-error: var(--np-core-color-red-500);
    --np-fill-color-error-muted: var(--np-core-color-red-300);
    --np-fill-color-error-emphasis: var(--np-core-color-red-700);
    --np-fill-color-confirm: var(--np-core-color-purple-500);
    --np-fill-color-confirm-muted: var(--np-core-color-purple-300);
    --np-fill-color-confirm-emphasis: var(--np-core-color-purple-700);

    --np-bg-color: var(--np-core-color-white-900);
    --np-bg-color-muted: var(--np-core-color-white-800);
    --np-bg-color-emphasis: var(--np-core-color-purple-100);

    --np-border-color: var(--np-core-color-white-100);
    --np-border-color-muted: var(--np-core-color-white-600);
    --np-border-color-emphasis: var(--np-core-color-black-100);

    --np-text-color: var(--np-core-color-black-800);
    --np-text-color-onfill: var(--np-core-color-white-900);
    --np-text-color-muted: var(--np-core-color-black-100);
    --np-text-color-emphasis: var(--np-core-color-black-900);

    --np-shadow: var(--np-core-shadow-m);
    --np-shadow-muted: var(--np-core-shadow-inset-s);
    --np-shadow-emphasis: var(--np-core-shadow-l);

    --np-shadow: 2px 2px 12px var(--np-core-color-black-100),
      -2px -2px 12px var(--np-core-color-white-700);
    --np-shadow-emphasis: 8px 8px 30px var(--np-core-color-black-500),
      -8px -8px 30px var(--np-core-color-white-500);
  }

  /* Color dark */
  :host([theme="dark"]),
  .host {
    --np-fill-color-accent: var(--np-core-color-purple-400);
    --np-fill-color-accent-muted: var(--np-core-color-purple-200);
    --np-fill-color-accent-emphasis: var(--np-core-color-purple-600);
    --np-fill-color-warning: var(--np-core-color-orange-400);
    --np-fill-color-warning-muted: var(--np-core-color-orange-200);
    --np-fill-color-warning-emphasis: var(--np-core-color-orange-600);
    --np-fill-color-error: var(--np-core-color-red-400);
    --np-fill-color-error-muted: var(--np-core-color-red-200);
    --np-fill-color-error-emphasis: var(--np-core-color-red-600);
    --np-fill-color-confirm: var(--np-core-color-purple-400);
    --np-fill-color-confirm-muted: var(--np-core-color-purple-200);
    --np-fill-color-confirm-emphasis: var(--np-core-color-purple-600);

    --np-bg-color: var(--np-core-color-black-900);
    --np-bg-color-muted: var(--np-core-color-black-700);
    --np-bg-color-emphasis: var(--np-core-color-purple-900);

    --np-border-color: var(--np-core-color-black-200);
    --np-border-color-muted: var(--np-core-color-black-500);
    --np-border-color-emphasis: var(--np-core-color-white-100);

    --np-text-color: var(--np-core-color-white-600);
    --np-text-color-muted: var(--np-core-color-white-100);
    --np-text-color-emphasis: var(--np-core-color-white-900);

    --np-shadow: 2px 2px 12px var(--np-core-color-black-900),
      -2px -2px 12px var(--np-core-color-black-900);

    --np-shadow-muted: var(--np-core-shadow-s);
    --np-shadow-emphasis: var(--np-core-shadow-l);
  }
`;
//# sourceMappingURL=sementic.js.map