@lolmath/ui 0.0.0-20240810205542

package/dist/lib/plugin.js

@@ -0,0 +1,183 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var plugin_exports = {};
+__export(plugin_exports, {
+  lolmathui: () => lolmathui
+});
+module.exports = __toCommonJS(plugin_exports);
+var import_plugin = __toESM(require("tailwindcss/plugin.js"));
+const lolmathui = (0, import_plugin.default)(({}) => {
+}, {
+  theme: {
+    extend: {
+      colors: {
+        lol: {
+          blue: {
+            100: "var(--lol-color-blue-100)",
+            200: "var(--lol-color-blue-200)",
+            300: "var(--lol-color-blue-300)",
+            400: "var(--lol-color-blue-400)",
+            500: "var(--lol-color-blue-500)",
+            600: "var(--lol-color-blue-600)",
+            700: "var(--lol-color-blue-700)"
+          },
+          grey: {
+            100: "var(--lol-color-grey-100)",
+            150: "var(--lol-color-grey-150)",
+            200: "var(--lol-color-grey-200)",
+            300: "var(--lol-color-grey-300)",
+            cool: "var(--lol-color-grey-cool)"
+          },
+          gold: {
+            100: "var(--lol-color-gold-100)",
+            200: "var(--lol-color-gold-200)",
+            300: "var(--lol-color-gold-300)",
+            400: "var(--lol-color-gold-400)",
+            500: "var(--lol-color-gold-500)",
+            600: "var(--lol-color-gold-600)",
+            700: "var(--lol-color-gold-700)"
+          },
+          hextech: {
+            black: "var(--lol-color-hextech-black)"
+          }
+        }
+      },
+      fontSize: {
+        // Heading
+        "lol-h5": [
+          "var(--lol-font-size-h5)",
+          {
+            lineHeight: "var(--lol-line-height-h5)",
+            letterSpacing: "var(--lol-letter-spacing-h5)",
+            fontWeight: "var(--lol-font-weight-h5)"
+          }
+        ],
+        "lol-h4": [
+          "var(--lol-font-size-h4)",
+          {
+            lineHeight: "var(--lol-line-height-h4)",
+            letterSpacing: "var(--lol-letter-spacing-h4)",
+            fontWeight: "var(--lol-font-weight-h4)"
+          }
+        ],
+        "lol-h3": [
+          "var(--lol-font-size-h3)",
+          {
+            lineHeight: "var(--lol-line-height-h3)",
+            letterSpacing: "var(--lol-letter-spacing-h3)",
+            fontWeight: "var(--lol-font-weight-h3)"
+          }
+        ],
+        "lol-h2": [
+          "var(--lol-font-size-h2)",
+          {
+            lineHeight: "var(--lol-line-height-h2)",
+            letterSpacing: "var(--lol-letter-spacing-h2)",
+            fontWeight: "var(--lol-font-weight-h2)"
+          }
+        ],
+        "lol-h1": [
+          "var(--lol-font-size-h1)",
+          {
+            lineHeight: "var(--lol-line-height-h1)",
+            letterSpacing: "var(--lol-letter-spacing-h1)",
+            fontWeight: "var(--lol-font-weight-h1)"
+          }
+        ],
+        // Text
+        "lol-label": [
+          "var(--lol-font-size-label)",
+          {
+            lineHeight: "var(--lol-line-height-label)",
+            letterSpacing: "var(--lol-letter-spacing-label)",
+            fontWeight: "var(--lol-font-weight-label)"
+          }
+        ],
+        "lol-stat": [
+          "var(--lol-font-size-stat)",
+          {
+            lineHeight: "var(--lol-line-height-stat)",
+            letterSpacing: "var(--lol-letter-spacing-stat)",
+            fontWeight: "var(--lol-font-weight-stat)"
+          }
+        ],
+        "lol-large-number": [
+          "var(--lol-font-size-large-number)",
+          {
+            lineHeight: "var(--lol-line-height-large-number)",
+            letterSpacing: "var(--lol-letter-spacing-large-number)",
+            fontWeight: "var(--lol-font-weight-large-number)"
+          }
+        ],
+        "lol-sm": [
+          "var(--lol-font-size-sm)",
+          {
+            lineHeight: "var(--lol-line-height-sm)",
+            letterSpacing: "var(--lol-letter-spacing-sm)",
+            fontWeight: "var(--lol-font-weight-sm)"
+          }
+        ],
+        "lol-base": [
+          "var(--lol-font-size-base)",
+          {
+            lineHeight: "var(--lol-line-height-base)",
+            letterSpacing: "var(--lol-letter-spacing-base)",
+            fontWeight: "var(--lol-font-weight-base)"
+          }
+        ],
+        "lol-md": [
+          "var(--lol-font-size-md)",
+          {
+            lineHeight: "var(--lol-line-height-md)",
+            letterSpacing: "var(--lol-letter-spacing-md)",
+            fontWeight: "var(--lol-font-weight-md)"
+          }
+        ],
+        "lol-lg": [
+          "var(--lol-font-size-lg)",
+          {
+            lineHeight: "var(--lol-line-height-lg)",
+            letterSpacing: "var(--lol-letter-spacing-lg)",
+            fontWeight: "var(--lol-font-weight-lg)"
+          }
+        ]
+      },
+      fontFamily: {
+        beaufort: "var(--lol-font-family-beaufort)",
+        spiegel: "var(--lol-font-family-spiegel)"
+      }
+    }
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  lolmathui
+});
+
+//# sourceMappingURL=plugin.js.map

package/dist/lib/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAmB;AAEZ,MAAM,gBAAY,cAAAA,SAAO,CAAC,CAAC,MAAM;AAAC,GAAG;AAAA,EAC3C,OAAO;AAAA,IACN,QAAQ;AAAA,MACP,QAAQ;AAAA,QACP,KAAK;AAAA,UACJ,MAAM;AAAA,YACL,KAAK;AAAA,YACL,KAAK;AAAA,YACL,KAAK;AAAA,YACL,KAAK;AAAA,YACL,KAAK;AAAA,YACL,KAAK;AAAA,YACL,KAAK;AAAA,UACN;AAAA,UACA,MAAM;AAAA,YACL,KAAK;AAAA,YACL,KAAK;AAAA,YACL,KAAK;AAAA,YACL,KAAK;AAAA,YACL,MAAM;AAAA,UACP;AAAA,UACA,MAAM;AAAA,YACL,KAAK;AAAA,YACL,KAAK;AAAA,YACL,KAAK;AAAA,YACL,KAAK;AAAA,YACL,KAAK;AAAA,YACL,KAAK;AAAA,YACL,KAAK;AAAA,UACN;AAAA,UACA,SAAS;AAAA,YACR,OAAO;AAAA,UACR;AAAA,QACD;AAAA,MACD;AAAA,MACA,UAAU;AAAA;AAAA,QAET,UAAU;AAAA,UACT;AAAA,UACA;AAAA,YACC,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,YAAY;AAAA,UACb;AAAA,QACD;AAAA,QACA,UAAU;AAAA,UACT;AAAA,UACA;AAAA,YACC,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,YAAY;AAAA,UACb;AAAA,QACD;AAAA,QACA,UAAU;AAAA,UACT;AAAA,UACA;AAAA,YACC,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,YAAY;AAAA,UACb;AAAA,QACD;AAAA,QACA,UAAU;AAAA,UACT;AAAA,UACA;AAAA,YACC,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,YAAY;AAAA,UACb;AAAA,QACD;AAAA,QACA,UAAU;AAAA,UACT;AAAA,UACA;AAAA,YACC,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,YAAY;AAAA,UACb;AAAA,QACD;AAAA;AAAA,QAGA,aAAa;AAAA,UACZ;AAAA,UACA;AAAA,YACC,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,YAAY;AAAA,UACb;AAAA,QACD;AAAA,QACA,YAAY;AAAA,UACX;AAAA,UACA;AAAA,YACC,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,YAAY;AAAA,UACb;AAAA,QACD;AAAA,QACA,oBAAoB;AAAA,UACnB;AAAA,UACA;AAAA,YACC,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,YAAY;AAAA,UACb;AAAA,QACD;AAAA,QACA,UAAU;AAAA,UACT;AAAA,UACA;AAAA,YACC,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,YAAY;AAAA,UACb;AAAA,QACD;AAAA,QACA,YAAY;AAAA,UACX;AAAA,UACA;AAAA,YACC,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,YAAY;AAAA,UACb;AAAA,QACD;AAAA,QACA,UAAU;AAAA,UACT;AAAA,UACA;AAAA,YACC,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,YAAY;AAAA,UACb;AAAA,QACD;AAAA,QACA,UAAU;AAAA,UACT;AAAA,UACA;AAAA,YACC,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,YAAY;AAAA,UACb;AAAA,QACD;AAAA,MACD;AAAA,MACA,YAAY;AAAA,QACX,UAAU;AAAA,QACV,SAAS;AAAA,MACV;AAAA,IACD;AAAA,EACD;AACD,CAAC","names":["plugin"],"ignoreList":[],"sources":["../../src/plugin.ts"],"sourcesContent":["import plugin from \"tailwindcss/plugin.js\";\n\nexport const lolmathui = plugin(({}) => {}, {\n\ttheme: {\n\t\textend: {\n\t\t\tcolors: {\n\t\t\t\tlol: {\n\t\t\t\t\tblue: {\n\t\t\t\t\t\t100: \"var(--lol-color-blue-100)\",\n\t\t\t\t\t\t200: \"var(--lol-color-blue-200)\",\n\t\t\t\t\t\t300: \"var(--lol-color-blue-300)\",\n\t\t\t\t\t\t400: \"var(--lol-color-blue-400)\",\n\t\t\t\t\t\t500: \"var(--lol-color-blue-500)\",\n\t\t\t\t\t\t600: \"var(--lol-color-blue-600)\",\n\t\t\t\t\t\t700: \"var(--lol-color-blue-700)\",\n\t\t\t\t\t},\n\t\t\t\t\tgrey: {\n\t\t\t\t\t\t100: \"var(--lol-color-grey-100)\",\n\t\t\t\t\t\t150: \"var(--lol-color-grey-150)\",\n\t\t\t\t\t\t200: \"var(--lol-color-grey-200)\",\n\t\t\t\t\t\t300: \"var(--lol-color-grey-300)\",\n\t\t\t\t\t\tcool: \"var(--lol-color-grey-cool)\",\n\t\t\t\t\t},\n\t\t\t\t\tgold: {\n\t\t\t\t\t\t100: \"var(--lol-color-gold-100)\",\n\t\t\t\t\t\t200: \"var(--lol-color-gold-200)\",\n\t\t\t\t\t\t300: \"var(--lol-color-gold-300)\",\n\t\t\t\t\t\t400: \"var(--lol-color-gold-400)\",\n\t\t\t\t\t\t500: \"var(--lol-color-gold-500)\",\n\t\t\t\t\t\t600: \"var(--lol-color-gold-600)\",\n\t\t\t\t\t\t700: \"var(--lol-color-gold-700)\",\n\t\t\t\t\t},\n\t\t\t\t\thextech: {\n\t\t\t\t\t\tblack: \"var(--lol-color-hextech-black)\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t\tfontSize: {\n\t\t\t\t// Heading\n\t\t\t\t\"lol-h5\": [\n\t\t\t\t\t\"var(--lol-font-size-h5)\",\n\t\t\t\t\t{\n\t\t\t\t\t\tlineHeight: \"var(--lol-line-height-h5)\",\n\t\t\t\t\t\tletterSpacing: \"var(--lol-letter-spacing-h5)\",\n\t\t\t\t\t\tfontWeight: \"var(--lol-font-weight-h5)\",\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\t\"lol-h4\": [\n\t\t\t\t\t\"var(--lol-font-size-h4)\",\n\t\t\t\t\t{\n\t\t\t\t\t\tlineHeight: \"var(--lol-line-height-h4)\",\n\t\t\t\t\t\tletterSpacing: \"var(--lol-letter-spacing-h4)\",\n\t\t\t\t\t\tfontWeight: \"var(--lol-font-weight-h4)\",\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\t\"lol-h3\": [\n\t\t\t\t\t\"var(--lol-font-size-h3)\",\n\t\t\t\t\t{\n\t\t\t\t\t\tlineHeight: \"var(--lol-line-height-h3)\",\n\t\t\t\t\t\tletterSpacing: \"var(--lol-letter-spacing-h3)\",\n\t\t\t\t\t\tfontWeight: \"var(--lol-font-weight-h3)\",\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\t\"lol-h2\": [\n\t\t\t\t\t\"var(--lol-font-size-h2)\",\n\t\t\t\t\t{\n\t\t\t\t\t\tlineHeight: \"var(--lol-line-height-h2)\",\n\t\t\t\t\t\tletterSpacing: \"var(--lol-letter-spacing-h2)\",\n\t\t\t\t\t\tfontWeight: \"var(--lol-font-weight-h2)\",\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\t\"lol-h1\": [\n\t\t\t\t\t\"var(--lol-font-size-h1)\",\n\t\t\t\t\t{\n\t\t\t\t\t\tlineHeight: \"var(--lol-line-height-h1)\",\n\t\t\t\t\t\tletterSpacing: \"var(--lol-letter-spacing-h1)\",\n\t\t\t\t\t\tfontWeight: \"var(--lol-font-weight-h1)\",\n\t\t\t\t\t},\n\t\t\t\t],\n\n\t\t\t\t// Text\n\t\t\t\t\"lol-label\": [\n\t\t\t\t\t\"var(--lol-font-size-label)\",\n\t\t\t\t\t{\n\t\t\t\t\t\tlineHeight: \"var(--lol-line-height-label)\",\n\t\t\t\t\t\tletterSpacing: \"var(--lol-letter-spacing-label)\",\n\t\t\t\t\t\tfontWeight: \"var(--lol-font-weight-label)\",\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\t\"lol-stat\": [\n\t\t\t\t\t\"var(--lol-font-size-stat)\",\n\t\t\t\t\t{\n\t\t\t\t\t\tlineHeight: \"var(--lol-line-height-stat)\",\n\t\t\t\t\t\tletterSpacing: \"var(--lol-letter-spacing-stat)\",\n\t\t\t\t\t\tfontWeight: \"var(--lol-font-weight-stat)\",\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\t\"lol-large-number\": [\n\t\t\t\t\t\"var(--lol-font-size-large-number)\",\n\t\t\t\t\t{\n\t\t\t\t\t\tlineHeight: \"var(--lol-line-height-large-number)\",\n\t\t\t\t\t\tletterSpacing: \"var(--lol-letter-spacing-large-number)\",\n\t\t\t\t\t\tfontWeight: \"var(--lol-font-weight-large-number)\",\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\t\"lol-sm\": [\n\t\t\t\t\t\"var(--lol-font-size-sm)\",\n\t\t\t\t\t{\n\t\t\t\t\t\tlineHeight: \"var(--lol-line-height-sm)\",\n\t\t\t\t\t\tletterSpacing: \"var(--lol-letter-spacing-sm)\",\n\t\t\t\t\t\tfontWeight: \"var(--lol-font-weight-sm)\",\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\t\"lol-base\": [\n\t\t\t\t\t\"var(--lol-font-size-base)\",\n\t\t\t\t\t{\n\t\t\t\t\t\tlineHeight: \"var(--lol-line-height-base)\",\n\t\t\t\t\t\tletterSpacing: \"var(--lol-letter-spacing-base)\",\n\t\t\t\t\t\tfontWeight: \"var(--lol-font-weight-base)\",\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\t\"lol-md\": [\n\t\t\t\t\t\"var(--lol-font-size-md)\",\n\t\t\t\t\t{\n\t\t\t\t\t\tlineHeight: \"var(--lol-line-height-md)\",\n\t\t\t\t\t\tletterSpacing: \"var(--lol-letter-spacing-md)\",\n\t\t\t\t\t\tfontWeight: \"var(--lol-font-weight-md)\",\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\t\"lol-lg\": [\n\t\t\t\t\t\"var(--lol-font-size-lg)\",\n\t\t\t\t\t{\n\t\t\t\t\t\tlineHeight: \"var(--lol-line-height-lg)\",\n\t\t\t\t\t\tletterSpacing: \"var(--lol-letter-spacing-lg)\",\n\t\t\t\t\t\tfontWeight: \"var(--lol-font-weight-lg)\",\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t\tfontFamily: {\n\t\t\t\tbeaufort: \"var(--lol-font-family-beaufort)\",\n\t\t\t\tspiegel: \"var(--lol-font-family-spiegel)\",\n\t\t\t},\n\t\t},\n\t},\n});\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/lib/style.css

@@ -0,0 +1,105 @@
+@layer lol {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  :root {
+    color-scheme: dark;
+    --lol-z-index-app: 100;
+    --lol-z-index-modal: 200;
+    --lol-z-index-popover: 300;
+    --lol-z-index-overlay: 400;
+    --lol-z-index-max: 9999;
+    --lol-scale: 1;
+    --lol-color-blue-100: #CDFAFA;
+    --lol-color-blue-200: #0AC8B9;
+    --lol-color-blue-300: #0397AB;
+    --lol-color-blue-400: #005A82;
+    --lol-color-blue-500: #0A323C;
+    --lol-color-blue-600: #091428;
+    --lol-color-blue-700: #0A1428;
+    --lol-color-grey-100: #A09B8C;
+    --lol-color-grey-150: #5B5A56;
+    --lol-color-grey-200: #3C3C41;
+    --lol-color-grey-300: #1E2328;
+    --lol-color-grey-cool: #1E282D;
+    --lol-color-hextech-black: #010A13;
+    --lol-color-gold-100: #F0E6D2;
+    --lol-color-gold-200: #C8AA6E;
+    --lol-color-gold-300: #CDBE91;
+    --lol-color-gold-400: #C89B3C;
+    --lol-color-gold-500: #785A28;
+    --lol-color-gold-600: #463714;
+    --lol-color-gold-700: #32281E;
+    --lol-font-size-h1: 3.3333rem;
+    --lol-line-height-h1: 3.5rem;
+    --lol-letter-spacing-h1: 0.05em;
+    --lol-font-weight-h1: 700;
+    --lol-font-size-h2: 2.3333rem;
+    --lol-line-height-h2: 2.6667rem;
+    --lol-letter-spacing-h2: 0.05em;
+    --lol-font-weight-h2: 700;
+    --lol-font-size-h3: 1.9167rem;
+    --lol-line-height-h3: 2.3333rem;
+    --lol-letter-spacing-h3: 0.05em;
+    --lol-font-weight-h3: 700;
+    --lol-font-size-h4: 1.5rem;
+    --lol-line-height-h4: 1.8333rem;
+    --lol-letter-spacing-h4: 0.05em;
+    --lol-font-weight-h4: 700;
+    --lol-font-size-h5: 1.1667rem;
+    --lol-line-height-h5: 1.5rem;
+    --lol-letter-spacing-h5: 0.075em;
+    --lol-font-weight-h5: 700;
+    --lol-font-size-label: 0.9167rem;
+    --lol-line-height-label: 1.3333rem;
+    --lol-letter-spacing-label: 0.05em;
+    --lol-font-weight-label: 700;
+    --lol-font-size-stat: 1.1667rem;
+    --lol-line-height-stat: 1.6667rem;
+    --lol-letter-spacing-stat: 0.05em;
+    --lol-font-weight-stat: 700;
+    --lol-font-size-stat: 1.1667rem;
+    --lol-line-height-stat: 1.6667rem;
+    --lol-letter-spacing-stat: 0.05em;
+    --lol-font-weight-stat: 700;
+    --lol-font-size-large-number: 4.75rem;
+    --lol-line-height-large-number: 5.1667rem;
+    --lol-letter-spacing-large-number: 0.025em;
+    --lol-font-weight-large-number: 500;
+    --lol-font-size-xs: 0.75rem;
+    --lol-line-height-xs: 1rem;
+    --lol-letter-spacing-xs: 0.025em;
+    --lol-font-weight-xs: 400;
+    --lol-font-size-sm: 0.875rem;
+    --lol-line-height-sm: 1.1025rem;
+    --lol-letter-spacing-sm: 0.02em;
+    --lol-font-weight-sm: 400;
+    --lol-font-size-base: 1rem;
+    --lol-line-height-base: 1.24rem;
+    --lol-letter-spacing-base: 0.01em;
+    --lol-font-weight-base: 400;
+    --lol-font-size-md: 1.1667rem;
+    --lol-line-height-md: 1.6667rem;
+    --lol-letter-spacing-md: 0.025em;
+    --lol-font-weight-md: 400;
+    --lol-font-size-lg: 1.5rem;
+    --lol-line-height-lg: 1.875rem;
+    --lol-letter-spacing-lg: 0.025em;
+    --lol-font-weight-lg: 400;
+    --lol-font-family-beaufort: "beaufort";
+    --lol-font-family-spiegel: "spiegel";
+    --lol-gradient-gold: linear-gradient(to top, var(--lol-color-gold-500), var(--lol-color-gold-400), var(--lol-color-gold-200));
+    --lol-gradient-gold-hover: linear-gradient(to top, var(--lol-color-gold-400), var(--lol-color-gold-200), var(--lol-color-gold-100));
+    --lol-gradient-gold-press: linear-gradient(to top, var(--lol-color-gold-600), var(--lol-color-gold-600), var(--lol-color-gold-500));
+    --lol-gradient-grey-300: linear-gradient(to top, var(--lol-color-grey-300), var(--lol-color-grey-300), var(--lol-color-grey-300));
+    --lol-gradient-grey-focus: linear-gradient(to top, var(--lol-color-grey-200), var(--lol-color-grey-300), var(--lol-color-grey-300));
+    --lol-gradient-hextech-black: linear-gradient(to top, var(--lol-color-hextech-black), var(--lol-color-hextech-black));
+    --lol-gradient-disabled: linear-gradient(to top, var(--lol-color-grey-150), var(--lol-color-grey-150), var(--lol-color-grey-150));
+    --lol-gradient-transparent: linear-gradient(to top, transparent, transparent);
+    --lol-gradient-hextech: linear-gradient(to top, var(--lol-color-blue-200), var(--lol-color-blue-400));
+    --lol-gradient-hextech-hover: linear-gradient(to top, var(--lol-color-blue-100), var(--lol-color-blue-300));
+    --lol-gradient-hextech-press: linear-gradient(to top, var(--lol-color-blue-500), var(--lol-color-blue-400));
+  }
+}

package/dist/lib/utilities/resolve-class-name.d.ts

@@ -0,0 +1 @@
+export declare function resolveClassName(className: ((values: any) => string) | string | undefined, values: any): string;

package/dist/lib/utilities/resolve-class-name.js

@@ -0,0 +1,32 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var resolve_class_name_exports = {};
+__export(resolve_class_name_exports, {
+  resolveClassName: () => resolveClassName
+});
+module.exports = __toCommonJS(resolve_class_name_exports);
+function resolveClassName(className, values) {
+  return typeof className === "function" ? className(values) : className ?? "";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  resolveClassName
+});
+
+//# sourceMappingURL=resolve-class-name.js.map

package/dist/lib/utilities/resolve-class-name.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,SAAS,iBACf,WACA,QACS;AACT,SAAO,OAAO,cAAc,aAAa,UAAU,MAAM,IAAI,aAAa;AAC3E","names":[],"ignoreList":[],"sources":["../../../src/utilities/resolve-class-name.ts"],"sourcesContent":["export function resolveClassName(\n\tclassName: ((values: any) => string) | string | undefined,\n\tvalues: any,\n): string {\n\treturn typeof className === \"function\" ? className(values) : className ?? \"\";\n}\n"]}

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@lolmath/ui",
+  "version": "0.0.0-20240810205542",
+  "private": false,
+  "description": "lolmath.net UI",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "keywords": [],
+  "author": "lolmath.net",
+  "license": "ISC",
+  "dependencies": {
+    "cva": "1.0.0-beta.1",
+    "react-aria-components": "1.3.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "homepage": "https://ui.lolmath.net",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/lol-math/lolmath.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://gitlab.com/lol-math/lolmath/-/issues",
+    "email": "incoming+lol-math-lolmath-41959739-1qbix14106nxnde3k5iusimi8-issue@incoming.gitlab.com"
+  },
+  "devDependencies": {
+    "@modern-js/module-tools": "^2.58.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "publint": "^0.2.9",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.9",
+    "typescript": "^5.5.4",
+    "vite-node": "^2.0.5",
+    "vitest": "^2.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/es/index.d.ts",
+        "default": "./dist/es/index.js"
+      },
+      "require": {
+        "types": "./dist/lib/index.d.ts",
+        "default": "./dist/lib/index.js"
+      }
+    },
+    "./css": {
+      "import": "./dist/es/style.css",
+      "require": "./dist/lib/style.css"
+    },
+    "./plugin": {
+      "import": {
+        "types": "./dist/es/plugin.d.ts",
+        "default": "./dist/es/plugin.js"
+      },
+      "require": {
+        "types": "./dist/lib/plugin.d.ts",
+        "default": "./dist/lib/plugin.js"
+      }
+    },
+    "./font/beaufort": {
+      "import": "./dist/font/beaufort/beaufort.css",
+      "require": "./dist/font/beaufort/beaufort.css"
+    },
+    "./font/spiegel": {
+      "import": "./dist/font/spiegel/spiegel.css",
+      "require": "./dist/font/spiegel/spiegel.css"
+    }
+  },
+  "scripts": {
+    "build": "modern build",
+    "dev": "modern build --watch",
+    "lint": "publint",
+    "typecheck": "tsc --noEmit",
+    "dev:storybook": "npx storybook dev -p 6006",
+    "build:storybook": "storybook build",
+    "deploy:storybook": "wrangler pages deploy ./storybook-static --project-name lolmath-ui --branch $CI_COMMIT_REF_NAME",
+    "docs": "vite-node ./docs.ts"
+  }
+}

package/readme.md

@@ -0,0 +1,86 @@
+# LoL Math UI
+
+The League of Legends Math UI is React Component library made to look similar to
+the League of Legends client. It is used in the [LoL Math website](https://lolmath.net)
+
+## Installation
+
+```bash
+npm install @lolmath/ui
+```
+
+## CSS Files
+
+Import the global CSS file and fonts into your project.
+
+```ts
+import "@lolmath/ui/font/beaufort";
+import "@lolmath/ui/font/spiegel";
+import "@lolmath/ui/css";
+```
+
+## CSS Layer
+
+All CSS modules have the `lolmath` layer. You can use `@layer` to control the
+order of the CSS. This also means that the CSS is less specific than "normal",
+global CSS. This is useful for overriding the default styles (e.g. with
+tailwind).
+
+```css
+@layer someLayer, lolmath, someOtherLayer;
+```
+
+### Usage with tailwind
+
+In tailwind 3, the @tailwind directives are compiled away in the final CSS. You
+can use the `@layer` directive to control the order of the CSS. Here, we put the
+tailwind `base` tailwind directive in a `tailwind-base` layer, ensuring that any
+styles in the `lolmath` layer are more specific than the tailwind base styles. 
+
+We do the same for the `components` layer. The `utilities` layer is left as is.
+That way you can use tailwind utilities to style the components with
+`classNames`.
+
+```css	
+@layer tailwind-base, tailwind-components, lolmath;
+
+@layer tailwind-base {
+	@tailwind base;
+}
+
+@layer tailwind-components {
+	@tailwind components;
+}
+
+@tailwind utilities;
+```
+
+## TailwindCSS Plugin
+
+Optionally, you can use the tailwind plugin to get League of Legends colors and
+fonts.
+
+```ts tailwind.config.ts
+import { lolmathui } from "@lolmath/ui/plugin";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: [],
+	theme: {
+		extend: {},
+	},
+	plugins: [lolmathui],
+};
+
+```
+
+## Client-side Routing
+
+See [react-aria-components](https://react-spectrum.adobe.com/react-aria/routing.html#app-router)
+
+## Links
+
+- [Documentation](https://docs.lolmath.net).
+- [Storybook](https://ui.lolmath.net).
+- [NPM Package](https://www.npmjs.com/package/@lolmath/ui).
+- [Repository](https://gitlab.com/lol-math/lolmath/-/tree/main/packages/ui)