@hyvnt/hyvui 0.3.0 → 0.4.0

package/dist/tokens/hextech.css

@@ -0,0 +1,96 @@
+/* ── hextech register tokens ──────────────────────────────────────────── */
+/* Piltover-refined. Brass + etched glass + blue crystal energy.           */
+/* Applied under [data-register='hextech'].                                 */
+
+[data-register='hextech'] {
+	/* palette — new raw values */
+	--htx-cobalt-deep: #0f1f3b;
+	--htx-cobalt: #1b3a6e;
+	--htx-cobalt-mid: #264f94;
+	--htx-cyan-glow: #5dd9f0;
+	--htx-cyan-soft: #b8e6f2;
+	--htx-cyan-dim: rgba(93, 217, 240, 0.18);
+	--htx-brass: #b87333;
+	--htx-brass-bright: #d4a574;
+	--htx-gold-warm: #f4d77c;
+	--htx-glass-edge: rgba(184, 230, 242, 0.18);
+	--htx-hex-grid: rgba(93, 217, 240, 0.07);
+
+	/* remap semantic tokens → hextech palette */
+	--bg: #080f1c;
+	--bg-elev: #0f1f3b;
+	--bg-elev-soft: #0c1828;
+
+	--accent: #b87333;
+	--accent-strong: #d4a574;
+	--signal: #5dd9f0;
+
+	--line: rgba(93, 217, 240, 0.14);
+	--line-strong: rgba(93, 217, 240, 0.26);
+
+	--status-ok: #5dd9f0;
+	--status-pend: #6b7a8a;
+	--status-warn: #d4a574;
+	--status-fail: #c05040;
+
+	--shadow-card: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(93, 217, 240, 0.06);
+	--shadow-veil: 0 40px 120px rgba(0, 0, 0, 0.55), 0 0 60px rgba(93, 217, 240, 0.04);
+
+	--focus-ring: 0 0 0 1px rgba(93, 217, 240, 0.4), 0 0 0 4px rgba(93, 217, 240, 0.08);
+
+	--surface-card:
+		linear-gradient(135deg, rgba(93, 217, 240, 0.06), transparent 44%),
+		linear-gradient(180deg, rgba(184, 115, 51, 0.06), transparent 30%), #080f1c;
+	--surface-panel:
+		linear-gradient(180deg, rgba(93, 217, 240, 0.09), transparent 22%),
+		linear-gradient(135deg, rgba(184, 115, 51, 0.07), #080f1c 44%),
+		#060d18;
+	--surface-soft:
+		linear-gradient(180deg, rgba(93, 217, 240, 0.025), transparent 38%),
+		linear-gradient(135deg, rgba(184, 115, 51, 0.04), transparent 50%),
+		rgba(8, 15, 28, 0.9);
+	--surface-stroke: inset 0 1px 0 rgba(93, 217, 240, 0.06);
+
+	/* motif tokens */
+	--orn-hex-density: 1;
+	--orn-vein-intensity: 0;
+	--orn-shimmer-rate: 4s;
+	--orn-pulse-rhythm: cubic-bezier(0.16, 1, 0.3, 1);
+	--orn-glow-radius: 12px;
+	--orn-glow-color: rgba(93, 217, 240, 0.35);
+
+	/* register weight distribution */
+	--reg-font-primary: var(--font-body);
+	--reg-font-ui: var(--font-mono);
+	--reg-heading-tracking: -0.05em;
+	--reg-heading-lh: 0.93;
+	--reg-body-size: 1.08rem;
+	--reg-label-size: 0.67rem;
+	--reg-label-tracking: 0.16em;
+	--reg-surface-opacity: 0.88;
+	--reg-ornament-opacity: 0.22;
+	--reg-accent-weight: 0.8;
+	--reg-signal-weight: 1.2;
+	--reg-spacing-scale: 1.05;
+
+	/* motion — mechanical, precise */
+	--transition-smooth: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+	--transition-fast: 0.14s cubic-bezier(0.4, 0, 0.2, 1);
+	--ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* atmospheric background override */
+[data-register='hextech'] body::before,
+body[data-register='hextech']::before {
+	background:
+		radial-gradient(circle at top, rgba(93, 217, 240, 0.05), transparent 28%),
+		radial-gradient(circle at 20% 20%, rgba(184, 115, 51, 0.04), transparent 24%),
+		linear-gradient(180deg, #080f1c 0%, #060c18 35%, #040810 100%);
+}
+
+/* selection color */
+[data-register='hextech'] ::selection,
+body[data-register='hextech'] ::selection {
+	background-color: rgba(93, 217, 240, 0.2);
+	color: var(--text);
+}

package/dist/tokens/tokens.css

@@ -27,12 +27,14 @@
 
 	/* ── shadow ──────────────────────────────────── */
 	--shadow-veil: 0 40px 120px rgba(0, 0, 0, 0.45);
-	--shadow-card: 0 28px 72px rgba(0, 0, 0, 0.34);
+	--shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5);
 	--focus-ring: 0 0 0 1px rgba(226, 186, 116, 0.3), 0 0 0 4px rgba(199, 156, 87, 0.08);
 
 	/* ── motion ──────────────────────────────────── */
 	--transition-smooth: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
 	--transition-fast: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
+	--ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
+	--ease-fast: cubic-bezier(0.4, 0, 0.2, 1);
 
 	/* ── fonts ───────────────────────────────────── */
 	--font-body: 'ET Book', 'Iowan Old Style', 'Palatino Linotype', serif;
@@ -68,11 +70,11 @@
 
 	/* ── surface gradients ───────────────────────── */
 	--surface-card:
-		linear-gradient(135deg, rgba(199, 156, 87, 0.08), transparent 44%), rgba(10, 12, 14, 0.8);
+		linear-gradient(135deg, rgba(199, 156, 87, 0.08), transparent 44%), #0a0c0e;
 	--surface-panel:
 		linear-gradient(180deg, rgba(121, 166, 163, 0.08), transparent 18%),
-		linear-gradient(135deg, rgba(199, 156, 87, 0.08), rgba(10, 12, 14, 0.82) 42%),
-		rgba(9, 11, 13, 0.74);
+		linear-gradient(135deg, rgba(199, 156, 87, 0.08), #0a0c0e 42%),
+		#09090d;
 	--surface-soft:
 		linear-gradient(180deg, rgba(240, 232, 218, 0.015), transparent 38%),
 		linear-gradient(135deg, rgba(199, 156, 87, 0.05), transparent 48%), rgba(11, 13, 16, 0.9);

package/dist/tokens/tokens.d.ts

@@ -23,3 +23,44 @@ export declare const tokens: {
         readonly fast: "0.16s cubic-bezier(0.4, 0, 0.2, 1)";
     };
 };
+/**
+ * Typed Tailwind class names for all hyvui token colors.
+ * Use these instead of writing class strings by hand to get full IDE autocomplete.
+ *
+ * @example
+ * import { themeClasses } from '@hyvnt/hyvui';
+ * // themeClasses.text.accent  → 'text-accent'
+ * // themeClasses.bg.elevated  → 'bg-bg-elev'
+ */
+export declare const themeClasses: {
+    readonly bg: {
+        readonly base: "bg-bg";
+        readonly elevated: "bg-bg-elev";
+    };
+    readonly text: {
+        readonly primary: "text-text";
+        readonly soft: "text-text-soft";
+        readonly muted: "text-muted";
+        readonly mutedStrong: "text-muted-strong";
+        readonly accent: "text-accent";
+        readonly accentStrong: "text-accent-strong";
+        readonly signal: "text-signal";
+    };
+    readonly border: {
+        readonly default: "border-line";
+        readonly strong: "border-line-strong";
+    };
+    readonly font: {
+        readonly body: "font-body";
+        readonly mono: "font-mono";
+    };
+    readonly shadow: {
+        readonly veil: "shadow-veil";
+    };
+    readonly status: {
+        readonly ok: "text-status-ok";
+        readonly pend: "text-status-pend";
+        readonly warn: "text-status-warn";
+        readonly fail: "text-status-fail";
+    };
+};

package/dist/tokens/tokens.js

@@ -23,3 +23,44 @@ export const tokens = {
         fast: '0.16s cubic-bezier(0.4, 0, 0.2, 1)'
     }
 };
+/**
+ * Typed Tailwind class names for all hyvui token colors.
+ * Use these instead of writing class strings by hand to get full IDE autocomplete.
+ *
+ * @example
+ * import { themeClasses } from '@hyvnt/hyvui';
+ * // themeClasses.text.accent  → 'text-accent'
+ * // themeClasses.bg.elevated  → 'bg-bg-elev'
+ */
+export const themeClasses = {
+    bg: {
+        base: 'bg-bg',
+        elevated: 'bg-bg-elev'
+    },
+    text: {
+        primary: 'text-text',
+        soft: 'text-text-soft',
+        muted: 'text-muted',
+        mutedStrong: 'text-muted-strong',
+        accent: 'text-accent',
+        accentStrong: 'text-accent-strong',
+        signal: 'text-signal'
+    },
+    border: {
+        default: 'border-line',
+        strong: 'border-line-strong'
+    },
+    font: {
+        body: 'font-body',
+        mono: 'font-mono'
+    },
+    shadow: {
+        veil: 'shadow-veil'
+    },
+    status: {
+        ok: 'text-status-ok',
+        pend: 'text-status-pend',
+        warn: 'text-status-warn',
+        fail: 'text-status-fail'
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvnt/hyvui",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -33,7 +33,11 @@
 			"svelte": "./dist/index.js"
 		},
 		"./styles.css": "./dist/styles.css",
-		"./styles": "./dist/styles.css"
+		"./styles": "./dist/styles.css",
+		"./tokens/hextech.css": "./dist/tokens/hextech.css",
+		"./tokens/arcane.css": "./dist/tokens/arcane.css",
+		"./tokens/base.css": "./dist/tokens/tokens.css",
+		"./register.css": "./dist/system/register.css"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"