srcdev-nuxt-components 9.0.5 → 9.0.6
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.
|
@@ -4,6 +4,17 @@
|
|
|
4
4
|
|
|
5
5
|
`EyebrowText` renders a short uppercase label — typically used above a heading to provide context or categorisation. It outputs a single string with configurable tag, size, and colour via CSS custom properties.
|
|
6
6
|
|
|
7
|
+
## Before Adding to a Page
|
|
8
|
+
|
|
9
|
+
Always ask the user for the following before placing the component:
|
|
10
|
+
|
|
11
|
+
1. **`textContent`** — what is the label text? (passed as-is — do not pre-uppercase)
|
|
12
|
+
2. **`fontSize`** — which size? (`large` | `medium` | `small`) — default is `medium`
|
|
13
|
+
3. **`tag`** — does it need to be inline? If yes, use `span`. Otherwise `p` or `div` (default).
|
|
14
|
+
4. **`styleClassPassthrough`** — any extra classes to add? (layout, spacing, custom styling hooks)
|
|
15
|
+
|
|
16
|
+
Do not assume placeholder text or default content.
|
|
17
|
+
|
|
7
18
|
## Props
|
|
8
19
|
|
|
9
20
|
| Prop | Type | Default | Required |
|
|
@@ -59,6 +70,7 @@ Define these CSS custom properties in your consuming app to control sizes.
|
|
|
59
70
|
## Styling
|
|
60
71
|
|
|
61
72
|
Key CSS custom properties:
|
|
73
|
+
|
|
62
74
|
- `--colour-text-eyebrow` — text colour (defaults to an accent/muted tone)
|
|
63
75
|
|
|
64
76
|
Text is always `text-transform: uppercase` — do not pass pre-uppercased strings, as this makes content harder to edit and search.
|
|
@@ -4,6 +4,18 @@
|
|
|
4
4
|
|
|
5
5
|
`HeroText` renders a styled heading with support for mixed text styling (normal/accent segments), configurable font size, layout axis, and an optional icon. It uses Playfair Display font with italic variation for accent segments.
|
|
6
6
|
|
|
7
|
+
## Before Adding to a Page
|
|
8
|
+
|
|
9
|
+
Always ask the user for the following before placing the component:
|
|
10
|
+
|
|
11
|
+
1. **`tag`** — what heading level? (`h1` | `h2` | `h3` | `h4` | `h5` | `h6`)
|
|
12
|
+
2. **Text segments** — for each segment, what is the text and should it be `normal` (default) or `accent` (italic, `--colour-text-accent` colour)?
|
|
13
|
+
3. **`axis`** — should segments sit inline (`horizontal`, default) or stack in a column (`vertical`)?
|
|
14
|
+
4. **`fontSize`** — which size? (`display` | `title` | `heading` | `subheading` | `label`) — default is `title`
|
|
15
|
+
5. **`styleClassPassthrough`** — any extra classes to add? (layout, spacing, custom styling hooks)
|
|
16
|
+
|
|
17
|
+
Do not assume placeholder text or default content.
|
|
18
|
+
|
|
7
19
|
## Props
|
|
8
20
|
|
|
9
21
|
| Prop | Type | Default | Required |
|
|
@@ -87,6 +99,7 @@ Define these CSS custom properties in your consuming app to control sizes.
|
|
|
87
99
|
Override via `styleClassPassthrough` or a parent HOC `<style>` block targeting `.hero-text`.
|
|
88
100
|
|
|
89
101
|
Key CSS custom properties:
|
|
102
|
+
|
|
90
103
|
- `--colour-text-accent` — colour applied to `.accent` spans and the icon
|
|
91
104
|
- `--hero-text-{scale}` — font size per scale value
|
|
92
105
|
|
|
@@ -229,6 +229,18 @@ export default defineNuxtConfig({
|
|
|
229
229
|
|
|
230
230
|
The consuming app's CSS loads after the layer's, so your token overrides win via the cascade.
|
|
231
231
|
|
|
232
|
+
## rem sizing
|
|
233
|
+
|
|
234
|
+
`html` has `font-size: 62.5%` set in `app/assets/styles/setup/01.config/_head.css`, making `1rem = 10px`. Use this when writing any rem values in your theme or component styles:
|
|
235
|
+
|
|
236
|
+
| px | rem |
|
|
237
|
+
| ---- | ------ |
|
|
238
|
+
| 8px | 0.8rem |
|
|
239
|
+
| 12px | 1.2rem |
|
|
240
|
+
| 16px | 1.6rem |
|
|
241
|
+
| 24px | 2.4rem |
|
|
242
|
+
| 32px | 3.2rem |
|
|
243
|
+
|
|
232
244
|
## Notes
|
|
233
245
|
|
|
234
246
|
- The `--slate-*` scale comes from the layer and does not need to be redefined — keep all neutral/background tokens pointing at `--slate-*`.
|
package/README.md
CHANGED
|
@@ -17,9 +17,15 @@ npm install --save srcdev-nuxt-components
|
|
|
17
17
|
```ts
|
|
18
18
|
defineNuxtConfig({
|
|
19
19
|
extends: "srcdev-nuxt-components",
|
|
20
|
+
css: [
|
|
21
|
+
"srcdev-nuxt-components/app/assets/styles/main.css",
|
|
22
|
+
"./app/assets/styles/main.css",
|
|
23
|
+
],
|
|
20
24
|
});
|
|
21
25
|
```
|
|
22
26
|
|
|
27
|
+
> **Note**: The layer CSS is not automatically included when installed from `node_modules`. You must explicitly add it to the `css` array as shown above. The second entry (`./app/assets/styles/main.css`) is your app's own stylesheet for overrides — create it if it doesn't exist.
|
|
28
|
+
|
|
23
29
|
## Claude Code Skills
|
|
24
30
|
|
|
25
31
|
This package ships Claude Code skills — reference docs for components and development tasks — in the `.claude/` directory.
|