@shuriken-ui/tailwind 0.0.1

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@shuriken-ui/tailwind",
+  "version": "0.0.1",
+  "license": "MIT",
+  "author": "Css Ninja <hello@cssninja.io> (https://cssninja.io)",
+  "repository": "shuriken-ui/tailwind",
+  "bugs": "https://github.com/shuriken-ui/tailwind/issues",
+  "homepage": "https://github.com/shuriken-ui/tailwind",
+  "keywords": [
+    "nuxt",
+    "nuxt3",
+    "ui",
+    "framework",
+    "library",
+    "components",
+    "tailwind",
+    "tailwindcss",
+    "design-system",
+    "module"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./preset": "./src/preset/index.ts",
+    "./config": "./src/tailwind.config.ts",
+    "./colors": "./src/colors.ts"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "lint": "run-s lint:eslint:fix lint:prettier:fix",
+    "lint:prettier": "prettier --check \"./**/*.(ts|vue|css|scss|md)\"",
+    "lint:prettier:fix": "prettier --write \"./**/*.(ts|vue|css|scss|md)\"",
+    "lint:eslint": "eslint -c .eslintrc.cjs --ext .vue,.ts .",
+    "lint:eslint:fix": "eslint -c .eslintrc.cjs --fix  --ext .vue,.ts .",
+    "test": "run-p test:*",
+    "test:lint": "run-s lint:eslint lint:prettier",
+    "release": "run-s test release:*",
+    "release:standard-version": "standard-version",
+    "release:publish": "git push --follow-tags origin main && npm publish",
+    "prepare": "simple-git-hooks"
+  },
+  "dependencies": {
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/typography": "^0.5.9",
+    "defu": "^6.1.2",
+    "tailwindcss": "^3.3.1"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.5.1",
+    "@commitlint/config-conventional": "^17.4.4",
+    "@types/node": "18.15.11",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "commitlint": "^17.5.1",
+    "eslint": "8.37.0",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-tailwindcss": "3.10.1",
+    "eslint-plugin-unicorn": "^46.0.0",
+    "lint-staged": "^13.2.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.7",
+    "simple-git-hooks": "^2.8.1",
+    "standard-version": "^9.5.0",
+    "typescript": "^5.0.2"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged",
+    "commit-msg": "pnpm commitlint -e -V "
+  },
+  "lint-staged": {
+    "*.ts?(x)": [
+      "eslint",
+      "prettier --parser=typescript --write"
+    ]
+  }
+}

package/src/colors.ts

@@ -0,0 +1 @@
+export {}

package/src/index.ts

@@ -0,0 +1,7 @@
+import type { Config } from 'tailwindcss'
+import { defu } from 'defu'
+import config from './tailwind.config'
+
+export function withShurikenUI(userConfig: Config) {
+  return defu(userConfig, config)
+}

package/src/plugins/components.ts

@@ -0,0 +1,170 @@
+import plugin from 'tailwindcss/plugin'
+
+export default plugin.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: {},
+      },
+    }
+  }
+)

package/src/preset/index.ts

@@ -0,0 +1,135 @@
+import type { Config } from 'tailwindcss'
+import colors from 'tailwindcss/colors'
+import typography from '@tailwindcss/typography'
+import aspectRatio from '@tailwindcss/aspect-ratio'
+import shurikenUIComponents from '../plugins/components'
+
+export default {
+  darkMode: 'class',
+  content: [],
+  plugins: [typography, aspectRatio, shurikenUIComponents],
+  theme: {
+    fontFamily: {
+      sans: ['Roboto Flex', 'sans-serif'],
+      heading: ['Inter', 'sans-serif'],
+      alt: ['Karla', 'sans-serif'],
+      mono: ['ui-monospace', 'monospace'],
+    },
+
+    extend: {
+      colors: {
+        muted: colors.slate,
+        primary: colors.violet,
+        info: colors.sky,
+        success: colors.teal,
+        warning: colors.amber,
+        danger: colors.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 }: any) => ({
+        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',
+      },
+    },
+  },
+} satisfies Config

package/src/tailwind.config.ts

@@ -0,0 +1,7 @@
+import type { Config } from 'tailwindcss'
+import shurikenUIPreset from './preset'
+
+export default {
+  content: [],
+  presets: [shurikenUIPreset],
+} satisfies Config