mljr-css 0.1.0

package/dist/plugin.d.cts

@@ -0,0 +1,73 @@
+import * as tailwindcss_types_config from 'tailwindcss/types/config';
+import { Config } from 'tailwindcss';
+
+interface MljrPluginOptions {
+    /** Prefix for custom CSS classes (default: 'mljr') */
+    prefix?: string;
+    /** Enable dark mode support (default: true) */
+    darkMode?: boolean;
+}
+declare const defaultColors: {
+    primary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    secondary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    accent: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+};
+/**
+ * MLJR CSS Tailwind Plugin
+ *
+ * A TailwindCSS plugin that provides the MLJR color scheme
+ * and design system utilities.
+ *
+ * @example
+ * ```js
+ * // tailwind.config.js
+ * import mljrPlugin from 'mljr-css';
+ *
+ * export default {
+ *   plugins: [mljrPlugin()],
+ * }
+ * ```
+ */
+declare const mljrPlugin: (options?: MljrPluginOptions) => {
+    handler: tailwindcss_types_config.PluginCreator;
+    config?: Partial<tailwindcss_types_config.Config>;
+};
+declare const mljrPreset: Partial<Config>;
+
+export { type MljrPluginOptions, mljrPlugin as default, defaultColors, mljrPlugin, mljrPreset };

package/dist/plugin.d.ts

@@ -0,0 +1,73 @@
+import * as tailwindcss_types_config from 'tailwindcss/types/config';
+import { Config } from 'tailwindcss';
+
+interface MljrPluginOptions {
+    /** Prefix for custom CSS classes (default: 'mljr') */
+    prefix?: string;
+    /** Enable dark mode support (default: true) */
+    darkMode?: boolean;
+}
+declare const defaultColors: {
+    primary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    secondary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    accent: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+};
+/**
+ * MLJR CSS Tailwind Plugin
+ *
+ * A TailwindCSS plugin that provides the MLJR color scheme
+ * and design system utilities.
+ *
+ * @example
+ * ```js
+ * // tailwind.config.js
+ * import mljrPlugin from 'mljr-css';
+ *
+ * export default {
+ *   plugins: [mljrPlugin()],
+ * }
+ * ```
+ */
+declare const mljrPlugin: (options?: MljrPluginOptions) => {
+    handler: tailwindcss_types_config.PluginCreator;
+    config?: Partial<tailwindcss_types_config.Config>;
+};
+declare const mljrPreset: Partial<Config>;
+
+export { type MljrPluginOptions, mljrPlugin as default, defaultColors, mljrPlugin, mljrPreset };

package/dist/plugin.js

@@ -0,0 +1,102 @@
+// src/plugin.ts
+import plugin from "tailwindcss/plugin";
+var defaultColors = {
+  primary: {
+    50: "#e6f3ff",
+    100: "#cce7ff",
+    200: "#99cfff",
+    300: "#66b7ff",
+    400: "#339eff",
+    500: "#0080ff",
+    600: "#0066cc",
+    700: "#004d99",
+    800: "#003366",
+    900: "#001a33",
+    950: "#000d1a"
+  },
+  secondary: {
+    50: "#fff4e6",
+    100: "#ffe8cc",
+    200: "#ffd199",
+    300: "#ffba66",
+    400: "#ffa333",
+    500: "#ff8c00",
+    600: "#cc7000",
+    700: "#995400",
+    800: "#663800",
+    900: "#331c00",
+    950: "#1a0e00"
+  },
+  accent: {
+    50: "#f5e6ff",
+    100: "#ebccff",
+    200: "#d699ff",
+    300: "#c266ff",
+    400: "#ad33ff",
+    500: "#9900ff",
+    600: "#7a00cc",
+    700: "#5c0099",
+    800: "#3d0066",
+    900: "#1f0033",
+    950: "#0f001a"
+  }
+};
+var mljrPlugin = (options = {}) => {
+  const { darkMode = true } = options;
+  return plugin(
+    function({ addUtilities }) {
+      addUtilities({
+        ".mljr-focus-ring": {
+          "&:focus-visible": {
+            outline: "2px solid var(--mljr-ring)",
+            "outline-offset": "2px"
+          }
+        }
+      });
+    },
+    {
+      // Extend Tailwind theme
+      theme: {
+        extend: {
+          colors: {
+            primary: defaultColors.primary,
+            secondary: defaultColors.secondary,
+            accent: defaultColors.accent
+          },
+          fontFamily: {
+            sans: ["Inter", "system-ui", "-apple-system", "sans-serif"],
+            display: ["Inter", "system-ui", "sans-serif"],
+            mono: ["JetBrains Mono", "Fira Code", "monospace"]
+          },
+          borderRadius: {
+            DEFAULT: "0.375rem"
+          }
+        }
+      }
+    }
+  );
+};
+var mljrPreset = {
+  darkMode: ["class", '[data-theme="dark"]'],
+  theme: {
+    extend: {
+      colors: {
+        primary: defaultColors.primary,
+        secondary: defaultColors.secondary,
+        accent: defaultColors.accent
+      },
+      fontFamily: {
+        display: ["Inter", "system-ui", "sans-serif"],
+        sans: ["Inter", "system-ui", "-apple-system", "sans-serif"],
+        mono: ["JetBrains Mono", "Fira Code", "monospace"]
+      }
+    }
+  }
+};
+var plugin_default = mljrPlugin;
+export {
+  plugin_default as default,
+  defaultColors,
+  mljrPlugin,
+  mljrPreset
+};

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "mljr-css",
+  "version": "0.1.0",
+  "description": "A TailwindCSS-based CSS framework with orange/purple color scheme",
+  "type": "module",
+  "main": "./dist/plugin.cjs",
+  "module": "./dist/plugin.js",
+  "types": "./dist/plugin.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/plugin.d.ts",
+      "import": "./dist/plugin.js",
+      "require": "./dist/plugin.cjs"
+    },
+    "./css": "./dist/mljr.css",
+    "./css/min": "./dist/mljr.min.css",
+    "./src/*": "./src/*",
+    "./plugin": {
+      "types": "./dist/plugin.d.ts",
+      "import": "./dist/plugin.js",
+      "require": "./dist/plugin.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "css",
+    "tailwindcss",
+    "plugin",
+    "framework",
+    "components"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "cssnano": "^7.0.1",
+    "postcss": "^8.4.38",
+    "postcss-cli": "^11.0.0",
+    "postcss-import": "^16.1.0",
+    "tailwindcss": "^3.4.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=3.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "pnpm build:plugin && pnpm build:css",
+    "build:css": "postcss src/index.css -o dist/mljr.css && postcss src/index.css -o dist/mljr.min.css --env production",
+    "build:plugin": "tsup src/plugin.ts --format cjs,esm --dts --clean",
+    "dev": "postcss src/index.css -o dist/mljr.css --watch",
+    "clean": "rm -rf dist"
+  }
+}

package/src/base/reset.css

@@ -0,0 +1,210 @@
+/* ============================================
+   MLJR CSS Framework - Reset / Normalize
+   ============================================ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  line-height: var(--mljr-leading-normal);
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  font-family: var(--mljr-font-sans);
+  font-size: var(--mljr-text-base);
+  line-height: inherit;
+  color: var(--mljr-text);
+  background-color: var(--mljr-bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+  border-color: var(--mljr-border);
+}
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+b, strong {
+  font-weight: 600;
+}
+
+code, kbd, samp, pre {
+  font-family: var(--mljr-font-mono);
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+
+button, input, optgroup, select, textarea {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+button, select {
+  text-transform: none;
+}
+
+button,
+input:where([type="button"]),
+input:where([type="reset"]),
+input:where([type="submit"]) {
+  -webkit-appearance: button;
+  appearance: button;
+  background-color: transparent;
+  background-image: none;
+}
+
+:-moz-focusring {
+  outline: auto;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -2px;
+}
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+summary {
+  display: list-item;
+}
+
+blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol, ul, menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+dialog {
+  padding: 0;
+}
+
+textarea {
+  resize: vertical;
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  color: var(--mljr-text-muted);
+}
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+:disabled {
+  cursor: default;
+}
+
+img, svg, video, canvas, audio, iframe, embed, object {
+  display: block;
+  vertical-align: middle;
+}
+
+img, video {
+  max-width: 100%;
+  height: auto;
+}
+
+[hidden] {
+  display: none;
+}