common_component_library_vue 0.1.0

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "common_component_library_vue",
+  "version": "0.1.0",
+  "description": "Vue 3 + TypeScript + Vite 通用组件库，视觉规范由 DESIGN.md（Stripe 风格）定义，包含 15 个可复用组件",
+  "type": "module",
+  "main": "./dist-lib/common-component-library-vue.umd.js",
+  "module": "./dist-lib/common-component-library-vue.mjs",
+  "types": "./dist-lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist-lib/types/index.d.ts",
+      "import": "./dist-lib/common-component-library-vue.mjs",
+      "require": "./dist-lib/common-component-library-vue.umd.js"
+    },
+    "./styles/tokens.css": "./src/styles/tokens.css",
+    "./styles/base.css": "./src/styles/base.css",
+    "./DESIGN.md": "./DESIGN.md",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist-lib",
+    "DESIGN.md",
+    "src/styles"
+  ],
+  "keywords": [
+    "vue",
+    "vue3",
+    "typescript",
+    "component-library",
+    "design-system",
+    "design.md",
+    "stripe",
+    "ui",
+    "vite"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mutou101/common_component_library_vue.git"
+  },
+  "homepage": "https://github.com/mutou101/common_component_library_vue#readme",
+  "bugs": {
+    "url": "https://github.com/mutou101/common_component_library_vue/issues"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/tokens.css",
+    "**/base.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "build:lib": "vue-tsc -b && vite build --config vite.lib.config.ts && vue-tsc -p tsconfig.lib.json",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc -b --noEmit",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "dependencies": {
+    "vue": "^3.5.41"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@fontsource/inter": "^5.3.0",
+    "@types/node": "^24.13.3",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/tsconfig": "^0.9.1",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.2",
+    "vue-tsc": "^3.3.11"
+  }
+}

package/src/styles/base.css

@@ -0,0 +1,79 @@
+/* ==========================================================================
+   Base styles — Stripe-inspired design language
+   ========================================================================== */
+
+@import "./tokens.css";
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: var(--cc-font-family);
+  font-weight: 300;
+  font-size: 15px;
+  line-height: 1.4;
+  color: var(--cc-ink);
+  background-color: var(--cc-canvas);
+  /* The brand enables the ss01 stylistic set globally on the body element */
+  font-feature-settings: "ss01";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-weight: 300;
+  color: var(--cc-ink);
+}
+
+p {
+  margin: 0;
+}
+
+a {
+  color: var(--cc-primary);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+::selection {
+  background-color: var(--cc-ink);
+  color: #f2f2f2;
+}
+
+/* Numeric / money cells — tabular figures are the brand's quiet financial signal */
+.tnum,
+.tnum * {
+  font-feature-settings: "tnum";
+  font-variant-numeric: tabular-nums;
+}
+
+/* Utility: type roles */
+.cc-text-display-xxl { font-size: 56px; line-height: 1.03; font-weight: 300; letter-spacing: -1.4px; }
+.cc-text-display-xl { font-size: 48px; line-height: 1.15; font-weight: 300; letter-spacing: -0.96px; }
+.cc-text-display-lg { font-size: 32px; line-height: 1.1; font-weight: 300; letter-spacing: -0.64px; }
+.cc-text-display-md { font-size: 26px; line-height: 1.12; font-weight: 300; letter-spacing: -0.26px; }
+.cc-text-heading-lg { font-size: 22px; line-height: 1.1; font-weight: 300; letter-spacing: -0.22px; }
+.cc-text-heading-md { font-size: 20px; line-height: 1.4; font-weight: 300; letter-spacing: -0.2px; }
+.cc-text-heading-sm { font-size: 18px; line-height: 1.4; font-weight: 300; }
+.cc-text-body-lg { font-size: 16px; line-height: 1.4; font-weight: 300; }
+.cc-text-body-md { font-size: 15px; line-height: 1.4; font-weight: 300; }
+.cc-text-caption { font-size: 13px; line-height: 1.4; font-weight: 400; letter-spacing: -0.39px; font-feature-settings: "tnum"; }
+.cc-text-micro { font-size: 11px; line-height: 1.4; font-weight: 300; }
+.cc-text-micro-cap { font-size: 10px; line-height: 1.15; font-weight: 400; letter-spacing: 0.1px; text-transform: uppercase; }

package/src/styles/tokens.css

@@ -0,0 +1,104 @@
+/* ==========================================================================
+   DESIGN TOKENS — Stripe-inspired design language
+   Source: DESIGN.md (root) · extracted from Stripe by VoltAgent/awesome-design-md
+   Fonts: Sohne (proprietary) → Inter at weight 300 is the open-source substitute
+   ========================================================================== */
+
+:root {
+  /* ------------------------------------------------------------------ *
+   * Colors
+   * ------------------------------------------------------------------ */
+
+  /* Brand & Accent */
+  --cc-primary: #533afd;                 /* {colors.primary} — signature CTA indigo */
+  --cc-primary-deep: #4434d4;            /* {colors.primary-deep} — gradient mid-stop, press alternative */
+  --cc-primary-press: #2e2b8c;           /* {colors.primary-press} — pressed state */
+  --cc-primary-soft: #665efd;            /* {colors.primary-soft} — lighter indigo for accents */
+  --cc-primary-subdued: #b9b9f9;         /* {colors.primary-bg-subdued-hover} — soft tag fill */
+  --cc-brand-dark-900: #1c1e54;          /* {colors.brand-dark-900} — deep navy, dark surfaces */
+  --cc-ruby: #ea2261;                    /* {colors.ruby} — gradient accent, never a button */
+  --cc-magenta: #f96bee;                 /* {colors.magenta} — gradient stop */
+  --cc-lemon: #9b6829;                   /* {colors.lemon} — warm sherbet gradient stop */
+
+  /* Surface */
+  --cc-canvas: #ffffff;                  /* {colors.canvas} — default page background */
+  --cc-canvas-soft: #f6f9fc;             /* {colors.canvas-soft} — cool off-white feature band */
+  --cc-canvas-cream: #f5e9d4;            /* {colors.canvas-cream} — warm interlude band */
+  --cc-hairline: #e3e8ee;                /* {colors.hairline} — 1px card/table borders */
+  --cc-hairline-input: #a8c3de;          /* {colors.hairline-input} — cooler input border */
+
+  /* Text */
+  --cc-ink: #0d253d;                     /* {colors.ink} — default body text, deep navy */
+  --cc-ink-secondary: #273951;           /* {colors.ink-secondary} — secondary text */
+  --cc-ink-mute: #64748d;                /* {colors.ink-mute} — helper/caption text */
+  --cc-ink-mute-2: #61718a;              /* {colors.ink-mute-2} — nav text */
+  --cc-on-primary: #ffffff;              /* {colors.on-primary} — text on indigo/navy */
+
+  /* Semantic (dashboard-product UI; not part of the marketing palette) */
+  --cc-success: #0a9f6e;
+  --cc-success-soft: #e3f5ee;
+  --cc-warning: #9b6829;                 /* reuses {colors.lemon} tone */
+  --cc-warning-soft: #faf0e0;
+  --cc-error: #ea2261;                   /* reuses {colors.ruby} tone */
+  --cc-error-soft: #fde7ef;
+  --cc-info: #533afd;                    /* reuses {colors.primary} */
+
+  /* Shadows */
+  --cc-shadow-blue: #003770;             /* {colors.shadow-blue} — shadow tint */
+  --cc-shadow-level-1: rgba(0, 55, 112, 0.08) 0 1px 3px;
+  --cc-shadow-level-2: rgba(0, 55, 112, 0.08) 0 8px 24px, rgba(0, 55, 112, 0.04) 0 2px 6px;
+  --cc-focus-ring: 0 0 0 3px rgba(83, 58, 253, 0.18);
+
+  /* ------------------------------------------------------------------ *
+   * Typography
+   * ------------------------------------------------------------------ */
+  --cc-font-family: "Inter", "SF Pro Display", system-ui, -apple-system,
+    "Segoe UI", sans-serif;
+  --cc-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
+    monospace;
+
+  /* Display tier — weight 300, negative tracking is the brand signature */
+  --cc-text-display-xxl: 56px / 1.03 300 -1.4px;
+  --cc-text-display-xl: 48px / 1.15 300 -0.96px;
+  --cc-text-display-lg: 32px / 1.1 300 -0.64px;
+  --cc-text-display-md: 26px / 1.12 300 -0.26px;
+  --cc-text-heading-lg: 22px / 1.1 300 -0.22px;
+  --cc-text-heading-md: 20px / 1.4 300 -0.2px;
+  --cc-text-heading-sm: 18px / 1.4 300 0;
+  --cc-text-body-lg: 16px / 1.4 300 0;
+  --cc-text-body-md: 15px / 1.4 300 0;
+  --cc-text-body-tabular: 14px / 1.4 300 -0.42px; /* tnum for money/numerics */
+  --cc-text-button-md: 16px / 1 400 0;
+  --cc-text-button-sm: 14px / 1 400 0;
+  --cc-text-caption: 13px / 1.4 400 -0.39px;      /* tnum */
+  --cc-text-micro: 11px / 1.4 300 0;
+  --cc-text-micro-cap: 10px / 1.15 400 0.1px;     /* all-caps eyebrow */
+
+  /* ------------------------------------------------------------------ *
+   * Radius
+   * ------------------------------------------------------------------ */
+  --cc-radius-xs: 4px;
+  --cc-radius-sm: 6px;   /* form inputs */
+  --cc-radius-md: 8px;   /* compact cards, alerts */
+  --cc-radius-lg: 12px;  /* pricing / feature cards */
+  --cc-radius-xl: 16px;  /* dashboard chrome */
+  --cc-radius-pill: 9999px; /* all buttons, tag pills */
+
+  /* ------------------------------------------------------------------ *
+   * Spacing (base unit 8px)
+   * ------------------------------------------------------------------ */
+  --cc-space-xxs: 2px;
+  --cc-space-xs: 4px;
+  --cc-space-sm: 8px;
+  --cc-space-md: 12px;
+  --cc-space-lg: 16px;
+  --cc-space-xl: 24px;
+  --cc-space-xxl: 32px;
+  --cc-space-huge: 64px;
+
+  /* ------------------------------------------------------------------ *
+   * Layout
+   * ------------------------------------------------------------------ */
+  --cc-container-max: 1200px;
+  --cc-input-height: 40px;
+}