@dxlbnl/ui 0.1.0

package/dist/tokens/typography.css

@@ -0,0 +1,159 @@
+/* =========================================================
+   DEXTERLABS // TYPOGRAPHY + BASE RESET
+   Depends on: tokens.css
+   ========================================================= */
+
+/* ── Reset ──────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body { margin: 0; padding: 0; }
+
+body {
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: var(--t-body);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img, svg, video { display: block; max-width: 100%; }
+
+a { color: inherit; text-decoration: none; }
+
+button {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+}
+
+p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; margin: 0; }
+
+/* ── Headings ────────────────────────────────────────────── */
+.h1 {
+  font-family: var(--sans);
+  font-weight: 500;
+  font-size: var(--t-h1);
+  letter-spacing: -0.03em;
+  line-height: 1;
+}
+
+.h2 {
+  font-family: var(--sans);
+  font-weight: 500;
+  font-size: var(--t-h2);
+  letter-spacing: -0.01em;
+  line-height: 1.1;
+}
+
+.h3 {
+  font-family: var(--sans);
+  font-weight: 500;
+  font-size: var(--t-h3);
+  letter-spacing: -0.01em;
+  line-height: 1.2;
+}
+
+.hero-heading {
+  font-family: var(--sans);
+  font-weight: 500;
+  font-size: var(--t-hero);
+  letter-spacing: -0.03em;
+  line-height: 1;
+}
+
+.display-heading {
+  font-family: var(--sans);
+  font-weight: 500;
+  font-size: var(--t-display);
+  letter-spacing: -0.04em;
+  line-height: 0.9;
+}
+
+/* ── Body text ───────────────────────────────────────────── */
+.body-lede {
+  font-family: var(--sans);
+  font-size: var(--t-lede);
+  line-height: 1.55;
+  color: var(--ink-dim);
+}
+
+.body-text {
+  font-family: var(--sans);
+  font-size: var(--t-body);
+  line-height: 1.65;
+}
+
+/* ── Mono labels ─────────────────────────────────────────── */
+.mono-label {
+  font-family: var(--mono);
+  font-size: var(--t-mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ink-dim);
+}
+
+.eyebrow {
+  font-family: var(--mono);
+  font-size: var(--t-micro);
+  letter-spacing: 0.12em;
+  color: var(--ink-faint);
+  text-transform: uppercase;
+}
+
+/* ── Code ────────────────────────────────────────────────── */
+code {
+  font-family: var(--mono);
+  font-size: var(--t-mono);
+  background: var(--bg-elev);
+  padding: 1px 5px;
+  border: 1px solid var(--rule);
+  border-radius: var(--radius);
+  color: var(--cyan);
+}
+
+pre {
+  font-family: var(--mono);
+  font-size: var(--t-mono);
+  background: var(--bg-sunken);
+  border: 1px solid var(--rule);
+  border-radius: var(--radius);
+  padding: 16px 20px;
+  overflow-x: auto;
+  line-height: 1.6;
+}
+
+/* ── Blockquote ──────────────────────────────────────────── */
+blockquote {
+  margin: 28px 0;
+  padding: 4px 0 4px 16px;
+  border-left: 2px solid var(--amber);
+  color: var(--ink-dim);
+}
+
+/* ── Table ───────────────────────────────────────────────── */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--mono);
+  font-size: var(--t-mono);
+}
+
+th {
+  text-align: left;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--rule-strong);
+  color: var(--ink-faint);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+td {
+  padding: 8px 0;
+  border-bottom: 1px dashed var(--rule);
+  color: var(--ink-dim);
+}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@dxlbnl/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./tokens/tokens.css": "./dist/tokens/tokens.css",
+    "./tokens/typography.css": "./dist/tokens/typography.css"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0",
+    "@sveltejs/kit": "^2.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "10.4.0",
+    "@storybook/addon-docs": "10.4.0",
+    "@storybook/addon-svelte-csf": "5.1.2",
+    "@storybook/addon-vitest": "10.4.0",
+    "@storybook/sveltekit": "10.4.0",
+    "@sveltejs/adapter-auto": "7.0.1",
+    "@sveltejs/kit": "2.60.1",
+    "@sveltejs/package": "2.5.7",
+    "@sveltejs/vite-plugin-svelte": "7.1.2",
+    "@types/node": "25.8.0",
+    "@vitest/browser-playwright": "4.1.6",
+    "publint": "0.3.18",
+    "storybook": "10.4.0",
+    "svelte": "5.55.7",
+    "svelte-check": "4.4.8",
+    "typescript": "6.0.3",
+    "vite": "8.0.13",
+    "vitest": "4.1.6",
+    "vitest-browser-svelte": "2.1.0"
+  },
+  "dependencies": {
+    "@fontsource/inter-tight": "5.2.7",
+    "@fontsource/jetbrains-mono": "5.2.8"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && pnpm prepack",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "vitest",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  }
+}