@actuate-media/cms-admin 0.63.2 → 0.64.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 +10 -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__/layout/primitives.test.js +9 -2
- package/dist/__tests__/layout/primitives.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/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/seo/primitives.d.ts.map +1 -1
- package/dist/components/seo/primitives.js +2 -1
- 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/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/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 +3 -0
- package/dist/components/ui/index.d.ts.map +1 -1
- package/dist/components/ui/index.js +2 -0
- package/dist/components/ui/index.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/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/Forms.js +2 -2
- package/dist/views/Forms.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/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 +2 -1
- package/dist/views/settings/components.js.map +1 -1
- package/package.json +8 -3
- package/src/__tests__/layout/primitives.test.ts +10 -2
- package/src/components/EnabledSwitch.tsx +4 -22
- 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/seo/primitives.tsx +8 -7
- package/src/components/ui/Button.tsx +1 -1
- package/src/components/ui/Card.tsx +35 -18
- 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/Toggle.tsx +85 -0
- package/src/components/ui/form-control.ts +12 -0
- package/src/components/ui/index.ts +3 -0
- package/src/layout/Header.tsx +6 -2
- package/src/layout/Sidebar.tsx +3 -3
- 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/Forms.tsx +4 -6
- package/src/views/page-builder/BottomBar.tsx +3 -6
- package/src/views/seo/TechnicalTab.tsx +3 -6
- package/src/views/settings/components.tsx +11 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @actuate-media/cms-admin
|
|
2
2
|
|
|
3
|
+
## 0.64.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 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.
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- 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.
|
|
12
|
+
|
|
3
13
|
## 0.63.2
|
|
4
14
|
|
|
5
15
|
### 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
|
+
}
|
|
@@ -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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"}
|