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

Nopwd Design System

import { css } from "lit";
export default css `
  :host {
    --np-core-color-green-900: hsla(117, 40%, 10%, 1);
    --np-core-color-green-800: hsla(117, 40%, 20%, 1);
    --np-core-color-green-700: hsla(117, 40%, 30%, 1);
    --np-core-color-green-600: hsla(117, 40%, 40%, 1);
    --np-core-color-green-500: hsla(117, 40%, 50%, 1);
    --np-core-color-green-400: hsla(117, 40%, 60%, 1);
    --np-core-color-green-300: hsla(117, 40%, 70%, 1);
    --np-core-color-green-200: hsla(117, 40%, 80%, 1);
    --np-core-color-green-100: hsla(117, 40%, 90%, 1);

    --np-core-color-red-900: hsla(2, 69%, 10%, 1);
    --np-core-color-red-800: hsla(2, 69%, 20%, 1);
    --np-core-color-red-700: hsla(2, 69%, 30%, 1);
    --np-core-color-red-600: hsla(2, 69%, 40%, 1);
    --np-core-color-red-500: hsla(2, 69%, 50%, 1);
    --np-core-color-red-400: hsla(2, 69%, 60%, 1);
    --np-core-color-red-300: hsla(2, 69%, 70%, 1);
    --np-core-color-red-200: hsla(2, 69%, 80%, 1);
    --np-core-color-red-100: hsla(2, 69%, 90%, 1);

    --np-core-color-blue-900: hsla(208, 80%, 10%, 1);
    --np-core-color-blue-800: hsla(208, 80%, 20%, 1);
    --np-core-color-blue-700: hsla(208, 80%, 30%, 1);
    --np-core-color-blue-600: hsla(208, 80%, 40%, 1);
    --np-core-color-blue-500: hsla(208, 80%, 50%, 1);
    --np-core-color-blue-400: hsla(208, 80%, 60%, 1);
    --np-core-color-blue-300: hsla(208, 80%, 70%, 1);
    --np-core-color-blue-200: hsla(208, 80%, 80%, 1);
    --np-core-color-blue-100: hsla(208, 80%, 90%, 1);

    --np-core-color-gray-900: hsla(270, 10%, 0%, 1);
    --np-core-color-gray-800: hsla(270, 10%, 10%, 1);
    --np-core-color-gray-700: hsla(270, 10%, 20%, 1);
    --np-core-color-gray-600: hsla(270, 10%, 30%, 1);
    --np-core-color-gray-500: hsla(270, 10%, 50%, 1);
    --np-core-color-gray-400: hsla(270, 10%, 70%, 1);
    --np-core-color-gray-300: hsla(270, 10%, 80%, 1);
    --np-core-color-gray-200: hsla(270, 10%, 90%, 1);
    --np-core-color-gray-100: hsla(270, 10%, 100%, 1);

    --np-core-color-purple-900: hsla(270, 69%, 15%, 1);
    --np-core-color-purple-800: hsla(270, 69%, 25%, 1);
    --np-core-color-purple-700: hsla(270, 69%, 35%, 1);
    --np-core-color-purple-600: hsla(270, 69%, 45%, 1);
    --np-core-color-purple-500: hsla(270, 69%, 55%, 1);
    --np-core-color-purple-400: hsla(270, 69%, 65%, 1);
    --np-core-color-purple-300: hsla(270, 69%, 75%, 1);
    --np-core-color-purple-200: hsla(270, 69%, 85%, 1);
    --np-core-color-purple-100: hsla(270, 69%, 95%, 1);

    --np-core-color-pink-900: hsla(330, 100%, 15%, 1);
    --np-core-color-pink-800: hsla(330, 100%, 25%, 1);
    --np-core-color-pink-700: hsla(330, 100%, 35%, 1);
    --np-core-color-pink-600: hsla(330, 100%, 45%, 1);
    --np-core-color-pink-500: hsla(330, 100%, 55%, 1);
    --np-core-color-pink-400: hsla(330, 100%, 65%, 1);
    --np-core-color-pink-300: hsla(330, 100%, 75%, 1);
    --np-core-color-pink-200: hsla(330, 100%, 85%, 1);
    --np-core-color-pink-100: hsla(330, 100%, 95%, 1);

    --np-core-color-yellow-900: hsla(70, 100%, 10%, 1);
    --np-core-color-yellow-800: hsla(70, 100%, 20%, 1);
    --np-core-color-yellow-700: hsla(70, 100%, 30%, 1);
    --np-core-color-yellow-600: hsla(70, 100%, 40%, 1);
    --np-core-color-yellow-500: hsla(70, 100%, 50%, 1);
    --np-core-color-yellow-400: hsla(70, 100%, 60%, 1);
    --np-core-color-yellow-300: hsla(70, 100%, 70%, 1);
    --np-core-color-yellow-200: hsla(70, 100%, 80%, 1);
    --np-core-color-yellow-100: hsla(70, 100%, 90%, 1);

    --np-core-color-orange-900: hsla(39, 89%, 10%, 1);
    --np-core-color-orange-800: hsla(39, 89%, 20%, 1);
    --np-core-color-orange-700: hsla(39, 89%, 30%, 1);
    --np-core-color-orange-600: hsla(39, 89%, 40%, 1);
    --np-core-color-orange-500: hsla(39, 89%, 50%, 1);
    --np-core-color-orange-400: hsla(39, 89%, 60%, 1);
    --np-core-color-orange-300: hsla(39, 89%, 70%, 1);
    --np-core-color-orange-200: hsla(39, 89%, 80%, 1);
    --np-core-color-orange-100: hsla(39, 89%, 90%, 1);

    --np-core-color-white-900: hsla(270, 10%, 100%, 1);
    --np-core-color-white-800: hsla(270, 10%, 95%, 1);
    --np-core-color-white-700: hsla(270, 10%, 90%, 1);
    --np-core-color-white-600: hsla(270, 10%, 85%, 1);
    --np-core-color-white-500: hsla(270, 10%, 80%, 1);
    --np-core-color-white-400: hsla(270, 10%, 75%, 1);
    --np-core-color-white-300: hsla(270, 10%, 70%, 1);
    --np-core-color-white-200: hsla(270, 10%, 65%, 1);
    --np-core-color-white-100: hsla(270, 10%, 60%, 1);

    --np-core-color-black-900: hsla(270, 10%, 0%, 1);
    --np-core-color-black-800: hsla(270, 10%, 5%, 1);
    --np-core-color-black-700: hsla(270, 10%, 10%, 1);
    --np-core-color-black-600: hsla(270, 10%, 15%, 1);
    --np-core-color-black-500: hsla(270, 10%, 20%, 1);
    --np-core-color-black-400: hsla(270, 10%, 25%, 1);
    --np-core-color-black-300: hsla(270, 10%, 30%, 1);
    --np-core-color-black-200: hsla(270, 10%, 35%, 1);
    --np-core-color-black-100: hsla(270, 10%, 40%, 1);
  }

  :host {
    --np-core-gradient-purple-pink: linear-gradient(
      45deg,
      var(--np-core-color-purple-m),
      var(--np-core-color-pink-m)
    );
    --np-core-gradient-blue-green: linear-gradient(
      45deg,
      var(--np-core-color-blue-m),
      var(--np-core-color-green-m)
    );
  }
  /* Spacing */
  :host {
    --np-core-spacing-xs: 0.2em;
    --np-core-spacing-s: 0.5em;
    --np-core-spacing-m: 1em;
    --np-core-spacing-l: 1.5em;
    --np-core-spacing-xl: 2em;
  }

  /* Border */

  :host {
    --np-core-border-width-xs: 1px;
    --np-core-border-width-s: 2px;
    --np-core-border-width-m: 3px;
    --np-core-border-width-l: 4px;
    --np-core-border-width-xl: 5px;
  }

  :host {
    --np-core-border-radius-xs: 0.1em;
    --np-core-border-radius-s: 0.2em;
    --np-core-border-radius-m: 0.4em;
    --np-core-border-radius-l: 0.8em;
    --np-core-border-radius-xl: 1.6em;
  }

  :host {
    --np-core-font-size-xs: 0.6em;
    --np-core-font-size-s: 0.8em;
    --np-core-font-size-m: 1em;
    --np-core-font-size-l: 1.5em;
    --np-core-font-size-xl: 2.5em;

    --np-core-font-weight-xs: 100;
    --np-core-font-weight-s: 200;
    --np-core-font-weight-m: 400;
    --np-core-font-weight-l: 600;
    --np-core-font-weight-xl: 800;
  }

  /* Transition */
  :host {
    --np-core-transition-xs: 50ms;
    --np-core-transition-s: 150ms;
    --np-core-transition-m: 250ms;
    --np-core-transition-l: 500ms;
    --np-core-transition-xl: 1000ms;
  }

  /* Shadow */
  :host {
    --np-core-shadow-s: 0px 4px 8px -2px rgba(26, 26, 26, 0.2);
  }

  :host {
    --np-core-shadow-inset-s: 0px 1px 2px 0px rgba(26, 26, 26, 0.15) inset,
      0px 2px 2px 0px rgba(0, 0, 0, 0.2) inset;
    --np-core-shadow-inset-m: 0px 2px 1px 0px rgba(26, 26, 26, 0.2) inset,
      1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset, -1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset;
  }

  :host {
    --np-core-icon-gap: var(--np-core-padding-s);
  }
`;
//# sourceMappingURL=core.js.map