tuhfa-design-system 0.1.0

package/README.md

@@ -0,0 +1,41 @@
+# tuhfa-design-system
+
+Shared design tokens and presentational Vue components for Tuhfa.
+
+## What's here
+
+- `tokens.css` — Tailwind v4 `@theme` block (fonts, type scale, colors).
+  Import it from your own `style.css` alongside `@import 'tailwindcss'`;
+  your project's own Tailwind build generates the utilities
+  (`font-sans`, `text-section-title`, `bg-bg-page`, etc.) from it.
+- Vue components with no app-specific dependencies (no store/router/API
+  imports) — currently just `StripePlaceholder`.
+
+Components that depend on app state, routing, or domain models (nav bars,
+dashboards, banners tied to auth) stay in the consuming app; this package
+only holds framework-agnostic, purely presentational pieces.
+
+## Usage
+
+```
+npm install tuhfa-design-system
+```
+
+```css
+/* style.css */
+@import 'tailwindcss';
+@import 'tuhfa-design-system/tokens.css';
+```
+
+```vue
+<script setup lang="ts">
+import { StripePlaceholder } from 'tuhfa-design-system';
+</script>
+```
+
+## Development
+
+```
+npm install
+npm run build
+```

package/dist/src/components/StripePlaceholder.vue.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    colorA: string;
+    colorB: string;
+    angle?: number;
+    stripeWidth?: number;
+    rounded?: boolean;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    angle: number;
+    stripeWidth: number;
+    rounded: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export { default as StripePlaceholder } from './components/StripePlaceholder.vue';

package/dist/tokens.css

@@ -0,0 +1,98 @@
+/*
+ * Tuhfa design tokens: fonts, type scale, and colors.
+ * Tailwind v4 CSS-first `@theme` block, consumed by any project's own
+ * Tailwind build (import this file, then Tailwind's utility generation
+ * picks up the tokens, e.g. `font-sans`, `text-section-title`, `bg-bg-page`).
+ * This package does not depend on Tailwind itself; the consuming app's
+ * Tailwind installation does the actual utility generation.
+ */
+@theme {
+  /* Fonts. Cairo (--font-sans) is used for BOTH headers and body/UI copy
+   * (one family, supports Arabic + Latin natively at matching weights).
+   * Rakkas (--font-logo) is logo-only, reserved for the Arabic "تحفة"
+   * wordmark, never for headers, body, or repeated UI. */
+  --font-sans: 'Cairo', system-ui, sans-serif;
+  --font-logo: 'Rakkas', serif;
+
+  /* Type scale. Weight is carried by Tailwind's stock font-* utilities,
+   * which map 1:1 to Cairo's brand weight scale (font-normal=400
+   * body/descriptions, font-medium=500 labels/captions/prices/tags,
+   * font-bold=700 card titles/buttons/subheads, font-black=900
+   * hero/section headlines) -- no separate weight tokens needed. Only
+   * sizes without a good Tailwind default get a token here; 14-16px body
+   * copy stays on the stock text-sm/text-base. */
+  --text-hero: 2.75rem; /* 44px, H1 hero headline */
+  --text-hero--line-height: 1.08;
+  --text-section-title: 1.75rem; /* 28px, H2 section/page title */
+  --text-section-title--line-height: 1.15;
+  --text-card-title: 1.125rem; /* 18px, H3 card/item title */
+  --text-card-title--line-height: 1.3;
+  --text-caption: 0.75rem; /* 12px, caption/label/price/tag */
+  --text-caption--line-height: 1.4;
+  --text-button: 0.875rem; /* 14px, button/CTA */
+  --text-button--line-height: 1;
+
+  --color-ink: oklch(19% 0.012 55);
+  --color-muted-nav-link: oklch(45% 0.01 60);
+  --color-muted-nav-cta: oklch(60% 0.01 60);
+  --color-muted-card-artist: oklch(55% 0.01 60);
+  --color-muted-strip-label: oklch(45% 0.01 60);
+  --color-muted-strip-name: oklch(30% 0.012 55);
+  --color-muted-footer-link: oklch(55% 0.01 60);
+  --color-muted-footer-copyright: oklch(60% 0.01 60);
+  --color-muted-404: oklch(88% 0.01 60);
+
+  --color-accent: oklch(56% 0.13 45);
+
+  --color-border: oklch(88% 0.008 75);
+
+  --color-bg-page: oklch(98% 0.004 90);
+  --color-bg-strip: oklch(95.5% 0.006 85);
+
+  /* Stripe-placeholder swatches, feeding StripePlaceholder.vue. "swatch-N"
+   * (6 pairs) is the general artwork-card palette; "swatch-avatar-N" (4
+   * pairs) is the featured-artist avatar palette; "swatch-hero" is a
+   * one-off banner placeholder. */
+  --color-swatch-1a: oklch(92% 0.012 90);
+  --color-swatch-1b: oklch(88% 0.016 85);
+  --color-swatch-2a: oklch(90% 0.014 55);
+  --color-swatch-2b: oklch(86% 0.018 50);
+  --color-swatch-3a: oklch(91% 0.01 75);
+  --color-swatch-3b: oklch(87% 0.014 70);
+  --color-swatch-4a: oklch(90% 0.004 90);
+  --color-swatch-4b: oklch(85% 0.005 90);
+  --color-swatch-5a: oklch(88% 0.02 45);
+  --color-swatch-5b: oklch(83% 0.026 40);
+  --color-swatch-6a: oklch(86% 0.022 35);
+  --color-swatch-6b: oklch(81% 0.028 30);
+
+  --color-swatch-avatar-1a: oklch(91% 0.012 40);
+  --color-swatch-avatar-1b: oklch(87% 0.016 35);
+  --color-swatch-avatar-2a: oklch(89% 0.014 90);
+  --color-swatch-avatar-2b: oklch(85% 0.018 85);
+  --color-swatch-avatar-3a: oklch(90% 0.01 20);
+  --color-swatch-avatar-3b: oklch(86% 0.014 15);
+  --color-swatch-avatar-4a: oklch(88% 0.01 220);
+  --color-swatch-avatar-4b: oklch(84% 0.014 215);
+
+  --color-swatch-hero-a: oklch(90% 0.01 70);
+  --color-swatch-hero-b: oklch(86% 0.015 65);
+
+  /* Hero overlay scrim: an RGB triplet (not oklch) so it can be composed
+   * with `rgb(var(--color-scrim) / <alpha>)` at each gradient stop. */
+  --color-scrim: 20 15 10;
+
+  /* Status pill tokens. Three semantic pairs reused across every
+   * status/payout pill: "positive" (Live listing, Paid-out payout),
+   * "pending" (Awaiting-delivery payout), "neutral" (Draft/Sold listing). */
+  --color-status-positive-bg: oklch(92% 0.05 145);
+  --color-status-positive-text: oklch(38% 0.09 145);
+  --color-status-pending-bg: oklch(93% 0.06 60);
+  --color-status-pending-text: oklch(45% 0.1 60);
+  --color-status-neutral-bg: oklch(93% 0.01 70);
+  --color-status-neutral-text: oklch(45% 0.01 60);
+}
+
+body {
+  font-family: var(--font-sans);
+}

package/dist/tuhfa-design-system.js

@@ -0,0 +1,25 @@
+import { createElementBlock as e, defineComponent as t, normalizeClass as n, normalizeStyle as r, openBlock as i } from "vue";
+//#endregion
+//#region src/components/StripePlaceholder.vue
+var a = /* @__PURE__ */ t({
+	__name: "StripePlaceholder",
+	props: {
+		colorA: {},
+		colorB: {},
+		angle: { default: 120 },
+		stripeWidth: { default: 16 },
+		rounded: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(t) {
+		let a = t, o = `repeating-linear-gradient(${a.angle}deg, ${a.colorA}, ${a.colorA} ${a.stripeWidth}px, ${a.colorB} ${a.stripeWidth}px, ${a.colorB} ${a.stripeWidth * 2}px)`;
+		return (a, s) => (i(), e("div", {
+			class: n(["h-full w-full", t.rounded ? "rounded-full" : ""]),
+			style: r({ backgroundImage: o })
+		}, null, 6));
+	}
+});
+//#endregion
+export { a as StripePlaceholder };

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "tuhfa-design-system",
+  "version": "0.1.0",
+  "description": "Tuhfa's shared design tokens and presentational Vue components.",
+  "type": "module",
+  "license": "UNLICENSED",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/tuhfa-design-system.js",
+  "module": "./dist/tuhfa-design-system.js",
+  "types": "./dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/tuhfa-design-system.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "vue-tsc --noEmit && vite build && cp src/tokens.css dist/tokens.css",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/tsconfig": "^0.9.1",
+    "typescript": "~6.0.2",
+    "vite": "^8.1.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.39",
+    "vue-tsc": "^3.3.5"
+  }
+}