@actuate-media/cms-admin 0.63.2 → 0.65.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -0
- package/design-system/README.md +53 -0
- package/design-system/tokens.css +114 -0
- package/design-system/tokens.json +149 -0
- package/design-system/tokens.scss +108 -0
- package/design-system/tokens.tailwind.cjs +80 -0
- package/dist/__tests__/components/ui-primitives.test.d.ts +2 -0
- package/dist/__tests__/components/ui-primitives.test.d.ts.map +1 -0
- package/dist/__tests__/components/ui-primitives.test.js +45 -0
- package/dist/__tests__/components/ui-primitives.test.js.map +1 -0
- package/dist/__tests__/layout/primitives.test.js +9 -2
- package/dist/__tests__/layout/primitives.test.js.map +1 -1
- package/dist/__tests__/views/updates-tab.render.test.js +1 -1
- package/dist/__tests__/views/updates-tab.render.test.js.map +1 -1
- package/dist/actuate-admin.css +1 -1
- package/dist/components/EnabledSwitch.d.ts +2 -5
- package/dist/components/EnabledSwitch.d.ts.map +1 -1
- package/dist/components/EnabledSwitch.js +4 -7
- package/dist/components/EnabledSwitch.js.map +1 -1
- package/dist/components/SEOPanel.d.ts.map +1 -1
- package/dist/components/SEOPanel.js +2 -1
- package/dist/components/SEOPanel.js.map +1 -1
- package/dist/components/ThemeProvider.d.ts.map +1 -1
- package/dist/components/ThemeProvider.js +5 -3
- package/dist/components/ThemeProvider.js.map +1 -1
- package/dist/components/forms/FieldsPanel.js +2 -2
- package/dist/components/forms/FieldsPanel.js.map +1 -1
- package/dist/components/forms/NotificationsPanel.js +2 -2
- package/dist/components/forms/NotificationsPanel.js.map +1 -1
- package/dist/components/forms/WebhooksPanel.d.ts.map +1 -1
- package/dist/components/forms/WebhooksPanel.js +2 -2
- package/dist/components/forms/WebhooksPanel.js.map +1 -1
- package/dist/components/forms/primitives.d.ts.map +1 -1
- package/dist/components/forms/primitives.js +5 -8
- package/dist/components/forms/primitives.js.map +1 -1
- package/dist/components/posts/badges.d.ts.map +1 -1
- package/dist/components/posts/badges.js +7 -13
- package/dist/components/posts/badges.js.map +1 -1
- package/dist/components/seo/RedirectEditorDrawer.d.ts.map +1 -1
- package/dist/components/seo/RedirectEditorDrawer.js +2 -1
- package/dist/components/seo/RedirectEditorDrawer.js.map +1 -1
- package/dist/components/seo/SeoEditorDrawer.d.ts.map +1 -1
- package/dist/components/seo/SeoEditorDrawer.js +3 -2
- package/dist/components/seo/SeoEditorDrawer.js.map +1 -1
- package/dist/components/seo/primitives.d.ts.map +1 -1
- package/dist/components/seo/primitives.js +11 -15
- package/dist/components/seo/primitives.js.map +1 -1
- package/dist/components/ui/Button.d.ts +1 -1
- package/dist/components/ui/Button.js +1 -1
- package/dist/components/ui/Button.js.map +1 -1
- package/dist/components/ui/Card.d.ts +6 -5
- package/dist/components/ui/Card.d.ts.map +1 -1
- package/dist/components/ui/Card.js +20 -18
- package/dist/components/ui/Card.js.map +1 -1
- package/dist/components/ui/FilterPill.d.ts +14 -0
- package/dist/components/ui/FilterPill.d.ts.map +1 -0
- package/dist/components/ui/FilterPill.js +8 -0
- package/dist/components/ui/FilterPill.js.map +1 -0
- package/dist/components/ui/Input.d.ts +2 -1
- package/dist/components/ui/Input.d.ts.map +1 -1
- package/dist/components/ui/Input.js +9 -8
- package/dist/components/ui/Input.js.map +1 -1
- package/dist/components/ui/SearchInput.d.ts.map +1 -1
- package/dist/components/ui/SearchInput.js +2 -1
- package/dist/components/ui/SearchInput.js.map +1 -1
- package/dist/components/ui/Select.d.ts.map +1 -1
- package/dist/components/ui/Select.js +9 -10
- package/dist/components/ui/Select.js.map +1 -1
- package/dist/components/ui/StatPill.d.ts +18 -0
- package/dist/components/ui/StatPill.d.ts.map +1 -0
- package/dist/components/ui/StatPill.js +5 -0
- package/dist/components/ui/StatPill.js.map +1 -0
- package/dist/components/ui/StatusBadge.d.ts +25 -0
- package/dist/components/ui/StatusBadge.d.ts.map +1 -0
- package/dist/components/ui/StatusBadge.js +41 -0
- package/dist/components/ui/StatusBadge.js.map +1 -0
- package/dist/components/ui/Toggle.d.ts +31 -0
- package/dist/components/ui/Toggle.d.ts.map +1 -0
- package/dist/components/ui/Toggle.js +41 -0
- package/dist/components/ui/Toggle.js.map +1 -0
- package/dist/components/ui/form-control.d.ts +11 -0
- package/dist/components/ui/form-control.d.ts.map +1 -0
- package/dist/components/ui/form-control.js +11 -0
- package/dist/components/ui/form-control.js.map +1 -0
- package/dist/components/ui/index.d.ts +9 -0
- package/dist/components/ui/index.d.ts.map +1 -1
- package/dist/components/ui/index.js +5 -0
- package/dist/components/ui/index.js.map +1 -1
- package/dist/fields/PropInput.d.ts.map +1 -1
- package/dist/fields/PropInput.js +2 -1
- package/dist/fields/PropInput.js.map +1 -1
- package/dist/fields/ToggleField.d.ts.map +1 -1
- package/dist/fields/ToggleField.js +2 -1
- package/dist/fields/ToggleField.js.map +1 -1
- package/dist/layout/Header.d.ts.map +1 -1
- package/dist/layout/Header.js +5 -2
- package/dist/layout/Header.js.map +1 -1
- package/dist/layout/Sidebar.js +1 -1
- package/dist/layout/Sidebar.js.map +1 -1
- package/dist/layout/primitives/PageContainer.d.ts.map +1 -1
- package/dist/layout/primitives/PageContainer.js +1 -1
- package/dist/layout/primitives/PageContainer.js.map +1 -1
- package/dist/layout/primitives/tokens.d.ts +10 -4
- package/dist/layout/primitives/tokens.d.ts.map +1 -1
- package/dist/layout/primitives/tokens.js +10 -4
- package/dist/layout/primitives/tokens.js.map +1 -1
- package/dist/views/Dashboard.js +1 -1
- package/dist/views/Dashboard.js.map +1 -1
- package/dist/views/FormEditor.d.ts.map +1 -1
- package/dist/views/FormEditor.js +2 -1
- package/dist/views/FormEditor.js.map +1 -1
- package/dist/views/FormEntries.js +1 -1
- package/dist/views/FormEntries.js.map +1 -1
- package/dist/views/FormSubmissions.js +1 -1
- package/dist/views/FormSubmissions.js.map +1 -1
- package/dist/views/Forms.js +3 -3
- package/dist/views/Forms.js.map +1 -1
- package/dist/views/MediaBrowser.d.ts.map +1 -1
- package/dist/views/MediaBrowser.js +3 -2
- package/dist/views/MediaBrowser.js.map +1 -1
- package/dist/views/Pages/PageTagManager.d.ts.map +1 -1
- package/dist/views/Pages/PageTagManager.js +1 -1
- package/dist/views/Pages/PageTagManager.js.map +1 -1
- package/dist/views/Pages/PagesListView.js +1 -1
- package/dist/views/Pages/PagesListView.js.map +1 -1
- package/dist/views/Pages.js +1 -1
- package/dist/views/Pages.js.map +1 -1
- package/dist/views/Posts/NewPostPicker.d.ts.map +1 -1
- package/dist/views/Posts/NewPostPicker.js +1 -1
- package/dist/views/Posts/NewPostPicker.js.map +1 -1
- package/dist/views/Posts/NewPostTypeInstructions.d.ts.map +1 -1
- package/dist/views/Posts/NewPostTypeInstructions.js +1 -1
- package/dist/views/Posts/NewPostTypeInstructions.js.map +1 -1
- package/dist/views/Posts/PostTypesView.d.ts.map +1 -1
- package/dist/views/Posts/PostTypesView.js +1 -1
- package/dist/views/Posts/PostTypesView.js.map +1 -1
- package/dist/views/Posts/PostsListView.js +1 -1
- package/dist/views/Posts/PostsListView.js.map +1 -1
- package/dist/views/Profile.js +1 -1
- package/dist/views/Profile.js.map +1 -1
- package/dist/views/Redirects.js +1 -1
- package/dist/views/Redirects.js.map +1 -1
- package/dist/views/SEO.js +1 -1
- package/dist/views/SEO.js.map +1 -1
- package/dist/views/ScriptTagEditor.d.ts.map +1 -1
- package/dist/views/ScriptTagEditor.js +1 -1
- package/dist/views/ScriptTagEditor.js.map +1 -1
- package/dist/views/ScriptTags.d.ts.map +1 -1
- package/dist/views/ScriptTags.js +2 -1
- package/dist/views/ScriptTags.js.map +1 -1
- package/dist/views/Settings.js +1 -1
- package/dist/views/Settings.js.map +1 -1
- package/dist/views/Users.d.ts.map +1 -1
- package/dist/views/Users.js +2 -6
- package/dist/views/Users.js.map +1 -1
- package/dist/views/page-builder/BlockEditor.d.ts.map +1 -1
- package/dist/views/page-builder/BlockEditor.js +2 -2
- package/dist/views/page-builder/BlockEditor.js.map +1 -1
- package/dist/views/page-builder/BottomBar.d.ts.map +1 -1
- package/dist/views/page-builder/BottomBar.js +2 -2
- package/dist/views/page-builder/BottomBar.js.map +1 -1
- package/dist/views/page-builder/NodeSettings.js +3 -3
- package/dist/views/page-builder/NodeSettings.js.map +1 -1
- package/dist/views/page-builder/PageTemplates.js +1 -1
- package/dist/views/page-builder/PageTemplates.js.map +1 -1
- package/dist/views/page-builder/SavedSections.js +2 -2
- package/dist/views/page-builder/SavedSections.js.map +1 -1
- package/dist/views/page-builder/Widgets.js +1 -1
- package/dist/views/page-builder/Widgets.js.map +1 -1
- package/dist/views/page-editor/SectionInspector.d.ts.map +1 -1
- package/dist/views/page-editor/SectionInspector.js +2 -1
- package/dist/views/page-editor/SectionInspector.js.map +1 -1
- package/dist/views/post-editor/PostHeaderPanel.d.ts.map +1 -1
- package/dist/views/post-editor/PostHeaderPanel.js +2 -1
- package/dist/views/post-editor/PostHeaderPanel.js.map +1 -1
- package/dist/views/seo/TechnicalTab.d.ts.map +1 -1
- package/dist/views/seo/TechnicalTab.js +2 -2
- package/dist/views/seo/TechnicalTab.js.map +1 -1
- package/dist/views/settings/components.d.ts.map +1 -1
- package/dist/views/settings/components.js +4 -2
- package/dist/views/settings/components.js.map +1 -1
- package/package.json +9 -4
- package/src/__tests__/components/ui-primitives.test.tsx +58 -0
- package/src/__tests__/layout/primitives.test.ts +10 -2
- package/src/__tests__/views/updates-tab.render.test.tsx +2 -1
- package/src/components/EnabledSwitch.tsx +4 -22
- package/src/components/SEOPanel.tsx +2 -11
- package/src/components/ThemeProvider.tsx +5 -3
- package/src/components/forms/FieldsPanel.tsx +4 -6
- package/src/components/forms/NotificationsPanel.tsx +2 -9
- package/src/components/forms/WebhooksPanel.tsx +4 -6
- package/src/components/forms/primitives.tsx +6 -16
- package/src/components/posts/badges.tsx +8 -21
- package/src/components/seo/RedirectEditorDrawer.tsx +12 -16
- package/src/components/seo/SeoEditorDrawer.tsx +16 -24
- package/src/components/seo/primitives.tsx +18 -34
- package/src/components/ui/Button.tsx +1 -1
- package/src/components/ui/Card.tsx +35 -18
- package/src/components/ui/FilterPill.tsx +43 -0
- package/src/components/ui/Input.tsx +15 -17
- package/src/components/ui/SearchInput.tsx +9 -4
- package/src/components/ui/Select.tsx +15 -18
- package/src/components/ui/StatPill.tsx +37 -0
- package/src/components/ui/StatusBadge.tsx +66 -0
- package/src/components/ui/Toggle.tsx +85 -0
- package/src/components/ui/form-control.ts +12 -0
- package/src/components/ui/index.ts +9 -0
- package/src/fields/PropInput.tsx +6 -15
- package/src/fields/ToggleField.tsx +3 -15
- package/src/layout/Header.tsx +6 -2
- package/src/layout/Sidebar.tsx +3 -3
- package/src/layout/primitives/PageContainer.tsx +1 -5
- package/src/layout/primitives/tokens.ts +11 -4
- package/src/styles/actuate-tokens.css +97 -0
- package/src/styles/theme.css +88 -156
- package/src/views/Dashboard.tsx +1 -1
- package/src/views/FormEditor.tsx +6 -9
- package/src/views/FormEntries.tsx +1 -1
- package/src/views/FormSubmissions.tsx +1 -1
- package/src/views/Forms.tsx +5 -7
- package/src/views/MediaBrowser.tsx +4 -7
- package/src/views/Pages/PageTagManager.tsx +1 -3
- package/src/views/Pages/PagesListView.tsx +1 -1
- package/src/views/Pages.tsx +1 -1
- package/src/views/Posts/NewPostPicker.tsx +1 -3
- package/src/views/Posts/NewPostTypeInstructions.tsx +1 -3
- package/src/views/Posts/PostTypesView.tsx +1 -3
- package/src/views/Posts/PostsListView.tsx +1 -1
- package/src/views/Profile.tsx +1 -1
- package/src/views/Redirects.tsx +1 -1
- package/src/views/SEO.tsx +1 -1
- package/src/views/ScriptTagEditor.tsx +1 -3
- package/src/views/ScriptTags.tsx +17 -1
- package/src/views/Settings.tsx +1 -1
- package/src/views/Users.tsx +6 -18
- package/src/views/page-builder/BlockEditor.tsx +3 -6
- package/src/views/page-builder/BottomBar.tsx +3 -6
- package/src/views/page-builder/NodeSettings.tsx +7 -16
- package/src/views/page-builder/PageTemplates.tsx +1 -1
- package/src/views/page-builder/SavedSections.tsx +2 -2
- package/src/views/page-builder/Widgets.tsx +1 -1
- package/src/views/page-editor/SectionInspector.tsx +9 -21
- package/src/views/post-editor/PostHeaderPanel.tsx +10 -20
- package/src/views/seo/TechnicalTab.tsx +3 -6
- package/src/views/settings/components.tsx +19 -26
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @actuate-media/cms-admin
|
|
2
2
|
|
|
3
|
+
## 0.65.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 8f48cd6: Design-parity phase 1: shared primitives aligned to the design system handoff.
|
|
8
|
+
- New `StatusBadge` primitive matching the design's `.status` chip (rectangular 5px radius, 5px dot, tint backgrounds). `PostStatusBadge`, `FormStatusBadge`, `SeoStatusBadge`, and the Media library status chips now render through it.
|
|
9
|
+
- New `FilterPill` (`.pill` / `.pill.act`) and `StatPill` (`.stat-pill`) primitives; adopted in the Users role filter and the Script Tags header stats.
|
|
10
|
+
- All toggle switches unified onto the shared `Toggle` component (design `.tog-track`, 38×21): Settings rows, SEO/Redirect editor drawers, SEO panel, form editor GA4 switch, page-builder block/node settings, section inspector, post header panel, and component-block boolean fields.
|
|
11
|
+
- Page titles across list/settings views now use the design system h1 style (21px / 700 / -0.5px) instead of per-view `text-2xl font-medium` overrides.
|
|
12
|
+
|
|
13
|
+
## 0.64.0
|
|
14
|
+
|
|
15
|
+
### Minor Changes
|
|
16
|
+
|
|
17
|
+
- 6a6101a: Align admin UI with the ActuateCMS design system v1.0 handoff: canonical tokens, theme remapping, shell layout, shared Toggle/Input/Card primitives, and appearance accent tint variables.
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- 15003e0: Publish full design-system handoff exports (tokens.scss, tokens.tailwind.cjs), npm export paths, data-theme bridge on admin root, and extended tokens.css parity vars.
|
|
22
|
+
|
|
3
23
|
## 0.63.2
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# ActuateCMS Admin Design System
|
|
2
|
+
|
|
3
|
+
Version **1.0** — canonical tokens for `@actuate-media/cms-admin` and downstream consumer apps.
|
|
4
|
+
|
|
5
|
+
## Token files (handoff)
|
|
6
|
+
|
|
7
|
+
| File | Purpose |
|
|
8
|
+
| ------------------------------- | ---------------------------------------------------------------------- |
|
|
9
|
+
| `tokens.json` | W3C Design Tokens format — Style Dictionary / CI pipelines |
|
|
10
|
+
| `tokens.css` | CSS custom properties on `:root` + `[data-theme="dark"]` |
|
|
11
|
+
| `tokens.scss` | Sass maps + `acms-css-vars` mixin (runtime theming) |
|
|
12
|
+
| `tokens.tailwind.cjs` | Tailwind **v3** preset — `presets: [require('…/tokens.tailwind.cjs')]` |
|
|
13
|
+
| `ActuateCMS Design System.html` | Browsable reference (keep with handoff zip; not published to npm) |
|
|
14
|
+
|
|
15
|
+
All exports default to **runtime theming** (CSS var references). Static hex fallbacks are documented in `tokens.tailwind.cjs` comments and `tokens.scss` maps.
|
|
16
|
+
|
|
17
|
+
## How the admin package consumes tokens
|
|
18
|
+
|
|
19
|
+
The published admin UI does **not** import `tokens.css` directly. It uses a scoped adapter:
|
|
20
|
+
|
|
21
|
+
| Layer | File | Role |
|
|
22
|
+
| ------------ | ------------------------------------ | ------------------------------------------------------------ |
|
|
23
|
+
| Raw tokens | `src/styles/actuate-tokens.css` | `--bg`, `--acc`, etc. under `.actuate-admin` |
|
|
24
|
+
| Dark mode | `.actuate-admin.dark` + `data-theme` | `ThemeProvider` sets both on the scoped admin root |
|
|
25
|
+
| Semantic map | `src/styles/theme.css` | Tailwind v4 `@theme` aliases (`--primary`, `--sidebar-*`, …) |
|
|
26
|
+
| Primitives | `src/components/ui/*` | Input, Card, Toggle aligned to HTML reference |
|
|
27
|
+
|
|
28
|
+
### Intentional differences from the handoff
|
|
29
|
+
|
|
30
|
+
1. **Dark mode selector** — Handoff targets `[data-theme="dark"]` on `<html>`. Admin sets `data-theme` on `.actuate-admin` (scoped) and toggles `.dark` for Tailwind v4.
|
|
31
|
+
2. **Default font** — Handoff `tokens.css` lists DM Sans. Admin defaults to **system-ui**; DM Sans remains selectable in Appearance.
|
|
32
|
+
3. **Tailwind version** — Admin builds with **Tailwind v4** (`@theme inline` in `theme.css`). The `.cjs` preset targets Tailwind v3 consumer apps.
|
|
33
|
+
|
|
34
|
+
## npm exports
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
import '@actuate-media/cms-admin/design-system/tokens.css'
|
|
38
|
+
// presets: [require('@actuate-media/cms-admin/design-system/tokens.tailwind.cjs')]
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Governance (subagency review)
|
|
42
|
+
|
|
43
|
+
When the design team or a subagency updates the system:
|
|
44
|
+
|
|
45
|
+
1. Open `ActuateCMS Design System.html` from the handoff zip and spot-check components.
|
|
46
|
+
2. Replace files in this folder from the handoff; diff `tokens.json` values against the previous version.
|
|
47
|
+
3. Sync changed values into `src/styles/actuate-tokens.css` (scoped runtime copy).
|
|
48
|
+
4. Update `src/styles/theme.css` semantic mappings if Tailwind aliases change.
|
|
49
|
+
5. Update shared primitives (`Input`, `Card`, `Toggle`, …) when component specs change.
|
|
50
|
+
6. Run `pnpm --filter @actuate-media/cms-admin build:css` and verify light + dark admin chrome.
|
|
51
|
+
7. Add a `@actuate-media/cms-admin` changeset.
|
|
52
|
+
|
|
53
|
+
Accent colors in **Appearance → Accent** map from `tokens.json` → `accentOptions` and `@actuate-media/cms-core` (`appearance/theme-tokens.ts`).
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
/* ============================================================
|
|
2
|
+
ActuateCMS — Design Tokens
|
|
3
|
+
Version 1.0 · Generated for developer handoff
|
|
4
|
+
------------------------------------------------------------
|
|
5
|
+
Drop this file in and reference the CSS custom properties.
|
|
6
|
+
Light theme is the default (:root). Dark theme activates
|
|
7
|
+
via [data-theme="dark"] on the <html> element.
|
|
8
|
+
============================================================ */
|
|
9
|
+
|
|
10
|
+
:root {
|
|
11
|
+
/* ── Surfaces ─────────────────────────────────────────── */
|
|
12
|
+
--bg: #f5f4fa; /* app background */
|
|
13
|
+
--sb: #ffffff; /* sidebar / topbar surface */
|
|
14
|
+
--card: #ffffff; /* card / panel surface */
|
|
15
|
+
--bdr: #e8e6f2; /* hairline border */
|
|
16
|
+
|
|
17
|
+
/* ── Text ─────────────────────────────────────────────── */
|
|
18
|
+
--txt: #1a1827; /* primary text */
|
|
19
|
+
--sub: #6b6878; /* secondary text */
|
|
20
|
+
--muted: #b0adbe; /* tertiary / placeholder */
|
|
21
|
+
|
|
22
|
+
/* ── Accent (brand purple) ────────────────────────────── */
|
|
23
|
+
--acc: #7c3aed; /* accent / interactive */
|
|
24
|
+
--acc-l: #ede9fe; /* accent tint (hover/active)*/
|
|
25
|
+
--acc-m: #c4b5fd; /* accent mid (focus ring) */
|
|
26
|
+
|
|
27
|
+
/* ── Semantic ─────────────────────────────────────────── */
|
|
28
|
+
--suc: #059669;
|
|
29
|
+
--suc-l: #ecfdf5; /* success */
|
|
30
|
+
--warn: #d97706;
|
|
31
|
+
--warn-l: #fffbeb; /* warning */
|
|
32
|
+
--err: #dc2626;
|
|
33
|
+
--err-l: #fef2f2; /* error */
|
|
34
|
+
--info: #0891b2;
|
|
35
|
+
--info-l: #e0f7fa; /* info */
|
|
36
|
+
|
|
37
|
+
/* ── AI gradient ──────────────────────────────────────── */
|
|
38
|
+
--ai1: #7c3aed;
|
|
39
|
+
--ai2: #c026d3;
|
|
40
|
+
--ai-soft: linear-gradient(135deg, rgba(124, 58, 237, 0.09), rgba(192, 38, 211, 0.07));
|
|
41
|
+
|
|
42
|
+
/* ── Dimensions ───────────────────────────────────────── */
|
|
43
|
+
--sbw: 224px; /* sidebar width (expanded) */
|
|
44
|
+
--sbw-col: 60px; /* sidebar width (collapsed) */
|
|
45
|
+
--tbh: 56px; /* topbar height */
|
|
46
|
+
--r: 10px; /* base radius (cards) */
|
|
47
|
+
--r-control: 8px; /* buttons, inputs */
|
|
48
|
+
--r-sm: 6px; /* badges, tags */
|
|
49
|
+
--r-pill: 99px; /* toggles, progress */
|
|
50
|
+
|
|
51
|
+
/* ── Motion ───────────────────────────────────────────── */
|
|
52
|
+
--motion-fast: 0.12s;
|
|
53
|
+
--motion-base: 0.18s;
|
|
54
|
+
--motion-layout: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
|
|
55
|
+
|
|
56
|
+
/* ── Elevation ────────────────────────────────────────── */
|
|
57
|
+
--shd: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.04);
|
|
58
|
+
--shd2: 0 4px 16px rgba(0, 0, 0, 0.1);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
[data-theme='dark'] {
|
|
62
|
+
/* ── Surfaces ─────────────────────────────────────────── */
|
|
63
|
+
--bg: #0d0c18;
|
|
64
|
+
--sb: #141222;
|
|
65
|
+
--card: #1c1a2e;
|
|
66
|
+
--bdr: #2c2a42;
|
|
67
|
+
|
|
68
|
+
/* ── Text ─────────────────────────────────────────────── */
|
|
69
|
+
--txt: #eae8f5;
|
|
70
|
+
--sub: #8e8ba8;
|
|
71
|
+
--muted: #504e68;
|
|
72
|
+
|
|
73
|
+
/* ── Accent ───────────────────────────────────────────── */
|
|
74
|
+
--acc: #9d71f0;
|
|
75
|
+
--acc-l: #231950;
|
|
76
|
+
--acc-m: #5e3eaa;
|
|
77
|
+
|
|
78
|
+
/* ── Semantic ─────────────────────────────────────────── */
|
|
79
|
+
--suc: #10b981;
|
|
80
|
+
--suc-l: #022c22;
|
|
81
|
+
--warn: #fbbf24;
|
|
82
|
+
--warn-l: #1a1000;
|
|
83
|
+
--err: #f87171;
|
|
84
|
+
--err-l: #200808;
|
|
85
|
+
--info: #38bdf8;
|
|
86
|
+
--info-l: #0a2838;
|
|
87
|
+
|
|
88
|
+
/* ── AI gradient ──────────────────────────────────────── */
|
|
89
|
+
--ai1: #7c3aed;
|
|
90
|
+
--ai2: #c026d3;
|
|
91
|
+
--ai-soft: linear-gradient(135deg, rgba(157, 113, 240, 0.16), rgba(192, 38, 211, 0.12));
|
|
92
|
+
|
|
93
|
+
/* ── Elevation ────────────────────────────────────────── */
|
|
94
|
+
--shd: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
|
|
95
|
+
--shd2: 0 4px 20px rgba(0, 0, 0, 0.45);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* ============================================================
|
|
99
|
+
Type — DM Sans (UI) + DM Mono (code / tokens)
|
|
100
|
+
Load via:
|
|
101
|
+
https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap
|
|
102
|
+
============================================================ */
|
|
103
|
+
:root {
|
|
104
|
+
--font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
|
|
105
|
+
--font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
|
|
106
|
+
|
|
107
|
+
/* Type scale (px) */
|
|
108
|
+
--fs-page: 21px; /* page title · 700 · -0.5px */
|
|
109
|
+
--fs-card: 14px; /* card title · 600 */
|
|
110
|
+
--fs-body: 13px; /* body / control · 450 */
|
|
111
|
+
--fs-sub: 12px; /* secondary · 500 */
|
|
112
|
+
--fs-hint: 11.5px; /* hint / meta · 450 */
|
|
113
|
+
--fs-label: 10px; /* section label · 600 · UPPER */
|
|
114
|
+
}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://design-tokens.github.io/community-group/format/",
|
|
3
|
+
"name": "ActuateCMS",
|
|
4
|
+
"version": "1.0.0",
|
|
5
|
+
"description": "Design tokens for the ActuateCMS admin interface. Two themes: light (default) and dark.",
|
|
6
|
+
"color": {
|
|
7
|
+
"light": {
|
|
8
|
+
"surface": {
|
|
9
|
+
"bg": { "value": "#F5F4FA", "comment": "App background" },
|
|
10
|
+
"sb": { "value": "#FFFFFF", "comment": "Sidebar / topbar surface" },
|
|
11
|
+
"card": { "value": "#FFFFFF", "comment": "Card / panel surface" },
|
|
12
|
+
"bdr": { "value": "#E8E6F2", "comment": "Hairline border" }
|
|
13
|
+
},
|
|
14
|
+
"text": {
|
|
15
|
+
"txt": { "value": "#1A1827", "comment": "Primary text" },
|
|
16
|
+
"sub": { "value": "#6B6878", "comment": "Secondary text" },
|
|
17
|
+
"muted": { "value": "#B0ADBE", "comment": "Tertiary / placeholder" }
|
|
18
|
+
},
|
|
19
|
+
"accent": {
|
|
20
|
+
"acc": { "value": "#7C3AED", "comment": "Accent / interactive" },
|
|
21
|
+
"acc-l": { "value": "#EDE9FE", "comment": "Accent tint (hover/active bg)" },
|
|
22
|
+
"acc-m": { "value": "#C4B5FD", "comment": "Accent mid (focus ring)" }
|
|
23
|
+
},
|
|
24
|
+
"semantic": {
|
|
25
|
+
"suc": { "value": "#059669" },
|
|
26
|
+
"suc-l": { "value": "#ECFDF5" },
|
|
27
|
+
"warn": { "value": "#D97706" },
|
|
28
|
+
"warn-l": { "value": "#FFFBEB" },
|
|
29
|
+
"err": { "value": "#DC2626" },
|
|
30
|
+
"err-l": { "value": "#FEF2F2" },
|
|
31
|
+
"info": { "value": "#0891B2" },
|
|
32
|
+
"info-l": { "value": "#E0F7FA" }
|
|
33
|
+
},
|
|
34
|
+
"ai": {
|
|
35
|
+
"ai1": { "value": "#7C3AED" },
|
|
36
|
+
"ai2": { "value": "#C026D3" }
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
"dark": {
|
|
40
|
+
"surface": {
|
|
41
|
+
"bg": { "value": "#0D0C18" },
|
|
42
|
+
"sb": { "value": "#141222" },
|
|
43
|
+
"card": { "value": "#1C1A2E" },
|
|
44
|
+
"bdr": { "value": "#2C2A42" }
|
|
45
|
+
},
|
|
46
|
+
"text": {
|
|
47
|
+
"txt": { "value": "#EAE8F5" },
|
|
48
|
+
"sub": { "value": "#8E8BA8" },
|
|
49
|
+
"muted": { "value": "#504E68" }
|
|
50
|
+
},
|
|
51
|
+
"accent": {
|
|
52
|
+
"acc": { "value": "#9D71F0" },
|
|
53
|
+
"acc-l": { "value": "#231950" },
|
|
54
|
+
"acc-m": { "value": "#5E3EAA" }
|
|
55
|
+
},
|
|
56
|
+
"semantic": {
|
|
57
|
+
"suc": { "value": "#10B981" },
|
|
58
|
+
"suc-l": { "value": "#022C22" },
|
|
59
|
+
"warn": { "value": "#FBBF24" },
|
|
60
|
+
"warn-l": { "value": "#1A1000" },
|
|
61
|
+
"err": { "value": "#F87171" },
|
|
62
|
+
"err-l": { "value": "#200808" },
|
|
63
|
+
"info": { "value": "#38BDF8" },
|
|
64
|
+
"info-l": { "value": "#0A2838" }
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
"accentOptions": {
|
|
69
|
+
"comment": "Selectable admin accent colors (Appearance settings). All swap into --acc.",
|
|
70
|
+
"purple": { "value": "#7C3AED" },
|
|
71
|
+
"blue": { "value": "#2563EB" },
|
|
72
|
+
"teal": { "value": "#0D9488" },
|
|
73
|
+
"pink": { "value": "#DB2777" },
|
|
74
|
+
"orange": { "value": "#EA580C" }
|
|
75
|
+
},
|
|
76
|
+
"font": {
|
|
77
|
+
"family": {
|
|
78
|
+
"sans": {
|
|
79
|
+
"value": "'DM Sans', system-ui, -apple-system, sans-serif",
|
|
80
|
+
"comment": "UI text"
|
|
81
|
+
},
|
|
82
|
+
"mono": {
|
|
83
|
+
"value": "'DM Mono', ui-monospace, monospace",
|
|
84
|
+
"comment": "Code, tokens, keys"
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
"size": {
|
|
88
|
+
"page": {
|
|
89
|
+
"value": "21px",
|
|
90
|
+
"weight": 700,
|
|
91
|
+
"letterSpacing": "-0.5px",
|
|
92
|
+
"comment": "Page title"
|
|
93
|
+
},
|
|
94
|
+
"card": {
|
|
95
|
+
"value": "14px",
|
|
96
|
+
"weight": 600,
|
|
97
|
+
"comment": "Card / section title"
|
|
98
|
+
},
|
|
99
|
+
"body": {
|
|
100
|
+
"value": "13px",
|
|
101
|
+
"weight": 450,
|
|
102
|
+
"comment": "Body, controls, table cells"
|
|
103
|
+
},
|
|
104
|
+
"sub": { "value": "12px", "weight": 500, "comment": "Secondary / captions" },
|
|
105
|
+
"hint": { "value": "11.5px", "weight": 450, "comment": "Hints, metadata" },
|
|
106
|
+
"label": {
|
|
107
|
+
"value": "10px",
|
|
108
|
+
"weight": 600,
|
|
109
|
+
"letterSpacing": "0.8px",
|
|
110
|
+
"textTransform": "uppercase",
|
|
111
|
+
"comment": "Section labels"
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
"dimension": {
|
|
116
|
+
"sidebarWidth": { "value": "224px" },
|
|
117
|
+
"sidebarWidthCollapsed": { "value": "60px" },
|
|
118
|
+
"topbarHeight": { "value": "56px" },
|
|
119
|
+
"radius": { "value": "10px", "comment": "Base card radius" },
|
|
120
|
+
"radiusControl": { "value": "8px", "comment": "Buttons, inputs" },
|
|
121
|
+
"radiusSmall": { "value": "6px", "comment": "Badges, tags" },
|
|
122
|
+
"radiusPill": { "value": "99px", "comment": "Toggles, progress bars" }
|
|
123
|
+
},
|
|
124
|
+
"elevation": {
|
|
125
|
+
"light": {
|
|
126
|
+
"shd": {
|
|
127
|
+
"value": "0 1px 2px rgba(0,0,0,.05), 0 1px 4px rgba(0,0,0,.04)",
|
|
128
|
+
"comment": "Card resting"
|
|
129
|
+
},
|
|
130
|
+
"shd2": {
|
|
131
|
+
"value": "0 4px 16px rgba(0,0,0,.1)",
|
|
132
|
+
"comment": "Popovers, modals, hover"
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
"dark": {
|
|
136
|
+
"shd": { "value": "0 1px 2px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.2)" },
|
|
137
|
+
"shd2": { "value": "0 4px 20px rgba(0,0,0,.45)" }
|
|
138
|
+
}
|
|
139
|
+
},
|
|
140
|
+
"motion": {
|
|
141
|
+
"fast": { "value": "0.12s", "comment": "Hover / color transitions" },
|
|
142
|
+
"base": { "value": "0.18s", "comment": "Toggles, modal-in" },
|
|
143
|
+
"layout": {
|
|
144
|
+
"value": "0.22s",
|
|
145
|
+
"easing": "cubic-bezier(.4,0,.2,1)",
|
|
146
|
+
"comment": "Sidebar collapse"
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
// ============================================================
|
|
2
|
+
// ActuateCMS — SCSS Design Tokens
|
|
3
|
+
// Version 1.0 · Developer handoff
|
|
4
|
+
// ------------------------------------------------------------
|
|
5
|
+
// Two ways to consume:
|
|
6
|
+
// 1. Use the Sass maps + $acms-css-vars mixin to emit the same
|
|
7
|
+
// CSS custom properties as tokens.css (recommended — keeps
|
|
8
|
+
// runtime theming via [data-theme]).
|
|
9
|
+
// 2. Reference the raw $acms-* Sass variables directly at
|
|
10
|
+
// build time if you don't need runtime theme switching.
|
|
11
|
+
// ============================================================
|
|
12
|
+
|
|
13
|
+
// ── Type ─────────────────────────────────────────────────────
|
|
14
|
+
$acms-font-sans: ('DM Sans', system-ui, -apple-system, sans-serif);
|
|
15
|
+
$acms-font-mono: ('DM Mono', ui-monospace, 'SFMono-Regular', monospace);
|
|
16
|
+
|
|
17
|
+
// Type scale (name: (size, weight, letter-spacing))
|
|
18
|
+
$acms-type: (
|
|
19
|
+
page: (21px, 700, -0.5px),
|
|
20
|
+
card: (14px, 600, 0),
|
|
21
|
+
body: (13px, 450, 0),
|
|
22
|
+
sub: (12px, 500, 0),
|
|
23
|
+
hint: (11.5px, 450, 0),
|
|
24
|
+
label: (10px, 600, 0.8px),
|
|
25
|
+
);
|
|
26
|
+
|
|
27
|
+
// ── Dimensions ───────────────────────────────────────────────
|
|
28
|
+
$acms-sidebar-width: 224px;
|
|
29
|
+
$acms-sidebar-width-collapsed: 60px;
|
|
30
|
+
$acms-topbar-height: 56px;
|
|
31
|
+
$acms-radius: 10px; // cards
|
|
32
|
+
$acms-radius-control: 8px; // buttons, inputs
|
|
33
|
+
$acms-radius-small: 6px; // badges, tags
|
|
34
|
+
$acms-radius-pill: 99px; // toggles, progress
|
|
35
|
+
|
|
36
|
+
// ── Motion ───────────────────────────────────────────────────
|
|
37
|
+
$acms-motion-fast: 0.12s;
|
|
38
|
+
$acms-motion-base: 0.18s;
|
|
39
|
+
$acms-motion-layout: 0.22s;
|
|
40
|
+
$acms-ease-layout: cubic-bezier(0.4, 0, 0.2, 1);
|
|
41
|
+
|
|
42
|
+
// ── Accent options (Appearance setting) ──────────────────────
|
|
43
|
+
$acms-accents: (
|
|
44
|
+
purple: #7c3aed,
|
|
45
|
+
// default
|
|
46
|
+
blue: #2563eb,
|
|
47
|
+
teal: #0d9488,
|
|
48
|
+
pink: #db2777,
|
|
49
|
+
orange: #ea580c,
|
|
50
|
+
);
|
|
51
|
+
|
|
52
|
+
// ── Theme maps ───────────────────────────────────────────────
|
|
53
|
+
$acms-light: (
|
|
54
|
+
bg: #f5f4fa,
|
|
55
|
+
sb: #ffffff,
|
|
56
|
+
card: #ffffff,
|
|
57
|
+
bdr: #e8e6f2,
|
|
58
|
+
txt: #1a1827,
|
|
59
|
+
sub: #6b6878,
|
|
60
|
+
muted: #b0adbe,
|
|
61
|
+
acc: #7c3aed,
|
|
62
|
+
acc-l: #ede9fe,
|
|
63
|
+
acc-m: #c4b5fd,
|
|
64
|
+
suc: #059669,
|
|
65
|
+
suc-l: #ecfdf5,
|
|
66
|
+
warn: #d97706,
|
|
67
|
+
warn-l: #fffbeb,
|
|
68
|
+
err: #dc2626,
|
|
69
|
+
err-l: #fef2f2,
|
|
70
|
+
info: #0891b2,
|
|
71
|
+
info-l: #e0f7fa,
|
|
72
|
+
ai1: #7c3aed,
|
|
73
|
+
ai2: #c026d3,
|
|
74
|
+
shd: (0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.04)),
|
|
75
|
+
shd2: (0 4px 16px rgba(0, 0, 0, 0.1)),
|
|
76
|
+
);
|
|
77
|
+
|
|
78
|
+
$acms-dark: (
|
|
79
|
+
bg: #0d0c18,
|
|
80
|
+
sb: #141222,
|
|
81
|
+
card: #1c1a2e,
|
|
82
|
+
bdr: #2c2a42,
|
|
83
|
+
txt: #eae8f5,
|
|
84
|
+
sub: #8e8ba8,
|
|
85
|
+
muted: #504e68,
|
|
86
|
+
acc: #9d71f0,
|
|
87
|
+
acc-l: #231950,
|
|
88
|
+
acc-m: #5e3eaa,
|
|
89
|
+
suc: #10b981,
|
|
90
|
+
suc-l: #022c22,
|
|
91
|
+
warn: #fbbf24,
|
|
92
|
+
warn-l: #1a1000,
|
|
93
|
+
err: #f87171,
|
|
94
|
+
err-l: #200808,
|
|
95
|
+
info: #38bdf8,
|
|
96
|
+
info-l: #0a2838,
|
|
97
|
+
ai1: #7c3aed,
|
|
98
|
+
ai2: #c026d3,
|
|
99
|
+
shd: (0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2)),
|
|
100
|
+
shd2: (0 4px 20px rgba(0, 0, 0, 0.45)),
|
|
101
|
+
);
|
|
102
|
+
|
|
103
|
+
// Emit a theme map as CSS custom properties (--name).
|
|
104
|
+
@mixin acms-css-vars($theme) {
|
|
105
|
+
@each $name, $value in $theme {
|
|
106
|
+
--#{$name}: #{$value};
|
|
107
|
+
}
|
|
108
|
+
}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ActuateCMS — Tailwind token preset (CommonJS for tailwind.config.js)
|
|
3
|
+
* Version 1.0 · Developer handoff
|
|
4
|
+
*
|
|
5
|
+
* Runtime theming: include tokens.css, then preset colors resolve via CSS vars.
|
|
6
|
+
* Dark mode: `darkMode: ['selector', '[data-theme="dark"]']` on `<html>`.
|
|
7
|
+
*
|
|
8
|
+
* Admin note: `@actuate-media/cms-admin` uses Tailwind v4 + scoped `.actuate-admin.dark`
|
|
9
|
+
* instead of `[data-theme]` — see design-system/README.md.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
const v =
|
|
13
|
+
(name) =>
|
|
14
|
+
({ opacityValue } = {}) =>
|
|
15
|
+
opacityValue === undefined
|
|
16
|
+
? `var(${name})`
|
|
17
|
+
: `color-mix(in srgb, var(${name}) ${opacityValue * 100}%, transparent)`
|
|
18
|
+
|
|
19
|
+
/** @type {import('tailwindcss').Config} */
|
|
20
|
+
module.exports = {
|
|
21
|
+
darkMode: ['selector', '[data-theme="dark"]'],
|
|
22
|
+
theme: {
|
|
23
|
+
extend: {
|
|
24
|
+
colors: {
|
|
25
|
+
bg: v('--bg'),
|
|
26
|
+
sb: v('--sb'),
|
|
27
|
+
card: v('--card'),
|
|
28
|
+
bdr: v('--bdr'),
|
|
29
|
+
txt: v('--txt'),
|
|
30
|
+
sub: v('--sub'),
|
|
31
|
+
muted: v('--muted'),
|
|
32
|
+
acc: { DEFAULT: v('--acc'), light: v('--acc-l'), mid: v('--acc-m') },
|
|
33
|
+
suc: { DEFAULT: v('--suc'), light: v('--suc-l') },
|
|
34
|
+
warn: { DEFAULT: v('--warn'), light: v('--warn-l') },
|
|
35
|
+
err: { DEFAULT: v('--err'), light: v('--err-l') },
|
|
36
|
+
info: { DEFAULT: v('--info'), light: v('--info-l') },
|
|
37
|
+
ai1: v('--ai1'),
|
|
38
|
+
ai2: v('--ai2'),
|
|
39
|
+
},
|
|
40
|
+
fontFamily: {
|
|
41
|
+
sans: ['DM Sans', 'system-ui', '-apple-system', 'sans-serif'],
|
|
42
|
+
mono: ['DM Mono', 'ui-monospace', 'monospace'],
|
|
43
|
+
},
|
|
44
|
+
fontSize: {
|
|
45
|
+
page: ['21px', { letterSpacing: '-0.5px', fontWeight: '700' }],
|
|
46
|
+
card: ['14px', { fontWeight: '600' }],
|
|
47
|
+
body: ['13px', { fontWeight: '450' }],
|
|
48
|
+
sub: ['12px', { fontWeight: '500' }],
|
|
49
|
+
hint: ['11.5px', { fontWeight: '450' }],
|
|
50
|
+
label: ['10px', { letterSpacing: '0.8px', fontWeight: '600' }],
|
|
51
|
+
},
|
|
52
|
+
borderRadius: {
|
|
53
|
+
DEFAULT: '10px',
|
|
54
|
+
control: '8px',
|
|
55
|
+
badge: '6px',
|
|
56
|
+
pill: '99px',
|
|
57
|
+
},
|
|
58
|
+
boxShadow: {
|
|
59
|
+
card: 'var(--shd)',
|
|
60
|
+
pop: 'var(--shd2)',
|
|
61
|
+
},
|
|
62
|
+
width: { sidebar: '224px', 'sidebar-col': '60px' },
|
|
63
|
+
height: { topbar: '56px' },
|
|
64
|
+
spacing: { topbar: '56px', sidebar: '224px' },
|
|
65
|
+
transitionTimingFunction: {
|
|
66
|
+
layout: 'cubic-bezier(.4, 0, .2, 1)',
|
|
67
|
+
},
|
|
68
|
+
transitionDuration: {
|
|
69
|
+
fast: '120ms',
|
|
70
|
+
base: '180ms',
|
|
71
|
+
layout: '220ms',
|
|
72
|
+
},
|
|
73
|
+
backgroundImage: {
|
|
74
|
+
ai: 'linear-gradient(135deg, var(--ai1), var(--ai2))',
|
|
75
|
+
'ai-soft': 'var(--ai-soft)',
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
},
|
|
79
|
+
plugins: [],
|
|
80
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ui-primitives.test.d.ts","sourceRoot":"","sources":["../../../src/__tests__/components/ui-primitives.test.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
// @vitest-environment happy-dom
|
|
3
|
+
import { describe, expect, it, vi } from 'vitest';
|
|
4
|
+
import { render, screen } from '@testing-library/react';
|
|
5
|
+
import { StatusBadge } from '../../components/ui/StatusBadge.js';
|
|
6
|
+
import { FilterPill } from '../../components/ui/FilterPill.js';
|
|
7
|
+
import { StatPill } from '../../components/ui/StatPill.js';
|
|
8
|
+
describe('StatusBadge', () => {
|
|
9
|
+
it('renders the label with a leading dot by default', () => {
|
|
10
|
+
const { container } = render(_jsx(StatusBadge, { tone: "success", children: "Published" }));
|
|
11
|
+
expect(screen.getByText('Published')).toBeTruthy();
|
|
12
|
+
expect(container.querySelectorAll('[aria-hidden]')).toHaveLength(1);
|
|
13
|
+
});
|
|
14
|
+
it('omits the dot when dot={false}', () => {
|
|
15
|
+
const { container } = render(_jsx(StatusBadge, { tone: "neutral", dot: false, children: "Draft" }));
|
|
16
|
+
expect(container.querySelectorAll('[aria-hidden]')).toHaveLength(0);
|
|
17
|
+
});
|
|
18
|
+
it('forwards aria-label for screen readers', () => {
|
|
19
|
+
const { container } = render(_jsx(StatusBadge, { tone: "warning", "aria-label": "Status: Scheduled", children: "Scheduled" }));
|
|
20
|
+
expect(container.querySelector('[aria-label="Status: Scheduled"]')).toBeTruthy();
|
|
21
|
+
});
|
|
22
|
+
});
|
|
23
|
+
describe('FilterPill', () => {
|
|
24
|
+
it('exposes active state via aria-pressed and fires onClick', () => {
|
|
25
|
+
const onClick = vi.fn();
|
|
26
|
+
render(_jsx(FilterPill, { active: true, onClick: onClick, children: "All" }));
|
|
27
|
+
const btn = screen.getByRole('button', { name: 'All' });
|
|
28
|
+
expect(btn.getAttribute('aria-pressed')).toBe('true');
|
|
29
|
+
btn.click();
|
|
30
|
+
expect(onClick).toHaveBeenCalledTimes(1);
|
|
31
|
+
});
|
|
32
|
+
it('renders an optional count', () => {
|
|
33
|
+
render(_jsx(FilterPill, { count: 12, children: "Admin" }));
|
|
34
|
+
expect(screen.getByText('12')).toBeTruthy();
|
|
35
|
+
expect(screen.getByRole('button', { name: /Admin/ }).getAttribute('aria-pressed')).toBe('false');
|
|
36
|
+
});
|
|
37
|
+
});
|
|
38
|
+
describe('StatPill', () => {
|
|
39
|
+
it('renders value and label', () => {
|
|
40
|
+
render(_jsx(StatPill, { value: 8, label: "Active" }));
|
|
41
|
+
expect(screen.getByText('8')).toBeTruthy();
|
|
42
|
+
expect(screen.getByText('Active')).toBeTruthy();
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
//# sourceMappingURL=ui-primitives.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ui-primitives.test.js","sourceRoot":"","sources":["../../../src/__tests__/components/ui-primitives.test.tsx"],"names":[],"mappings":";AAAA,gCAAgC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAE1D,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,iDAAiD,EAAE,GAAG,EAAE;QACzD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,WAAW,IAAC,IAAI,EAAC,SAAS,0BAAwB,CAAC,CAAA;QACjF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;QAClD,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA;IACrE,CAAC,CAAC,CAAA;IACF,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;QACxC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,WAAW,IAAC,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,KAAK,sBAExB,CACf,CAAA;QACD,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA;IACrE,CAAC,CAAC,CAAA;IACF,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QAChD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,WAAW,IAAC,IAAI,EAAC,SAAS,gBAAY,mBAAmB,0BAE5C,CACf,CAAA;QACD,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;IAClF,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,yDAAyD,EAAE,GAAG,EAAE;QACjE,MAAM,OAAO,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;QACvB,MAAM,CACJ,KAAC,UAAU,IAAC,MAAM,QAAC,OAAO,EAAE,OAAO,oBAEtB,CACd,CAAA;QACD,MAAM,GAAG,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAA;QACvD,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QACrD,GAAG,CAAC,KAAK,EAAE,CAAA;QACX,MAAM,CAAC,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAA;IAC1C,CAAC,CAAC,CAAA;IACF,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACnC,MAAM,CAAC,KAAC,UAAU,IAAC,KAAK,EAAE,EAAE,sBAAoB,CAAC,CAAA;QACjD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;QAC3C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAClG,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,MAAM,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,QAAQ,GAAG,CAAC,CAAA;QAC7C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;QAC1C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;IACjD,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
|
|
@@ -10,8 +10,15 @@ describe('layout primitive tokens', () => {
|
|
|
10
10
|
});
|
|
11
11
|
it('exposes the canonical radius scale', () => {
|
|
12
12
|
expect(tokens.radius.none).toBe(0);
|
|
13
|
-
expect(tokens.radius.
|
|
14
|
-
expect(tokens.radius.
|
|
13
|
+
expect(tokens.radius.sm).toBe(6);
|
|
14
|
+
expect(tokens.radius.md).toBe(8);
|
|
15
|
+
expect(tokens.radius.lg).toBe(10);
|
|
16
|
+
expect(tokens.radius.full).toBe(99);
|
|
17
|
+
});
|
|
18
|
+
it('exposes layout dimensions from the design system', () => {
|
|
19
|
+
expect(tokens.layout.sidebarWidth).toBe(224);
|
|
20
|
+
expect(tokens.layout.sidebarWidthCollapsed).toBe(60);
|
|
21
|
+
expect(tokens.layout.topbarHeight).toBe(56);
|
|
15
22
|
});
|
|
16
23
|
it('exposes the canonical breakpoint scale', () => {
|
|
17
24
|
expect(tokens.breakpoint.sm).toBe(640);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"primitives.test.js","sourceRoot":"","sources":["../../../src/__tests__/layout/primitives.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAA;AAC1D,OAAO,KAAK,UAAU,MAAM,kCAAkC,CAAA;AAE9D,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;QAC7C,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACjC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACjC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;QAClC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IACpC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC5C,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QAClC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QAChC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"primitives.test.js","sourceRoot":"","sources":["../../../src/__tests__/layout/primitives.test.ts"],"names":[],"mappings":"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"}
|
|
@@ -50,7 +50,7 @@ function updateAvailable(overrides = {}) {
|
|
|
50
50
|
pluginCompatibility: [
|
|
51
51
|
{ name: '@actuate-media/plugin-seo', compatible: true, minVersion: '0.46.0' },
|
|
52
52
|
],
|
|
53
|
-
updateCommand: 'npm
|
|
53
|
+
updateCommand: 'npx actuate upgrade && npm install && npx actuate db:sync && npx prisma migrate deploy',
|
|
54
54
|
canManage: true,
|
|
55
55
|
hasGithubToken: false,
|
|
56
56
|
githubRepo: '',
|