@sarimarcus/content-sites-ui 0.2.0-rc.0 → 0.3.0-rc.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 +8 -0
- package/README.md +15 -0
- package/package.json +4 -3
- package/src/styles/theme.css +40 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
All packages in the platform release in lockstep; entries are per release version.
|
|
4
4
|
|
|
5
|
+
## 0.3.0-rc.0 (2026-09-29)
|
|
6
|
+
|
|
7
|
+
- `./theme.css`: the semantic theme roles as `--color-X: var(--X)` (18 existing roles moved from the sites, plus `primary`/`secondary`/`accent` `-strong`/`-soft`, `overlay`, `overlay-foreground`) and the radius scale. Sites set the values in `:root` (SLA-2821).
|
|
8
|
+
|
|
9
|
+
## 0.2.0 (2026-09-29)
|
|
10
|
+
|
|
11
|
+
- Stable release of 0.2.0-rc.0, unchanged (SLA-2733).
|
|
12
|
+
|
|
5
13
|
## 0.2.0-rc.0 (2026-09-29)
|
|
6
14
|
|
|
7
15
|
- No changes; lockstep release with core (SLA-2733).
|
package/README.md
CHANGED
|
@@ -18,3 +18,18 @@ Tailwind v4 does not scan `node_modules`, so a site must import the package's so
|
|
|
18
18
|
```
|
|
19
19
|
|
|
20
20
|
Without it, utility classes used only inside package components are silently missing from the site's CSS.
|
|
21
|
+
|
|
22
|
+
## Theme
|
|
23
|
+
|
|
24
|
+
`theme.css` declares the semantic roles package components use (`primary`, `primary-strong`, `muted-foreground`,
|
|
25
|
+
`overlay`, the radius scale, …) as `--color-X: var(--X)`. Import it right after the site's own `@theme inline`
|
|
26
|
+
block, then set every `--X`, plus `--radius`, in the site's `:root`:
|
|
27
|
+
|
|
28
|
+
```css
|
|
29
|
+
@theme inline { /* the site's palette and --font-display / --font-body */ }
|
|
30
|
+
@import "@sarimarcus/content-sites-ui/theme.css";
|
|
31
|
+
:root { --primary: …; --primary-strong: …; /* every role */ }
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
The values are runtime vars, so a `.dark` block and plain (non-Tailwind) stylesheets read them too.
|
|
35
|
+
`scripts/platform/validate-theme-contract.mjs` checks that every role has a value.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sarimarcus/content-sites-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0-rc.0",
|
|
4
4
|
"description": "Universal Astro UI components, layout shell and design tokens shared by the content sites.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -35,12 +35,13 @@
|
|
|
35
35
|
"./navigation": "./src/navigation/index.ts",
|
|
36
36
|
"./types": "./src/types/index.ts",
|
|
37
37
|
"./tailwind.css": "./src/styles/tailwind.css",
|
|
38
|
-
"./widths.css": "./src/styles/widths.css"
|
|
38
|
+
"./widths.css": "./src/styles/widths.css",
|
|
39
|
+
"./theme.css": "./src/styles/theme.css"
|
|
39
40
|
},
|
|
40
41
|
"peerDependencies": {
|
|
41
42
|
"@lucide/astro": "^1.23.0",
|
|
42
43
|
"astro": "^7.0.6",
|
|
43
44
|
"tailwindcss": "^4.1.18",
|
|
44
|
-
"@sarimarcus/content-sites-core": "0.
|
|
45
|
+
"@sarimarcus/content-sites-core": "0.3.0-rc.0"
|
|
45
46
|
}
|
|
46
47
|
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/* Semantic theme roles. A site imports this right after its own `@theme inline` block and sets a value for every
|
|
2
|
+
role below in its `:root` (`--X` for each `--color-X: var(--X)`), plus `--radius`. Runtime vars, so a site's
|
|
3
|
+
`.dark` block and its non-Tailwind sheets (consent, search, map) read the same values. No brand names here:
|
|
4
|
+
scripts/platform/theme-contract.mjs checks both rules. */
|
|
5
|
+
@theme inline {
|
|
6
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
7
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
8
|
+
--radius-lg: var(--radius);
|
|
9
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
10
|
+
--radius-2xl: calc(var(--radius) + 8px);
|
|
11
|
+
--radius-3xl: calc(var(--radius) + 12px);
|
|
12
|
+
--radius-4xl: calc(var(--radius) + 16px);
|
|
13
|
+
|
|
14
|
+
--color-background: var(--background);
|
|
15
|
+
--color-foreground: var(--foreground);
|
|
16
|
+
--color-card: var(--card);
|
|
17
|
+
--color-card-foreground: var(--card-foreground);
|
|
18
|
+
--color-popover: var(--popover);
|
|
19
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
20
|
+
--color-primary: var(--primary);
|
|
21
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
22
|
+
--color-primary-strong: var(--primary-strong);
|
|
23
|
+
--color-primary-soft: var(--primary-soft);
|
|
24
|
+
--color-secondary: var(--secondary);
|
|
25
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
26
|
+
--color-secondary-strong: var(--secondary-strong);
|
|
27
|
+
--color-secondary-soft: var(--secondary-soft);
|
|
28
|
+
--color-muted: var(--muted);
|
|
29
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
30
|
+
--color-accent: var(--accent);
|
|
31
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
32
|
+
--color-accent-strong: var(--accent-strong);
|
|
33
|
+
--color-accent-soft: var(--accent-soft);
|
|
34
|
+
--color-destructive: var(--destructive);
|
|
35
|
+
--color-border: var(--border);
|
|
36
|
+
--color-input: var(--input);
|
|
37
|
+
--color-ring: var(--ring);
|
|
38
|
+
--color-overlay: var(--overlay);
|
|
39
|
+
--color-overlay-foreground: var(--overlay-foreground);
|
|
40
|
+
}
|