@shuriken-ui/tailwind 0.0.1 → 0.0.2

package/dist/preset.cjs

@@ -0,0 +1,294 @@
+'use strict';
+
+const colors = require('tailwindcss/colors');
+const typography = require('@tailwindcss/typography');
+const aspectRatio = require('@tailwindcss/aspect-ratio');
+const plugin = require('tailwindcss/plugin');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const colors__default = /*#__PURE__*/_interopDefaultCompat(colors);
+const typography__default = /*#__PURE__*/_interopDefaultCompat(typography);
+const aspectRatio__default = /*#__PURE__*/_interopDefaultCompat(aspectRatio);
+const plugin__default = /*#__PURE__*/_interopDefaultCompat(plugin);
+
+const shurikenUIComponents = plugin__default.withOptions(
+  function(options = {}) {
+    return function({ addComponents }) {
+      addComponents({
+        ".placeload": {
+          position: "relative",
+          background: "linear-gradient( to right, rgb(0 0 0 / 7%) 8% ,rgb(0 0 0 / 15%) 18%, rgb(0 0 0 / 7%) 33%)",
+          backgroundSize: "1200px 104px"
+        },
+        ".dark .placeload": {
+          position: "relative",
+          background: "linear-gradient(to right, rgb(255 255 255 / 15%) 8%, rgb(255 255 255 / 24%) 18%, rgb(255 255 255 / 15%) 33%)",
+          backgroundSize: "1200px 104px"
+        }
+      });
+      addComponents({
+        ".nui-focus": {
+          "@apply outline-1 outline-dashed outline-offset-2": {},
+          "@apply outline-transparent": {},
+          "&:focus-within": {
+            "@apply outline-muted-300 dark:outline-muted-600": {},
+            "@apply outline-dashed ring-0": {}
+          },
+          "&:focus-visible": {
+            "@apply outline-2": {}
+          }
+        }
+      });
+      addComponents({
+        ".nui-mask": {
+          "mask-size": "contain",
+          "mask-repeat": "no-repeat",
+          "mask-position": "center"
+        },
+        ".nui-mask-hex": {
+          "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE4MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNjQuNzg2IDE4MS40Yy05LjE5NiAwLTIwLjA2My02LjY4Ny0yNS4wNzktMTQuMjFMMy43NjIgMTA1LjMzYy01LjAxNi04LjM2LTUuMDE2LTIwLjkgMC0yOS4yNTlsMzUuOTQ1LTYxLjg2QzQ0LjcyMyA1Ljg1MSA1NS41OSAwIDY0Ljc4NiAwaDcxLjA1NWM5LjE5NiAwIDIwLjA2MyA2LjY4OCAyNS4wNzkgMTQuMjExbDM1Ljk0NSA2MS44NmM0LjE4IDguMzYgNC4xOCAyMC44OTkgMCAyOS4yNThsLTM1Ljk0NSA2MS44NmMtNC4xOCA4LjM2LTE1Ljg4MyAxNC4yMTEtMjUuMDc5IDE0LjIxMUg2NC43ODZ6Ii8+PC9zdmc+')"
+        },
+        ".nui-mask-hexed": {
+          "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgyIiBoZWlnaHQ9IjIwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjMgNjUuNDg2YzAtOS4xOTYgNi42ODctMjAuMDYzIDE0LjIxMS0yNS4wNzhsNjEuODYtMzUuOTQ2YzguMzYtNS4wMTYgMjAuODk5LTUuMDE2IDI5LjI1OCAwbDYxLjg2IDM1Ljk0NmM4LjM2IDUuMDE1IDE0LjIxMSAxNS44ODIgMTQuMjExIDI1LjA3OHY3MS4wNTVjMCA5LjE5Ni02LjY4NyAyMC4wNjMtMTQuMjExIDI1LjA3OWwtNjEuODYgMzUuOTQ1Yy04LjM2IDQuMTgtMjAuODk5IDQuMTgtMjkuMjU4IDBsLTYxLjg2LTM1Ljk0NUM2LjE1MSAxNTcuNDQuMyAxNDUuNzM3LjMgMTM2LjU0VjY1LjQ4NnoiLz48L3N2Zz4=')"
+        },
+        ".nui-mask-deca": {
+          "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMGw1OC43NzkgMTkuMDk4IDM2LjMyNyA1MHY2MS44MDRsLTM2LjMyNyA1MEw5NiAyMDBsLTU4Ljc3OS0xOS4wOTgtMzYuMzI3LTUwVjY5LjA5OGwzNi4zMjctNTB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=')"
+        },
+        ".nui-mask-blob": {
+          "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==')"
+        },
+        ".nui-mask-diamond": {
+          "mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBsMTAwIDEwMC0xMDAgMTAwTDAgMTAweiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+')"
+        }
+      });
+      addComponents({
+        ".nui-text-white": {
+          "@apply text-white dark:text-black": {}
+        },
+        ".nui-text-50": {
+          "@apply text-muted-50 dark:text-muted-900": {}
+        },
+        ".nui-text-100": {
+          "@apply text-muted-100 dark:text-muted-900": {}
+        },
+        ".nui-text-200": {
+          "@apply text-muted-200 dark:text-muted-800": {}
+        },
+        ".nui-text-300": {
+          "@apply text-muted-300 dark:text-muted-700": {}
+        },
+        ".nui-text-400": {
+          "@apply text-muted-400 dark:text-muted-600": {}
+        },
+        ".nui-text-500": {
+          "@apply text-muted-500 dark:text-muted-500": {}
+        },
+        ".nui-text-600": {
+          "@apply text-muted-600 dark:text-muted-400": {}
+        },
+        ".nui-text-700": {
+          "@apply text-muted-700 dark:text-muted-300": {}
+        },
+        ".nui-text-800": {
+          "@apply text-muted-800 dark:text-muted-200": {}
+        },
+        ".nui-text-900": {
+          "@apply text-muted-900 dark:text-muted-100": {}
+        },
+        ".nui-text-black": {
+          "@apply text-black dark:text-white": {}
+        }
+      });
+      addComponents({
+        ".nui-bg-white": {
+          "@apply bg-white dark:bg-muted-900": {}
+        },
+        ".nui-bg-50": {
+          "@apply bg-muted-50 dark:bg-muted-900": {}
+        },
+        ".nui-bg-100": {
+          "@apply bg-muted-100 dark:bg-muted-900": {}
+        },
+        ".nui-bg-200": {
+          "@apply bg-muted-200 dark:bg-muted-800": {}
+        },
+        ".nui-bg-300": {
+          "@apply bg-muted-300 dark:bg-muted-700": {}
+        },
+        ".nui-bg-400": {
+          "@apply bg-muted-400 dark:bg-muted-600": {}
+        },
+        ".nui-bg-500": {
+          "@apply bg-muted-500 dark:bg-muted-500": {}
+        },
+        ".nui-bg-600": {
+          "@apply bg-muted-600 dark:bg-muted-400": {}
+        },
+        ".nui-bg-700": {
+          "@apply bg-muted-700 dark:bg-muted-300": {}
+        },
+        ".nui-bg-800": {
+          "@apply bg-muted-800 dark:bg-muted-200": {}
+        },
+        ".nui-bg-900": {
+          "@apply bg-muted-900 dark:bg-muted-100": {}
+        },
+        ".nui-bg-black": {
+          "@apply bg-muted-900 dark:bg-white": {}
+        }
+      });
+      addComponents({
+        ".nui-label": {
+          "@apply inline-block font-alt leading-none text-muted-400 dark:text-muted-400/80": {}
+        }
+      });
+      addComponents({
+        ".nui-dropdown-divider": {
+          "@apply my-2 block h-px w-full border-t border-muted-200 dark:border-muted-600": {}
+        }
+      });
+      addComponents({
+        ".nui-mark": {
+          "@apply bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-200": {}
+        }
+      });
+    };
+  },
+  function(options) {
+    return {
+      theme: {
+        nui: {}
+      }
+    };
+  }
+);
+
+const shurikenUIPreset = {
+  darkMode: "class",
+  content: [],
+  plugins: [typography__default, aspectRatio__default, shurikenUIComponents],
+  theme: {
+    fontFamily: {
+      sans: ["Roboto Flex", "sans-serif"],
+      heading: ["Inter", "sans-serif"],
+      alt: ["Karla", "sans-serif"],
+      mono: ["ui-monospace", "monospace"]
+    },
+    extend: {
+      colors: {
+        muted: colors__default.slate,
+        primary: colors__default.violet,
+        info: colors__default.sky,
+        success: colors__default.teal,
+        warning: colors__default.amber,
+        danger: colors__default.rose
+      },
+      screens: {
+        xs: { max: "639px" },
+        lg: "1025px",
+        ptablet: {
+          raw: "(min-width: 768px) and (max-width: 1024px) and (orientation: portrait)"
+        },
+        ltablet: {
+          raw: "(min-width: 768px) and (max-width: 1024px) and (orientation: landscape)"
+        }
+      },
+      typography: ({ theme }) => ({
+        primary: {
+          css: {
+            "--tw-prose-links": theme("colors.primary.600"),
+            "--tw-prose-quote-borders": theme("colors.primary.600"),
+            "--tw-prose-invert-links": theme("colors.primary.500"),
+            "--tw-prose-invert-quote-borders": theme("colors.primary.500")
+          }
+        },
+        muted: {
+          css: {
+            "--tw-prose-body": theme("colors.muted.700"),
+            "--tw-prose-headings": theme("colors.muted.800"),
+            "--tw-prose-lead": theme("colors.muted.600"),
+            "--tw-prose-bold": theme("colors.muted.800"),
+            "--tw-prose-counters": theme("colors.muted.500"),
+            "--tw-prose-bullets": theme("colors.muted.300"),
+            "--tw-prose-hr": theme("colors.muted.200"),
+            "--tw-prose-quotes": theme("colors.muted.500"),
+            "--tw-prose-captions": theme("colors.muted.500"),
+            "--tw-prose-code": theme("colors.muted.800"),
+            "--tw-prose-pre-code": theme("colors.muted.800"),
+            "--tw-prose-pre-bg": theme("colors.muted.100"),
+            "--tw-prose-th-borders": theme("colors.muted.300"),
+            "--tw-prose-td-borders": theme("colors.muted.200"),
+            "--tw-prose-invert-body": theme("colors.muted.400"),
+            "--tw-prose-invert-headings": theme("colors.muted.100"),
+            "--tw-prose-invert-lead": theme("colors.muted.300"),
+            "--tw-prose-invert-bold": theme("colors.muted.300"),
+            "--tw-prose-invert-counters": theme("colors.muted.400"),
+            "--tw-prose-invert-bullets": theme("colors.muted.400"),
+            "--tw-prose-invert-hr": theme("colors.muted.800"),
+            "--tw-prose-invert-quotes": theme("colors.muted.200"),
+            "--tw-prose-invert-captions": theme("colors.muted.400"),
+            "--tw-prose-invert-code": theme("colors.muted.200"),
+            "--tw-prose-invert-pre-code": theme("colors.muted.200"),
+            "--tw-prose-invert-pre-bg": theme("colors.muted.800"),
+            "--tw-prose-invert-th-borders": theme("colors.muted.600"),
+            "--tw-prose-invert-td-borders": theme("colors.muted.700")
+          }
+        },
+        css: {
+          h1: {
+            fontWeight: 700
+          },
+          h2: {
+            fontWeight: 700
+          },
+          h3: {
+            fontWeight: 500
+          },
+          h4: {
+            fontWeight: 500
+          },
+          li: {
+            fontSize: "1.15rem",
+            padding: "0.35rem 0"
+          },
+          em: {
+            fontSize: "1.1rem",
+            lineHeight: 1
+          },
+          blockquote: {
+            fontSize: "1.1rem",
+            lineHeight: 1.4,
+            fontWeight: 500,
+            padding: "1.75rem"
+          },
+          pre: {
+            fontFamily: theme("fontFamily.mono")
+          },
+          code: {
+            fontFamily: theme("fontFamily.mono"),
+            padding: "0.35rem",
+            fontWeight: 600,
+            fontSize: "0.95rem !important"
+          }
+        }
+      }),
+      keyframes: {
+        indeterminate: {
+          "0%": { "margin-left": "-10%" },
+          "100%": { "margin-left": "100%" }
+        },
+        placeload: {
+          "0%": { "background-position": "-468px 0" },
+          "100%": { "background-position": "468px 0" }
+        }
+      },
+      animation: {
+        indeterminate: "indeterminate 1s cubic-bezier(0.4, 0, 0.2, 1) infinite",
+        placeload: "placeload 1s linear infinite forwards"
+      }
+    }
+  }
+};
+
+module.exports = shurikenUIPreset;

package/dist/preset.d.ts

@@ -0,0 +1,222 @@
+import * as tailwindcss_types_config from 'tailwindcss/types/config';
+import { Config } from 'tailwindcss';
+import _tailwindcss_typography__default from '@tailwindcss/typography';
+
+declare const _default: {
+    darkMode: "class";
+    content: never[];
+    plugins: (typeof _tailwindcss_typography__default | {
+        handler: () => void;
+    } | {
+        (options: unknown): {
+            handler: tailwindcss_types_config.PluginCreator;
+            config?: Partial<Config> | undefined;
+        };
+        __isOptionsFunction: true;
+    })[];
+    theme: {
+        fontFamily: {
+            sans: [string, string];
+            heading: [string, string];
+            alt: [string, string];
+            mono: [string, string];
+        };
+        extend: {
+            colors: {
+                muted: {
+                    '50': "#f8fafc";
+                    '100': "#f1f5f9";
+                    '200': "#e2e8f0";
+                    '300': "#cbd5e1";
+                    '400': "#94a3b8";
+                    '500': "#64748b";
+                    '600': "#475569";
+                    '700': "#334155";
+                    '800': "#1e293b";
+                    '900': "#0f172a";
+                    '950': "#020617";
+                };
+                primary: {
+                    '50': "#f5f3ff";
+                    '100': "#ede9fe";
+                    '200': "#ddd6fe";
+                    '300': "#c4b5fd";
+                    '400': "#a78bfa";
+                    '500': "#8b5cf6";
+                    '600': "#7c3aed";
+                    '700': "#6d28d9";
+                    '800': "#5b21b6";
+                    '900': "#4c1d95";
+                    '950': "#2e1065";
+                };
+                info: {
+                    '50': "#f0f9ff";
+                    '100': "#e0f2fe";
+                    '200': "#bae6fd";
+                    '300': "#7dd3fc";
+                    '400': "#38bdf8";
+                    '500': "#0ea5e9";
+                    '600': "#0284c7";
+                    '700': "#0369a1";
+                    '800': "#075985";
+                    '900': "#0c4a6e";
+                    '950': "#082f49";
+                };
+                success: {
+                    '50': "#f0fdfa";
+                    '100': "#ccfbf1";
+                    '200': "#99f6e4";
+                    '300': "#5eead4";
+                    '400': "#2dd4bf";
+                    '500': "#14b8a6";
+                    '600': "#0d9488";
+                    '700': "#0f766e";
+                    '800': "#115e59";
+                    '900': "#134e4a";
+                    '950': "#042f2e";
+                };
+                warning: {
+                    '50': "#fffbeb";
+                    '100': "#fef3c7";
+                    '200': "#fde68a";
+                    '300': "#fcd34d";
+                    '400': "#fbbf24";
+                    '500': "#f59e0b";
+                    '600': "#d97706";
+                    '700': "#b45309";
+                    '800': "#92400e";
+                    '900': "#78350f";
+                    '950': "#451a03";
+                };
+                danger: {
+                    '50': "#fff1f2";
+                    '100': "#ffe4e6";
+                    '200': "#fecdd3";
+                    '300': "#fda4af";
+                    '400': "#fb7185";
+                    '500': "#f43f5e";
+                    '600': "#e11d48";
+                    '700': "#be123c";
+                    '800': "#9f1239";
+                    '900': "#881337";
+                    '950': "#4c0519";
+                };
+            };
+            screens: {
+                xs: {
+                    max: string;
+                };
+                lg: string;
+                ptablet: {
+                    raw: string;
+                };
+                ltablet: {
+                    raw: string;
+                };
+            };
+            typography: ({ theme }: any) => {
+                primary: {
+                    css: {
+                        '--tw-prose-links': any;
+                        '--tw-prose-quote-borders': any;
+                        '--tw-prose-invert-links': any;
+                        '--tw-prose-invert-quote-borders': any;
+                    };
+                };
+                muted: {
+                    css: {
+                        '--tw-prose-body': any;
+                        '--tw-prose-headings': any;
+                        '--tw-prose-lead': any;
+                        '--tw-prose-bold': any;
+                        '--tw-prose-counters': any;
+                        '--tw-prose-bullets': any;
+                        '--tw-prose-hr': any;
+                        '--tw-prose-quotes': any;
+                        '--tw-prose-captions': any;
+                        '--tw-prose-code': any;
+                        '--tw-prose-pre-code': any;
+                        '--tw-prose-pre-bg': any;
+                        '--tw-prose-th-borders': any;
+                        '--tw-prose-td-borders': any;
+                        '--tw-prose-invert-body': any;
+                        '--tw-prose-invert-headings': any;
+                        '--tw-prose-invert-lead': any;
+                        '--tw-prose-invert-bold': any;
+                        '--tw-prose-invert-counters': any;
+                        '--tw-prose-invert-bullets': any;
+                        '--tw-prose-invert-hr': any;
+                        '--tw-prose-invert-quotes': any;
+                        '--tw-prose-invert-captions': any;
+                        '--tw-prose-invert-code': any;
+                        '--tw-prose-invert-pre-code': any;
+                        '--tw-prose-invert-pre-bg': any;
+                        '--tw-prose-invert-th-borders': any;
+                        '--tw-prose-invert-td-borders': any;
+                    };
+                };
+                css: {
+                    h1: {
+                        fontWeight: number;
+                    };
+                    h2: {
+                        fontWeight: number;
+                    };
+                    h3: {
+                        fontWeight: number;
+                    };
+                    h4: {
+                        fontWeight: number;
+                    };
+                    li: {
+                        fontSize: string;
+                        padding: string;
+                    };
+                    em: {
+                        fontSize: string;
+                        lineHeight: number;
+                    };
+                    blockquote: {
+                        fontSize: string;
+                        lineHeight: number;
+                        fontWeight: number;
+                        padding: string;
+                    };
+                    pre: {
+                        fontFamily: any;
+                    };
+                    code: {
+                        fontFamily: any;
+                        padding: string;
+                        fontWeight: number;
+                        fontSize: string;
+                    };
+                };
+            };
+            keyframes: {
+                indeterminate: {
+                    '0%': {
+                        'margin-left': string;
+                    };
+                    '100%': {
+                        'margin-left': string;
+                    };
+                };
+                placeload: {
+                    '0%': {
+                        'background-position': string;
+                    };
+                    '100%': {
+                        'background-position': string;
+                    };
+                };
+            };
+            animation: {
+                indeterminate: string;
+                placeload: string;
+            };
+        };
+    };
+};
+
+export { _default as default };