@vttforge/styles 0.3.2 → 0.4.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/README.md +30 -6
  3. package/base.css +58 -56
  4. package/components.css +731 -733
  5. package/index.css +22 -5
  6. package/package.json +2 -2
  7. package/styles.layer.css +13 -6
  8. package/themes/forge.css +17 -19
package/CHANGELOG.md CHANGED
@@ -1,5 +1,34 @@
1
1
  # @vttforge/styles
2
2
 
3
+ ## 0.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - e9c184d: Take the component styles out of their cascade sub-layer, so your own CSS and this package's compose the way you expect.
8
+
9
+ Foundry puts a system's stylesheet in `@layer system` and a module's in `@layer modules`. It does that for you: the manifest's `styles` entry takes an optional `layer`, and when you leave it out the server fills one in. So everything here already sat inside `system`.
10
+
11
+ Inside it, base, components and the theme sat in `@layer vttforge.*` sub-layers while your own rules, in the same file or your own stylesheet, sat directly in `system`. An unlayered rule beats every layered one in the same layer, whatever the specificity, so your CSS won every time:
12
+
13
+ ```css
14
+ /* your stylesheet, in @layer system alongside this package */
15
+ button { border-radius: 55px; } /* used to beat .vttf-btn */
16
+ ```
17
+
18
+ Nothing you wrote could lose, which sounds convenient until a broad selector you wrote for one corner silently restyles every component. Now the two compose on specificity, so `.vttf-btn` holds and `.my-system .vttf-btn` wins.
19
+
20
+ Tokens and the reset stay layered, and lose on purpose. Tokens are custom properties you must be able to override with one plain declaration, and a reset that outranks real rules is a bug waiting to happen.
21
+
22
+ **This does not change anything about other modules, and should not.** Foundry orders `system` before `modules`, so a module's CSS overrides a system's by design. That ordering is the platform's, not ours.
23
+
24
+ If you were relying on a plain selector of your own to override these components, raise its specificity.
25
+
26
+ ## 0.3.3
27
+
28
+ ### Patch Changes
29
+
30
+ - 7eeeb20: Rewrite the npm package descriptions to say what each package does today. `types` claimed full schema inference it does not have, `vite-plugin` claimed Handlebars HMR that lives in the dev loop, and `cli` did not mention `audit`.
31
+
3
32
  ## 0.3.2
4
33
 
5
34
  ### Patch Changes
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @vttforge/styles
2
2
 
3
- CSS-only package: design tokens, scoped reset, base styles, sheet primitives, and opt-in themes. Built on [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) for predictable composition with Foundry v13's own layer order.
3
+ CSS-only package: design tokens, scoped reset, base styles, sheet primitives, and opt-in themes.
4
4
 
5
5
  ```bash
6
6
  pnpm add @vttforge/styles
@@ -8,18 +8,21 @@ pnpm add @vttforge/styles
8
8
 
9
9
  ## Usage
10
10
 
11
- Default — one import, sub-layered:
11
+ Default, one import:
12
12
 
13
13
  ```css
14
14
  @import '@vttforge/styles';
15
15
  ```
16
16
 
17
- Mantine-style — wrap everything in a single `@layer vttforge`:
17
+ Or wrap everything in a single `@layer vttforge` you order yourself:
18
18
 
19
19
  ```css
20
+ @layer reset, vttforge, my-system;
20
21
  @import '@vttforge/styles/styles.layer.css';
21
22
  ```
22
23
 
24
+ Read the next section before you pick the second one.
25
+
23
26
  Cherry-pick:
24
27
 
25
28
  ```css
@@ -33,11 +36,32 @@ Opt-in theme:
33
36
  @import '@vttforge/styles/themes/forge.css';
34
37
  ```
35
38
 
36
- The tokens are also published as data — `@vttforge/styles/tokens.json` — for anything that is not CSS.
39
+ The tokens are also published as data, `@vttforge/styles/tokens.json`, for anything that is not CSS.
40
+
41
+ ## Cascade layers
42
+
43
+ Foundry has already put this file in a layer by the time you see it. A system's stylesheet goes in `@layer system` and a module's in `@layer modules`. The manifest's `styles` entry takes an optional `layer`, and leaving it out lets the server fill one in:
44
+
45
+ ```json
46
+ "styles": [{ "src": "styles/my-system.css" }]
47
+ ```
48
+
49
+ So the question is never whether these rules are layered. It is how they sort against the rest of what is in that same layer, which is your own CSS.
50
+
51
+ An unlayered rule beats every layered one in the same layer, whatever the specificity. That is why only `vttforge.tokens` and `vttforge.reset` sit in a sub-layer here, and base, components and the theme do not. Sub-layer the components and this wins every time:
52
+
53
+ ```css
54
+ /* your stylesheet, in the same layer as this package */
55
+ button { border-radius: 55px; } /* would beat .vttf-btn */
56
+ ```
57
+
58
+ Nothing you wrote could lose, which sounds convenient until a broad selector meant for one corner restyles every component. Unlayered, the two compose on specificity: `.vttf-btn` holds, and `.my-system .vttf-btn` wins.
59
+
60
+ Tokens and the reset lose that fight on purpose. Tokens are custom properties you must be able to override with one plain declaration, and a reset that outranks real rules is a bug waiting to happen.
37
61
 
38
- ## Layer names
62
+ None of this affects other modules, and it should not. Foundry orders `system` before `modules`, so a module's CSS overrides a system's by design. You can opt out by setting `"layer": null` on the manifest entry, which makes your stylesheet unlayered and puts it above everything. Do not, unless you have a reason worth the fight: it takes your system out of the order every module author expects.
39
63
 
40
- VTTForge uses a vendored prefix: `vttforge.tokens`, `vttforge.reset`, `vttforge.base`, `vttforge.components`. Foundry v13 owns the top-level layer names (`reset, variables, elements, blocks, applications, …, system, modules`) and auto-wraps system manifest CSS in its `system` layer.
64
+ The `styles.layer.css` entry wraps everything in one `@layer vttforge` nested inside Foundry's. That gives up composing on specificity, in exchange for ordering these styles as a block against layers of your own.
41
65
 
42
66
  ## See it
43
67
 
package/base.css CHANGED
@@ -2,68 +2,70 @@
2
2
  * @vttforge/styles — base.css
3
3
  *
4
4
  * Element baselines and shared utilities on top of `tokens` + `reset`.
5
- * Owns `--vttf-focus-ring` rendering; component layers MUST NOT override `:focus-visible`.
5
+ *
6
+ * Unlayered, so these baselines sort against a consumer's own CSS on
7
+ * specificity rather than always losing to it. See `index.css` for why.
8
+ *
9
+ * Owns `--vttf-focus-ring` rendering; components MUST NOT override `:focus-visible`.
6
10
  */
7
11
 
8
- @layer vttforge.base {
9
- .vttf-app,
10
- .vttf-sheet {
11
- font-family: var(--vttf-font-body);
12
- font-size: var(--vttf-text-size-body);
13
- line-height: 1.5;
14
- color: var(--vttf-text);
15
- background: var(--vttf-bg);
16
- }
12
+ .vttf-app,
13
+ .vttf-sheet {
14
+ font-family: var(--vttf-font-body);
15
+ font-size: var(--vttf-text-size-body);
16
+ line-height: 1.5;
17
+ color: var(--vttf-text);
18
+ background: var(--vttf-bg);
19
+ }
17
20
 
18
- .vttf-app :focus-visible,
19
- .vttf-sheet :focus-visible,
20
- form[data-vttf] :focus-visible {
21
- outline: none;
22
- box-shadow: var(--vttf-focus-ring);
23
- }
21
+ .vttf-app :focus-visible,
22
+ .vttf-sheet :focus-visible,
23
+ form[data-vttf] :focus-visible {
24
+ outline: none;
25
+ box-shadow: var(--vttf-focus-ring);
26
+ }
24
27
 
25
- .vttf-app a,
26
- .vttf-sheet a {
27
- color: var(--vttf-ember);
28
- text-decoration: none;
29
- transition: color var(--vttf-duration-fast) var(--vttf-ease-out);
30
- }
28
+ .vttf-app a,
29
+ .vttf-sheet a {
30
+ color: var(--vttf-ember);
31
+ text-decoration: none;
32
+ transition: color var(--vttf-duration-fast) var(--vttf-ease-out);
33
+ }
31
34
 
32
- .vttf-app a:hover,
33
- .vttf-sheet a:hover {
34
- color: var(--vttf-ember-glow);
35
- text-decoration: underline;
36
- }
35
+ .vttf-app a:hover,
36
+ .vttf-sheet a:hover {
37
+ color: var(--vttf-ember-glow);
38
+ text-decoration: underline;
39
+ }
37
40
 
38
- .vttf-app h1,
39
- .vttf-app h2,
40
- .vttf-app h3,
41
- .vttf-sheet h1,
42
- .vttf-sheet h2,
43
- .vttf-sheet h3 {
44
- font-family: var(--vttf-font-display);
45
- font-weight: var(--vttf-text-weight-semibold);
46
- letter-spacing: -0.02em;
47
- margin: 0;
48
- }
41
+ .vttf-app h1,
42
+ .vttf-app h2,
43
+ .vttf-app h3,
44
+ .vttf-sheet h1,
45
+ .vttf-sheet h2,
46
+ .vttf-sheet h3 {
47
+ font-family: var(--vttf-font-display);
48
+ font-weight: var(--vttf-text-weight-semibold);
49
+ letter-spacing: -0.02em;
50
+ margin: 0;
51
+ }
49
52
 
50
- .vttf-app code,
51
- .vttf-app pre,
52
- .vttf-sheet code,
53
- .vttf-sheet pre {
54
- font-family: var(--vttf-font-mono);
55
- }
53
+ .vttf-app code,
54
+ .vttf-app pre,
55
+ .vttf-sheet code,
56
+ .vttf-sheet pre {
57
+ font-family: var(--vttf-font-mono);
58
+ }
56
59
 
57
- /* Utility: visually hidden but accessible to screen readers */
58
- .vttf-sr-only {
59
- position: absolute;
60
- width: 1px;
61
- height: 1px;
62
- padding: 0;
63
- margin: -1px;
64
- overflow: hidden;
65
- clip: rect(0, 0, 0, 0);
66
- white-space: nowrap;
67
- border: 0;
68
- }
60
+ /* Utility: visually hidden but accessible to screen readers */
61
+ .vttf-sr-only {
62
+ position: absolute;
63
+ width: 1px;
64
+ height: 1px;
65
+ padding: 0;
66
+ margin: -1px;
67
+ overflow: hidden;
68
+ clip: rect(0, 0, 0, 0);
69
+ white-space: nowrap;
70
+ border: 0;
69
71
  }