sakulime-ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 syntony666
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,74 @@
-# Temporary Holding Version
+# sakulime-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![License](https://img.shields.io/github/license/syntony666/sakulime-ui)](LICENSE)
+[![npm](https://img.shields.io/npm/v/sakulime-ui)](https://www.npmjs.com/package/sakulime-ui)
+[![Storybook](https://img.shields.io/badge/Storybook-10-FF4785?logo=storybook&logoColor=white)](https://storybook.js.org)
+
+A CSS-first design system with no framework runtime — React, Vue, Svelte, or plain HTML all work. Two things only: `sl-*` attributes for components, state, and layout, plus `--sl-*` variables for color and size; `class` stays entirely yours. `sakulime-ui` ships everything in one file; `@sakulime-ui/core`, `@sakulime-ui/layout`, and `@sakulime-ui/theme` are the individual entries; `doc` is the Storybook doc site deployed to Cloudflare Workers.
+
+## Usage
+
+```ts
+import "sakulime-ui/sakulime.min.css";
+```
+
+Variables, both themes, components, and layout ship in that single file. Switch themes with `<html data-theme="terra">` — no reload needed.
+
+```html
+<button sl-button>Save</button>
+<button sl-button sl-tone="danger">Delete</button>
+<button sl-button sl-variant="invert">Cancel</button>
+```
+
+## Partial imports
+
+| What | Import |
+|---|---|
+| Components (with colors) | `@sakulime-ui/core/index.min.css` |
+| Layout | `@sakulime-ui/layout/index.min.css` |
+| Theme palettes only | `@sakulime-ui/theme/sakulime.min.css` |
+
+## Development
+
+```bash
+npm install
+npm run storybook    # Storybook — component docs and visual review (doc/)
+npm run build        # tsc typecheck + core lib build + per-package min.css + dist/
+npm run site         # static Storybook site → doc/site/
+npm run deploy       # site build + wrangler deploy → Cloudflare Workers
+npm run lint
+```
+
+## Releases (changesets)
+
+Write a changeset for every change heading into a release:
+
+```bash
+npx changeset        # pick packages, patch/minor/major, describe → .changeset/*.md
+```
+
+Day-to-day work lives on `release/x.y.z` (x.y.z is the target version — feature branches fork off it and merge back with `--no-ff`). Merging into `master` makes CI open a release PR (version bump + CHANGELOG); merging that PR publishes the four packages and deploys the doc site. Afterwards merge `master` back into the next `release/x.y.z`. All four packages bump together (`fixed`). Details in CONTRIBUTING.md.
+
+## Repository layout (npm workspaces monorepo)
+
+`packages/` is the internal workspace area. Four public entries: `sakulime-ui` (everything), `@sakulime-ui/core`, `@sakulime-ui/layout`, `@sakulime-ui/theme`.
+
+| Path | Contents |
+|---|---|
+| `packages/shared` | `--sl-*` variables (internal, unpublished) — bundled into each entry at build time |
+| `packages/shared/theme` | theme palettes, minified to `dist/<name>.min.css` |
+| `packages/core` | component entry: variables + themes + components → `index.min.css` / `index.min.js` |
+| `packages/layout` | layout entry: variables + layout → `index.min.css` |
+| `dist/sakulime.min.css` | everything: core bundle + layout |
+| `doc/` | Storybook doc site, deployed via Workers static assets (`doc/wrangler.toml`) |
+
+Inside each package:
+
+- `src/css/*.css` — component styles (stories live in `doc/src/`)
+- `src/index.ts` — core lib entry (extracts css + js entry)
+
+The split: `sl-*` attributes carry component markup, state modifiers, and layout — `class` is left to consumers and never collides with the system.
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md).

package/dist/sakulime.min.css

@@ -0,0 +1,3 @@
+@layer theme{:root{--sl-xs:.25rem;--sl-sm:.5rem;--sl-md:.75rem;--sl-lg:1rem;--sl-xl:1.25rem;--sl-2xl:1.5rem;--sl-3xl:2rem;--sl-4xl:2.5rem;--sl-5xl:3rem;--sl-container-sm:45rem;--sl-container-md:60rem;--sl-container-lg:75rem}:root,:root[data-theme=sakulime]{--sl-bg:#fff3e2;--sl-surface:#fffaf5;--sl-border:#eed9df;--sl-text:#441306;--sl-text-strong:#1f0c03;--sl-text-accent:#c2410c;--sl-text-invert:#fff4f6;--sl-text-secondary:color-mix(in srgb, var(--sl-text) 72%, transparent);--sl-text-muted:color-mix(in srgb, var(--sl-text) 45%, transparent);--sl-primary:#ff5980;--sl-primary-fg:#fff4f6;--sl-primary-bg:#ffdde7;--sl-secondary:#ef9222;--sl-secondary-fg:#4a2408;--sl-secondary-bg:#fbe6cb;--sl-ok:#0369a1;--sl-warn:#ca8a04;--sl-danger:#b91c1c}:root[data-theme=terra]{--sl-bg:#f3efe3;--sl-surface:#faf7ee;--sl-border:#e5ddc9;--sl-text:#292524;--sl-text-strong:#1c1917;--sl-text-accent:#9a3412;--sl-text-invert:#faf7ee;--sl-text-secondary:color-mix(in srgb, var(--sl-text) 72%, transparent);--sl-text-muted:color-mix(in srgb, var(--sl-text) 45%, transparent);--sl-primary:#c05621;--sl-primary-fg:#fdf4ec;--sl-primary-bg:#f2ddc9;--sl-secondary:#64748b;--sl-secondary-fg:#f8fafc;--sl-secondary-bg:#f1f5f9;--sl-ok:#0369a1;--sl-warn:#ca8a04;--sl-danger:#b91c1c}}@layer base{[sl-button]{border-radius:var(--sl-radius);min-height:var(--sl-size-h);padding:0 var(--sl-size-px);font-size:var(--sl-size-fs);border:2px solid #0000;justify-content:center;align-items:center;transition:transform .2s,background-color .16s,border-color .16s,color .16s;display:inline-flex}[sl-button]:hover:not(:disabled){transform:scale(1.05)}[sl-button]:disabled{opacity:.6;cursor:not-allowed}*,:before,:after{box-sizing:border-box}html{-webkit-font-smoothing:antialiased;font-family:Inter,ui-sans-serif,system-ui,sans-serif;line-height:1.5}body{color:var(--sl-text,#111827);background:var(--sl-bg,#fff);margin:0}button,input,textarea,select{font:inherit}}@layer attrs{[sl-button][sl-variant=normal],[sl-button]:not([sl-variant]){background:var(--sl-tone-bg);color:var(--sl-tone-text-invert);border-color:#0000}[sl-button][sl-variant=invert]{color:var(--sl-tone-text);border-color:var(--sl-tone-bg);background:0 0}[sl-button][sl-variant=ghost]{color:var(--sl-tone-text);background:0 0;border-color:#0000}[sl-button][sl-variant=underline]{color:var(--sl-tone-text);text-decoration:underline;text-decoration-thickness:2px;-webkit-text-decoration-color:var(--sl-tone-bg);text-decoration-color:var(--sl-tone-bg);text-underline-offset:.3em;background:0 0;border-color:#0000}[sl-tone=primary],[sl-button]:not([sl-tone]){--sl-tone-bg:var(--sl-primary);--sl-tone-text:color-mix(in srgb, var(--sl-primary) 55%, var(--sl-text));--sl-tone-text-invert:var(--sl-primary-fg)}[sl-tone=secondary]{--sl-tone-bg:var(--sl-secondary);--sl-tone-text:var(--sl-secondary);--sl-tone-text-invert:var(--sl-secondary-fg)}[sl-tone=success]{--sl-tone-bg:var(--sl-ok);--sl-tone-text:var(--sl-ok);--sl-tone-text-invert:var(--sl-text-invert)}[sl-tone=warning]{--sl-tone-bg:var(--sl-warn);--sl-tone-text:var(--sl-warn);--sl-tone-text-invert:var(--sl-text)}[sl-tone=danger]{--sl-tone-bg:var(--sl-danger);--sl-tone-text:var(--sl-danger);--sl-tone-text-invert:var(--sl-text-invert)}[sl-size=md],[sl-button]:not([sl-size]){--sl-size-fs:var(--sl-lg);--sl-size-h:var(--sl-3xl);--sl-size-px:var(--sl-md)}[sl-size=sm]{--sl-size-fs:var(--sl-md);--sl-size-h:var(--sl-2xl);--sl-size-px:var(--sl-sm)}[sl-size=lg]{--sl-size-fs:var(--sl-xl);--sl-size-h:var(--sl-4xl);--sl-size-px:var(--sl-lg)}[sl-radius=sm]{--sl-radius:var(--sl-xs)}[sl-radius=md],[sl-button]:not([sl-radius]){--sl-radius:var(--sl-sm)}[sl-radius=lg]{--sl-radius:var(--sl-md)}[sl-radius=full]{--sl-radius:999px}[sl-radius=none]{--sl-radius:0}}
+/*$vite$:1*/
+@layer theme,base,attrs;@layer theme{:root{--sl-xs: .25rem;--sl-sm: .5rem;--sl-md: .75rem;--sl-lg: 1rem;--sl-xl: 1.25rem;--sl-2xl: 1.5rem;--sl-3xl: 2rem;--sl-4xl: 2.5rem;--sl-5xl: 3rem;--sl-container-sm: 45rem;--sl-container-md: 60rem;--sl-container-lg: 75rem}}@layer base{[sl-container-sm],[sl-container-md],[sl-container-lg]{width:100%;margin-inline:auto;padding-inline:var(--sl-lg)}[sl-container-sm]{max-width:var(--sl-container-sm)}[sl-container-md]{max-width:var(--sl-container-md)}[sl-container-lg]{max-width:var(--sl-container-lg)}}

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "sakulime-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "workspaces": [
+    ".",
+    "packages/*",
+    "packages/shared/*",
+    "doc"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": "./dist/sakulime.min.js",
+    "./sakulime.min.css": "./dist/sakulime.min.css",
+    "./sakulime.min.js": "./dist/sakulime.min.js"
+  },
+  "scripts": {
+    "dev": "npm run dev -w sakulime-doc",
+    "build": "tsc -b && npm run build -w @sakulime-ui/core && node scripts/build.mjs",
+    "lint": "eslint .",
+    "preview": "npm run preview -w sakulime-doc",
+    "storybook": "npm run storybook -w sakulime-doc",
+    "build-storybook": "npm run build-storybook -w sakulime-doc",
+    "site": "npm run site -w sakulime-doc",
+    "deploy": "npm run deploy -w sakulime-doc",
+    "release": "changeset publish"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^3.0.3",
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^24.12.3",
+    "eslint": "^10.3.0",
+    "eslint-plugin-mdx": "^3.8.2",
+    "eslint-plugin-storybook": "^10.4.6",
+    "globals": "^17.6.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.59.2",
+    "vite": "^8.0.12"
+  }
+}