@weichenlin/swell-ui 0.0.0-stage → 0.2.0

package/dist/styles.css

@@ -0,0 +1,6 @@
+/*
+ * Tokens plus component scanning. Import right after tailwindcss.
+ * Published next to the bundled components, so this path is relative to the package's dist/.
+ */
+@import "./theme.css";
+@source "./*.js";

package/dist/theme.css

@@ -0,0 +1,207 @@
+/*
+ * swell-ui design tokens and base styles. Neutral grays; brand color is one knob (--color-primary).
+ * Import right after tailwindcss. Contains no utilities and no @source:
+ * use styles.css to also have Tailwind scan the components.
+ *
+ * Every color is written once as light-dark(<light>, <dark>). Which side applies follows
+ * `color-scheme` on the root: the system by default, forced by data-theme="light" / "dark".
+ * Tailwind's build polyfills light-dark() for browsers that lack it.
+ */
+
+@theme {
+  /*
+   * Brand. The only two tokens to override for a rebrand: input focus, checked controls and
+   * their halos derive from these at runtime (plain var() references, no baked copies).
+   * Default is neutral: near-black on light, near-white on dark.
+   */
+  --color-primary: light-dark(#141414, #f9f9f9);
+  --color-primary-fg: light-dark(#f9f9f9, #141414);
+  /* Secondary brand color; no component uses it, so it just follows primary unless set */
+  --color-accent: var(--color-primary);
+
+  /* Surfaces and text: pure grays, contrast-checked (fg-subtle >=4.5:1 on every surface) */
+  --color-bg: light-dark(#f4f4f4, #141414);
+  --color-surface: light-dark(#f9f9f9, #303030);
+  --color-surface-raised: light-dark(#ffffff, #303030);
+  --color-surface-muted: light-dark(#e6e6e6, #262626); /* dark: sunk below surface */
+  --color-fg: light-dark(#141414, #f9f9f9);
+  --color-fg-strong: light-dark(#4c4c4c, #aeaeae);
+  --color-fg-muted: light-dark(#5d5d5d, #aeaeae);
+  --color-fg-subtle: light-dark(#676767, #aaaaaa);
+  --color-border: light-dark(#eeeeee, #383838); /* row dividers */
+  --color-border-strong: light-dark(#e6e6e6, #3d3d3d);
+  --color-ring: light-dark(#cfcfcf, #3d3d3d);
+  --color-ring-deep: light-dark(#c0c0c0, #4c4c4c);
+  --color-inverse: light-dark(#303030, #141414);
+  --color-inverse-fg: light-dark(#f9f9f9, #aeaeae);
+  /* Light red + dark text on dark: one danger token can't pass 4.5:1 both as fill and as text */
+  --color-danger: light-dark(#b53333, #ee8a80);
+  --color-danger-fg: light-dark(#f9f9f9, #141414);
+  --color-focus: #3898ec; /* Focus Blue */
+
+  /*
+   * Text fields: a slightly sunk solid fill (fg 4% over bg in oklab, light; white 6%, dark).
+   * Borders are kept >=3:1 against both the page and the fill (WCAG 1.4.11).
+   * Hover stacks cues (stronger border, lifted fill, faint drop shadow): a border step alone is too subtle.
+   */
+  --color-input-bg: light-dark(#eaeaea, #1f1f1f);
+  --color-input-border: light-dark(#7e7e7e, #818181);
+  --color-input-placeholder: light-dark(#696969, #989898);
+  --color-input-border-hover: light-dark(#4c4c4c, #aeaeae);
+  --color-input-bg-hover: light-dark(#f2f2f2, #262626);
+  --color-input-focus: var(--color-primary);
+  --color-input-highlight: light-dark(rgb(0 0 0 / 0.03), rgb(255 255 255 / 0.04));
+  --shadow-input: inset 0 1px 0 var(--color-input-highlight);
+  /* A drop shadow doesn't read on near-black, so it fades out on dark */
+  --shadow-input-lift: 0 1px 2px light-dark(rgb(0 0 0 / 0.06), transparent);
+  /* Focus/error halos: decorative 3px rings outside the border */
+  --color-input-halo: color-mix(in oklab, var(--color-input-focus) 14%, transparent);
+  --color-input-halo-invalid: color-mix(in oklab, var(--color-danger) 12%, transparent);
+  --color-input-halo-invalid-focus: color-mix(in oklab, var(--color-danger) 22%, transparent);
+
+  /*
+   * Selection controls (Switch, Checkbox): the checked fill and the mark drawn on it (thumb, check, dash).
+   * The off track/box reuses the input border, which is already >=3:1 on the page and the fill.
+   */
+  --color-control-checked: var(--color-primary);
+  --color-control-checked-fg: var(--color-primary-fg);
+  /* Thumb: a hairline plus a soft drop straight down (a sideways offset makes the small thumb look shifted) */
+  --shadow-switch-thumb: 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.2);
+
+  /*
+   * Popovers (the Select picker): raised above the page with a hairline and a soft shadow.
+   * Highlight is the hovered/keyboard-active row; same fill for both so they never disagree.
+   * Dark shadows are darker and denser: the surface itself already separates from near-black.
+   */
+  --color-popover-bg: light-dark(#ffffff, #303030);
+  --color-popover-border: light-dark(#dedede, #3d3d3d);
+  --color-popover-highlight: light-dark(#ededed, #3d3d3d);
+  --shadow-popover:
+    0 8px 24px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.4)),
+    0 1px 3px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.3));
+  /*
+   * Dialogs: same surface and hairline as popovers, one elevation step higher. The backdrop is
+   * never blurred; it is darker on dark because a 40% dim barely reads over a near-black page.
+   */
+  --shadow-dialog:
+    0 16px 48px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.5)),
+    0 2px 6px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.3));
+  --color-dialog-backdrop: light-dark(rgb(20 20 20 / 0.4), rgb(0 0 0 / 0.6));
+
+  /*
+   * Status tones (Badge, Toast, ...). Per tone: main = solid fill / standalone icon,
+   * -fg = text on a solid fill, -subtle-bg/-subtle-fg = tinted badge, -border = its hairline.
+   * subtle-bg is main mixed over bg in oklab (14% light / 16% dark), border likewise (35% / 40%),
+   * baked to hex; subtle-fg is >=5:1 on subtle-bg. Meaning is carried by text + icon; hue and
+   * lightness are spaced so success vs danger also survives red-green CVD.
+   */
+  /* success: olive; deepest tone so it separates from danger by lightness */
+  --color-success: light-dark(#394d00, #758e48);
+  --color-success-fg: light-dark(#f9f9f9, #141414);
+  --color-success-subtle-bg: light-dark(#d7dbd2, #22251d);
+  --color-success-subtle-fg: light-dark(#3a4c0e, #98b070);
+  --color-success-border: light-dark(#adb79f, #384129);
+  /* warning: amber; dark solid-fg because light text on amber fails 4.5:1 */
+  --color-warning: light-dark(#a5761d, #e6b463);
+  --color-warning-fg: #141414;
+  --color-warning-subtle-bg: light-dark(#e9e2d8, #302a21);
+  --color-warning-subtle-fg: light-dark(#7e5600, #e2b56e);
+  --color-warning-border: light-dark(#d9c7ad, #5f4e34);
+  /* danger: main/-fg are above */
+  --color-danger-subtle-bg: light-dark(#efdad8, #322523);
+  --color-danger-subtle-fg: light-dark(#a2302f, #f0958c);
+  --color-danger-border: light-dark(#e5b3ae, #63403c);
+  /* info: muted teal-blue */
+  --color-info: light-dark(#3e7087, #74a6bf);
+  --color-info-fg: light-dark(#f9f9f9, #141414);
+  --color-info-subtle-bg: light-dark(#dae1e4, #22282b);
+  --color-info-subtle-fg: light-dark(#356075, #87b4cb);
+  --color-info-border: light-dark(#b3c4cd, #384952);
+  /* neutral: gray */
+  --color-neutral: light-dark(#636363, #aeaeae);
+  --color-neutral-fg: light-dark(#f9f9f9, #141414);
+  --color-neutral-subtle-bg: light-dark(#dedede, #292929);
+  --color-neutral-subtle-fg: light-dark(#5b5b5b, #b2b2b2);
+  --color-neutral-border: light-dark(#bfbfbf, #4c4c4c);
+
+  /* Fonts and radii are Tailwind's defaults; see the README to change them */
+  --shadow-whisper: rgba(0, 0, 0, 0.05) 0 4px 24px;
+  --container-page: 1200px;
+}
+
+/* Follow the system unless data-theme forces one; light-dark() above reads this */
+:root {
+  color-scheme: light dark;
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+/* `dark:` follows the tokens: data-theme="dark" on the root, or the system when not forced light */
+@custom-variant dark {
+  &:where(:root[data-theme="dark"], :root[data-theme="dark"] *) {
+    @slot;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    &:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *) {
+      @slot;
+    }
+  }
+}
+
+/* Compact scrollbars with a visible, theme-aware thumb and no contrasting track. */
+@utility scrollbar-subtle {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-fg-subtle) transparent;
+
+  @supports not (scrollbar-width: thin) {
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--color-fg-subtle);
+      border: 2px solid transparent;
+      border-radius: 999px;
+      background-clip: padding-box;
+    }
+  }
+
+  @media (forced-colors: active) {
+    scrollbar-color: auto;
+  }
+}
+
+/* Layered so the app's own utilities (e.g. a body background) win */
+@layer base {
+  body {
+    margin: 0;
+    background: var(--color-bg);
+    color: var(--color-fg);
+    font-family: var(--font-sans);
+    line-height: 1.6;
+  }
+}
+
+/* Unlayered: beats Tailwind's layered utilities (e.g. `transition-*`) on cascade order alone */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms;
+    animation-iteration-count: 1;
+    transition-duration: 0.01ms;
+    scroll-behavior: auto;
+  }
+}

package/dist/themes/warm.css

@@ -0,0 +1,63 @@
+/*
+ * Warm theme: parchment surfaces, warm grays and a brown primary (swell-ui's original look).
+ * Import after swell-ui's styles.css (or theme.css); add typography.css for the serif headings.
+ * Overrides the color tokens only; input focus and checked controls still derive from primary.
+ */
+@theme {
+  /* Warm Brown; Warm Tan on dark, where the brown is too dark against the page */
+  --color-primary: light-dark(#8b5e3c, #c49a6c);
+  --color-primary-fg: light-dark(#faf9f5, #141413);
+  --color-accent: #c49a6c; /* Warm Tan */
+
+  --color-bg: light-dark(#f5f4ed, #141413); /* Parchment */
+  --color-surface: light-dark(#faf9f5, #30302e); /* Ivory / Dark Surface */
+  --color-surface-raised: light-dark(#ffffff, #30302e);
+  --color-surface-muted: light-dark(#e8e6dc, #262625); /* Warm Sand */
+  --color-fg: light-dark(#141413, #faf9f5);
+  --color-fg-strong: light-dark(#4d4c48, #b0aea5);
+  --color-fg-muted: light-dark(#5e5d59, #b0aea5);
+  --color-fg-subtle: light-dark(#686761, #a8a79e);
+  --color-border: light-dark(#f0eee6, #383836);
+  --color-border-strong: light-dark(#e8e6dc, #3d3d3a);
+  --color-ring: light-dark(#d1cfc5, #3d3d3a);
+  --color-ring-deep: light-dark(#c2c0b6, #4d4c48);
+  --color-inverse: light-dark(#30302e, #141413);
+  --color-inverse-fg: light-dark(#faf9f5, #b0aea5);
+  --color-danger: light-dark(#b53333, #ee8a80); /* Error Crimson */
+  --color-danger-fg: light-dark(#faf9f5, #141413);
+
+  --color-input-bg: light-dark(#ebeae3, #1f1f1e);
+  --color-input-border: light-dark(#7f7e7b, #81817e);
+  --color-input-placeholder: light-dark(#6a6964, #9a998f);
+  --color-input-border-hover: light-dark(#4d4c48, #b0aea5);
+  --color-input-bg-hover: light-dark(#f3f2ec, #262625);
+
+  --color-popover-bg: light-dark(#ffffff, #30302e);
+  --color-popover-border: light-dark(#e0ded4, #3d3d3a);
+  --color-popover-highlight: light-dark(#efede5, #3d3d3a);
+  --color-dialog-backdrop: light-dark(rgb(20 20 19 / 0.4), rgb(0 0 0 / 0.6));
+
+  --color-success: light-dark(#394d00, #758e48);
+  --color-success-fg: light-dark(#faf9f5, #141413);
+  --color-success-subtle-bg: light-dark(#d8dbcc, #22251c);
+  --color-success-subtle-fg: light-dark(#3a4c0e, #98b070);
+  --color-success-border: light-dark(#aeb79b, #384128);
+  --color-warning: light-dark(#a5761d, #e6b463);
+  --color-warning-fg: #141413;
+  --color-warning-subtle-bg: light-dark(#eae2d1, #302a20);
+  --color-warning-subtle-fg: light-dark(#7e5600, #e2b56e);
+  --color-warning-border: light-dark(#d9c7a9, #5f4e33);
+  --color-danger-subtle-bg: light-dark(#f0dad2, #322522);
+  --color-danger-subtle-fg: light-dark(#a2302f, #f0958c);
+  --color-danger-border: light-dark(#e5b3aa, #63403b);
+  --color-info: light-dark(#3e7087, #74a6bf);
+  --color-info-fg: light-dark(#faf9f5, #141413);
+  --color-info-subtle-bg: light-dark(#dbe1de, #22282a);
+  --color-info-subtle-fg: light-dark(#356075, #87b4cb);
+  --color-info-border: light-dark(#b4c4c9, #384951);
+  --color-neutral: light-dark(#66635c, #b0aea5);
+  --color-neutral-fg: light-dark(#faf9f5, #141413);
+  --color-neutral-subtle-bg: light-dark(#e0ded7, #292927);
+  --color-neutral-subtle-fg: light-dark(#5e5b55, #b4b2aa);
+  --color-neutral-border: light-dark(#c0bfb8, #4c4c48);
+}

package/dist/typography.css

@@ -0,0 +1,12 @@
+/*
+ * Opt-in editorial headings: h1-h3 in the serif stack at weight 500.
+ * Import after swell-ui's styles.css (or theme.css). Layered, so utilities on a heading still win.
+ */
+@layer base {
+  h1,
+  h2,
+  h3 {
+    font-family: var(--font-serif);
+    font-weight: 500;
+  }
+}

package/package.json

@@ -1,6 +1,77 @@
 {
   "name": "@weichenlin/swell-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "Hand-built React components styled with Tailwind CSS v4.",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./theme.css": "./dist/theme.css",
+    "./styles.css": "./dist/styles.css",
+    "./typography.css": "./dist/typography.css",
+    "./themes/warm.css": "./dist/themes/warm.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.7.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^10.6.2",
+    "@storybook/addon-docs": "^10.6.2",
+    "@storybook/react-vite": "^10.6.2",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "@vitejs/plugin-react": "^6.1.1",
+    "eslint-plugin-better-tailwindcss": "^4.10.0",
+    "jsdom": "^30.1.2",
+    "knip": "^6.41.0",
+    "lefthook": "^2.2.2",
+    "lucide-react": "^1.56.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "storybook": "^10.6.2",
+    "tailwindcss": "^4.3.3",
+    "typescript": "~6.0.2",
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.3.0",
+    "vite-plus": "1.3.0",
+    "vitest": "5.0.5"
+  },
+  "peerDependencies": {
+    "lucide-react": ">=1.56.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.3.0"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "typecheck": "tsc -b",
+    "lint": "vp check",
+    "lint:fix": "vp check --fix",
+    "format": "vp fmt",
+    "knip": "knip",
+    "test": "vp test run",
+    "test:watch": "vp test watch",
+    "storybook": "NODE_OPTIONS=--disable-warning=DEP0205 storybook dev -p 6006 --no-open",
+    "build-storybook": "storybook build"
+  }
 }