@wpic/ui 0.8.9 → 0.9.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 0.9.1
+
+- WCard: use text-lg semibold titles in the card header, without changing subtitle, body, or action button typography.
+
+## 0.9.0
+
+- Isolate component Tailwind classes with the native `wpic:` prefix; namespace theme variables, implementation variables, and animations. Responsive host classes no longer depend on stylesheet import order.
+- Restrict utility generation to library sources, with build-time rejection of unprefixed utilities, theme variables, and animation names.
+- Move the old generic helper/token API to the explicit `@wpic/ui/legacy.css` entry. Existing apps using these globals must import that entry; components work with `style.css` alone.
+- Preserve component props/events, caller-supplied classes, theme portals, and persisted `WTailwindColorPicker` values.
+- Add development/production isolation tests and consumer checks for Analyze, Perform, and Studio. Consumers should use the compiled package, without source aliases or Tailwind source scanning.
+
 ## 0.8.9
 
 - WPopover: add `shiftCrossAxis` so preferred-side panels remain inside narrow viewports. Perpendicular overflow is handled by shifting instead of changing sides.

package/COMPONENTS.md

@@ -2,6 +2,52 @@
 Use this as reference when writing Vue components. Updated for 0.5.0.
 
 
+## CSS integration (0.9)
+
+Import the **published** CSS alongside your application CSS:
+
+```ts
+import '@wpic/ui/style.css'
+import './app.css'
+```
+
+Both import orders support the host's responsive utilities. Components ship their own
+`wpic:` Tailwind utilities, `--wpic-*` theme variables, `--wpic-tw-*` implementation
+variables, and namespaced animations. The package does not include Preflight.
+Do not scan `@wpic/ui/src` with `@source`, alias `@wpic/ui` to its source entry, or
+import `node_modules/@wpic/ui/src/style.css`. The compiled package is the integration
+boundary in development and production, including when testing a local tarball.
+
+**Migrating existing apps:** if the app uses the old `bg-main`, `text-muted`,
+`border-subtle`, `btn-*`, etc. helpers or global `--bg-*`, `--text-*`, `--border-*`
+aliases, explicitly import their compatibility API:
+
+```ts
+import '@wpic/ui/style.css'
+import '@wpic/ui/legacy.css'
+```
+
+`legacy.css` intentionally defines the old global helper API; it never supplies
+unprefixed Tailwind utilities such as `.hidden` or `.flex`. New apps should use
+`WThemeProvider` and the documented `--wpic-*` tokens instead. Theme providers
+continue supplying the old token aliases within their own subtree for existing
+app content and teleported panels.
+
+Customize components with their props, `WThemeProvider.colors`, documented tokens,
+and semantic `wpic-*` classes. Internal `wpic:` utilities and `--wpic-tw-*` variables
+are implementation details. Classes supplied by the app through `class`, `bodyClass`,
+`rowClass`, etc. remain app-owned and are not rewritten; the app must compile those
+classes. The order of competing intentional overrides is still normal CSS cascade
+behavior. CSS isolation does not prevent an app's universal reset or explicit
+component selector from affecting components. `WTailwindColorPicker` continues to
+accept and emit values such as `bg-blue-500`; its rendering uses a private palette.
+
+Library checks: `npm run build`, `npm run test:semantic`, and
+`npm run test:production`. `npm run test:consumers` additionally exercises the sibling
+Analyze and Perform production builds and Studio's development frontend with mocked
+API data; set `WPIC_PROJECTS_ROOT` for a different checkout location. Install the
+candidate package in all three apps and build Analyze/Perform first.
+
 ## Theme provider and customization (0.5)
 
 The UI5 preset is **opt-in**. Existing consumers without `WThemeProvider` keep their current styling and existing component props/events. Import the packaged stylesheet; no host Tailwind scanning is required.
@@ -164,6 +210,8 @@ click: [e: MouseEvent]
 
 ## WCard
 
+Header titles use `text-lg` (18px) and semibold weight. This styling applies only to the title wrapper (including a heading in the title slot), not action buttons.
+
 **Import:** `import { WCard } from '@wpic/ui'`
 
 **Props:**

package/dist/legacy.css

@@ -0,0 +1,154 @@
+/* Opt-in compatibility API for the pre-0.9 global helpers and tokens.
+ * New apps should use WThemeProvider and --wpic-* tokens. Import after style.css. */
+
+
+.dark { --bg-main: var(--wpic-legacy-bg-main); --bg-card: var(--wpic-legacy-bg-card); --bg-input: var(--wpic-legacy-bg-input); --border-subtle: var(--wpic-legacy-border-subtle); --border-strong: var(--wpic-legacy-border-strong); --border-hover: var(--wpic-legacy-border-hover); --text-main: var(--wpic-legacy-text-main); --text-muted: var(--wpic-legacy-text-muted); --text-dim: var(--wpic-legacy-text-dim);
+}
+:root { --bg-main: var(--wpic-legacy-bg-main); --bg-card: var(--wpic-legacy-bg-card); --bg-input: var(--wpic-legacy-bg-input); --border-subtle: var(--wpic-legacy-border-subtle); --border-strong: var(--wpic-legacy-border-strong); --border-hover: var(--wpic-legacy-border-hover); --text-main: var(--wpic-legacy-text-main); --text-muted: var(--wpic-legacy-text-muted); --text-dim: var(--wpic-legacy-text-dim); --color-indigo-neon: var(--wpic-legacy-color-indigo-neon); --color-rose-neon: var(--wpic-legacy-color-rose-neon); --color-teal-neon: var(--wpic-legacy-color-teal-neon); --color-wpic-green: var(--wpic-legacy-color-wpic-green);
+}
+.bg-main  { background-color: var(--bg-main); }
+.bg-card  { background-color: var(--bg-card); }
+.bg-input { background-color: var(--bg-input); }
+.border-subtle { border-color: var(--border-subtle); }
+.border-strong { border-color: var(--border-strong); }
+.border-hover  { border-color: var(--border-hover); }
+.text-main  { color: var(--text-main); }
+.text-muted { color: var(--text-muted); }
+.text-dim   { color: var(--text-dim); }
+.label-xs {
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  color: var(--text-dim);
+}
+.heading-sm {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  color: var(--text-main);
+}
+.status-ok    { color: rgb(52 211 153);  background-color: rgb(52 211 153 / 0.05);  border: 1px solid rgb(52 211 153 / 0.1); }
+.status-low   { color: rgb(251 191 36);  background-color: rgb(251 191 36  / 0.05); border: 1px solid rgb(251 191 36  / 0.1); }
+.status-error { color: rgb(251 113 133); background-color: rgb(251 113 133 / 0.05); border: 1px solid rgb(251 113 133 / 0.1); }
+.glass {
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  background-color: rgba(255, 255, 255, 0.05);
+}
+.th {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: var(--text-dim);
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-subtle);
+  text-align: left;
+}
+.btn-primary {
+  display: inline-flex; align-items: center; justify-content: center;
+  height: 2rem; padding: 0 0.75rem;
+  border-radius: 0.5rem;
+  background-color: #e4e4e7;
+  color: #18181b;
+  font-size: 0.875rem; font-weight: 600;
+  transition: background-color 0.15s;
+  cursor: pointer;
+}
+.btn-primary:hover { background-color: #ffffff; }
+.dark .btn-primary { background-color: #27272a; color: #f4f4f5; }
+.dark .btn-primary:hover { background-color: #3f3f46; }
+
+.btn-secondary {
+  display: inline-flex; align-items: center; justify-content: center;
+  height: 2rem; padding: 0 0.75rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--border-subtle);
+  color: var(--text-muted);
+  font-size: 0.875rem; font-weight: 500;
+  transition: all 0.15s;
+  cursor: pointer;
+}
+.btn-secondary:hover { color: var(--text-main); background-color: rgba(255,255,255,0.05); }
+
+.btn-indigo {
+  display: inline-flex; align-items: center; justify-content: center;
+  height: 2rem; padding: 0 0.75rem;
+  border-radius: 0.5rem;
+  background-color: #4f46e5;
+  color: #ffffff;
+  font-size: 0.875rem; font-weight: 600;
+  box-shadow: 0 0 15px rgba(99,102,241,0.2);
+  transition: background-color 0.15s;
+  cursor: pointer;
+}
+.btn-indigo:hover { background-color: #6366f1; }
+
+.btn-destructive {
+  display: inline-flex; align-items: center; justify-content: center;
+  background-color: #dc2626; color: #ffffff;
+  font-size: 0.875rem; font-weight: 600;
+  border-radius: 0.5rem;
+  cursor: pointer;
+}
+.btn-destructive:hover { background-color: #ef4444; }
+.btn-destructive:active { background-color: #b91c1c; box-shadow: inset 0 2px 4px rgba(0,0,0,0.25); }
+
+.spinner {
+  width: 1.25rem; height: 1.25rem;
+  border-radius: 9999px;
+  border: 2px solid var(--border-strong);
+  border-top-color: transparent;
+  animation: wpic-spin 0.7s linear infinite;
+}
+input[type="range"].slider-themed {
+  -webkit-appearance: none; appearance: none;
+  height: 4px; border-radius: 2px;
+  background: var(--border-strong); outline: none;
+}
+input[type="range"].slider-themed::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 14px; height: 14px;
+  border-radius: 50%; background: #85C531; cursor: pointer;
+}
+
+/* Existing WPIC helper aliases keep consuming the public legacy tokens. */
+.bg-wpic-black     { background-color: var(--bg-main); }
+.bg-wpic-dark      { background-color: var(--bg-main); }
+.bg-wpic-card      { background-color: var(--bg-card); }
+.bg-wpic-input     { background-color: var(--bg-input); }
+.bg-wpic-nav-active { background-color: var(--bg-input); }
+.bg-wpic-border    { background-color: var(--border-strong); }
+.bg-wpic-card-30   { background-color: color-mix(in srgb, var(--bg-card) 30%, transparent); }
+.bg-wpic-card-50   { background-color: color-mix(in srgb, var(--bg-card) 50%, transparent); }
+.bg-wpic-card-80   { background-color: color-mix(in srgb, var(--bg-card) 80%, transparent); }
+.bg-wpic-dark-50   { background-color: color-mix(in srgb, var(--bg-main) 50%, transparent); }
+.bg-wpic-input-50  { background-color: color-mix(in srgb, var(--bg-input) 50%, transparent); }
+.bg-wpic-border-30 { background-color: color-mix(in srgb, var(--border-strong) 30%, transparent); }
+.bg-wpic-border-40 { background-color: color-mix(in srgb, var(--border-strong) 40%, transparent); }
+.bg-wpic-border-50 { background-color: color-mix(in srgb, var(--border-strong) 50%, transparent); }
+.border-wpic-border      { border-color: var(--border-strong); }
+.border-wpic-border-30   { border-color: color-mix(in srgb, var(--border-strong) 30%, transparent); }
+.border-wpic-border-40   { border-color: color-mix(in srgb, var(--border-strong) 40%, transparent); }
+.border-wpic-border-50   { border-color: color-mix(in srgb, var(--border-strong) 50%, transparent); }
+.border-wpic-border-60   { border-color: color-mix(in srgb, var(--border-strong) 60%, transparent); }
+.border-wpic-border-80   { border-color: color-mix(in srgb, var(--border-strong) 80%, transparent); }
+.border-wpic-border-hover { border-color: var(--border-hover); }
+.divide-wpic-border-40 > * + * { border-color: color-mix(in srgb, var(--border-strong) 40%, transparent); }
+.text-wpic-text   { color: var(--text-main); }
+.text-wpic-muted  { color: var(--text-muted); }
+.text-wpic-dim    { color: var(--text-dim); }
+.text-wpic-dim-20 { color: color-mix(in srgb, var(--text-dim) 20%, transparent); }
+.text-wpic-dim-30 { color: color-mix(in srgb, var(--text-dim) 30%, transparent); }
+.text-wpic-dim-40 { color: color-mix(in srgb, var(--text-dim) 40%, transparent); }
+.text-wpic-dim-50 { color: color-mix(in srgb, var(--text-dim) 50%, transparent); }
+.text-wpic-dim-60 { color: color-mix(in srgb, var(--text-dim) 60%, transparent); }
+.text-wpic-green          { color: #85C531; }
+.bg-wpic-green            { background-color: #85C531; }
+.bg-wpic-green\/10        { background-color: rgba(133, 197, 49, 0.1); }
+.bg-wpic-green\/15        { background-color: rgba(133, 197, 49, 0.15); }
+.bg-wpic-green\/20        { background-color: rgba(133, 197, 49, 0.2); }
+.border-wpic-green        { border-color: #85C531; }
+.ring-wpic-green          { --tw-ring-color: #85C531; }
+.accent-wpic-green        { accent-color: #85C531; }
+.focus\:border-wpic-green:focus         { border-color: #85C531; }
+.hover\:border-wpic-green\/50:hover     { border-color: rgba(133, 197, 49, 0.5); }