@stnd/styles 0.10.4 → 0.10.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.
- package/CHANGELOG.md +12 -0
- package/TOKENS.md +1 -1
- package/_standard-01-token.scss +2 -2
- package/_standard-06-prose.scss +8 -6
- package/_standard-12-code.scss +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/TOKENS.md
CHANGED
|
@@ -392,7 +392,7 @@ box-shadow: var(--shadow-inset), var(--shadow-ambient);
|
|
|
392
392
|
| ---------------------- | -------------------------------------------- | --------------------------- |
|
|
393
393
|
| `--prose-width` | `42rem` | Optimal reading line length |
|
|
394
394
|
| `--prose-inset` | `max(calc(var(--space-2) - var(--space)), var(--space))` | Narrow elements margin inset |
|
|
395
|
-
| `--prose-breakout` | `minmax(0, var(--space
|
|
395
|
+
| `--prose-breakout` | `minmax(0, var(--space))` | Wide breakout column track |
|
|
396
396
|
| `--prose-track-full` | `minmax(0, 1fr)` | Full page breakout track |
|
|
397
397
|
|
|
398
398
|
## Analog (Noise Overlay)
|
package/_standard-01-token.scss
CHANGED
|
@@ -126,11 +126,11 @@
|
|
|
126
126
|
* @description Grid breakout track sizes allowing wide content and full-width elements to extend past the reading measure, plus narrow element insets.
|
|
127
127
|
*
|
|
128
128
|
* @property {variable} --prose-inset Narrow layout inset margin (`max(calc(var(--space-2) - var(--space)), var(--space))`).
|
|
129
|
-
* @property {variable} --prose-breakout Wide column breakout track width (`minmax(0, var(--space
|
|
129
|
+
* @property {variable} --prose-breakout Wide column breakout track width (`minmax(0, var(--space))`).
|
|
130
130
|
* @property {variable} --prose-track-full Full-width page breakout track (`minmax(0, 1fr)`).
|
|
131
131
|
*/
|
|
132
132
|
--prose-inset: max(calc(var(--space-2) - var(--space)), var(--space));
|
|
133
|
-
--prose-breakout: minmax(0, var(--space
|
|
133
|
+
--prose-breakout: minmax(0, var(--space));
|
|
134
134
|
--prose-track-full: minmax(0, 1fr);
|
|
135
135
|
|
|
136
136
|
/**
|
package/_standard-06-prose.scss
CHANGED
|
@@ -51,16 +51,16 @@
|
|
|
51
51
|
&.left {
|
|
52
52
|
margin-inline: 0;
|
|
53
53
|
grid-template-columns:
|
|
54
|
-
[full-start wide-start content-start] min(100%, var(--prose-width))
|
|
55
|
-
[content-end wide-end] 1fr [full-end];
|
|
54
|
+
[full-start hero-start wide-start content-start] min(100%, var(--prose-width))
|
|
55
|
+
[content-end wide-end] 1fr [hero-end full-end];
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
grid-template-columns:
|
|
59
|
-
[full-start] var(--prose-track-full, minmax(0, 1fr))
|
|
60
|
-
[wide-start] var(--prose-breakout, minmax(0, var(--space
|
|
59
|
+
[full-start hero-start] var(--prose-track-full, minmax(0, 1fr))
|
|
60
|
+
[wide-start] var(--prose-breakout, minmax(0, var(--space)))
|
|
61
61
|
[content-start] min(100%, var(--prose-width)) [content-end]
|
|
62
|
-
var(--prose-breakout, minmax(0, var(--space
|
|
63
|
-
var(--prose-track-full, minmax(0, 1fr)) [full-end];
|
|
62
|
+
var(--prose-breakout, minmax(0, var(--space))) [wide-end]
|
|
63
|
+
var(--prose-track-full, minmax(0, 1fr)) [hero-end full-end];
|
|
64
64
|
|
|
65
65
|
transition: grid-template-columns var(--transition);
|
|
66
66
|
|
|
@@ -114,7 +114,9 @@
|
|
|
114
114
|
|
|
115
115
|
/* Full: spans to page shell (--page-max-width) */
|
|
116
116
|
.full,
|
|
117
|
+
.hero,
|
|
117
118
|
.container-full,
|
|
119
|
+
.container-hero,
|
|
118
120
|
p:has(> img.full),
|
|
119
121
|
p:has(> video.full) {
|
|
120
122
|
grid-column: full;
|
package/_standard-12-code.scss
CHANGED