@anydigital/bricks 1.0.0-alpha.15 → 1.0.0-alpha.16

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/README.md +23 -3
  2. package/bricks/__html.css +5 -0
  3. package/bricks/_prism.css +14 -0
  4. package/bricks/_prose.css +2 -41
  5. package/bricks/_util.css +6 -0
  6. package/bricks/bricks.css +3 -1
  7. package/dist/bricks.css +150 -80
  8. package/package.json +2 -2
package/README.md CHANGED
@@ -63,6 +63,7 @@ body {
63
63
 
64
64
  - Automatic hyphenation for better text flow
65
65
  - Font smoothing for cleaner text rendering across browsers
66
+ - Hyphenation is disabled for links to prevent awkward breaks
66
67
 
67
68
  This is automatically applied when you include the stylesheet.
68
69
 
@@ -85,9 +86,6 @@ The `.prose` class provides enhanced typography for article content and long-for
85
86
  **Headings:**
86
87
 
87
88
  - `h1` with `small`, `sup`, or `sub` elements get reduced font size (`0.5em`) and lighter weight (`300`)
88
- - `h2` headings (without classes) get a full-width decorative bar above them (`0.4em` height, positioned `1em` above with `2em` top margin, centered using transform)
89
- - `h3` and `h4` headings (without classes) get a decorative gradient bar to the left (`10em` width, positioned with `0.5em` right margin, vertically centered using transform, gradient from 10% to 5% to transparent opacity)
90
- - `h4` headings have a thinner bar (`0.2em` height instead of `0.3em`)
91
89
 
92
90
  **Tables:**
93
91
 
@@ -107,6 +105,28 @@ The `.prose` class provides enhanced typography for article content and long-for
107
105
 
108
106
  - Code blocks with `data-caption` attribute display the caption above the code block (styled with 50% opacity, italic, and `1.5em` bottom margin)
109
107
 
108
+ ### Code Highlighting
109
+
110
+ Includes specialized styling for Prism.js, specifically focusing on treeview components:
111
+
112
+ - Custom styling for `.token.treeview-part`
113
+ - Reduced opacity for entry lines and names to create a hierarchical visual effect
114
+ - Supports complex file tree visualizations out of the box
115
+
116
+ ### Utilities
117
+
118
+ #### Scrollbar Inversion
119
+
120
+ The `.invert` class can be used to invert the scrollbar colors, which is particularly useful for dark themes or specific UI components:
121
+
122
+ ```css
123
+ .invert {
124
+ ::-webkit-scrollbar {
125
+ filter: invert(1) !important;
126
+ }
127
+ }
128
+ ```
129
+
110
130
  **Usage:**
111
131
 
112
132
  ```html
package/bricks/__html.css CHANGED
@@ -19,4 +19,9 @@ body {
19
19
  > main {
20
20
  flex-grow: 1;
21
21
  }
22
+
23
+ /* Disable hyphenation for links */
24
+ a {
25
+ hyphens: none;
26
+ }
22
27
  }
package/bricks/_prism.css ADDED
@@ -0,0 +1,14 @@
1
+ /* Prism.js */
2
+ .token.treeview-part {
3
+ .entry-line {
4
+ width: 2.5em !important;
5
+ opacity: 25%;
6
+ }
7
+ .entry-name:last-child {
8
+ opacity: 50%;
9
+
10
+ &::before {
11
+ display: none !important;
12
+ }
13
+ }
14
+ }
package/bricks/_prose.css CHANGED
@@ -40,6 +40,8 @@
40
40
  }
41
41
 
42
42
  h1 {
43
+ margin-bottom: 0.5em !important;
44
+
43
45
  small,
44
46
  sup,
45
47
  sub {
@@ -48,47 +50,6 @@
48
50
  }
49
51
  }
50
52
 
51
- h2:not([class]),
52
- h3:not([class]),
53
- h4:not([class]) {
54
- position: relative;
55
-
56
- &::before {
57
- content: "";
58
- display: block;
59
- position: absolute;
60
- background-color: rgba(0, 0, 0, 5%);
61
- }
62
- }
63
- h2:not([class]) {
64
- margin-top: 2em;
65
-
66
- &::before {
67
- width: 100vw;
68
- left: 50%;
69
- height: 0.4em;
70
- top: -1em;
71
- transform: translateX(-50%);
72
- }
73
- }
74
- h3:not([class]),
75
- h4:not([class]) {
76
- &::before {
77
- width: 10em;
78
- right: 100%;
79
- margin-right: 0.5em;
80
- height: 0.3em;
81
- top: 50%;
82
- transform: translateY(-50%);
83
- background: linear-gradient(to left, rgba(0, 0, 0, 10%), rgba(0, 0, 0, 5%) 10%, transparent);
84
- }
85
- }
86
- h4:not([class]) {
87
- &::before {
88
- height: 0.2em;
89
- }
90
- }
91
-
92
53
  table {
93
54
  display: block;
94
55
  overflow-x: auto;
package/bricks/_util.css ADDED
@@ -0,0 +1,6 @@
1
+ /* Utility classes */
2
+ .invert {
3
+ ::-webkit-scrollbar {
4
+ filter: invert(1) !important;
5
+ }
6
+ }
package/bricks/bricks.css CHANGED
@@ -4,5 +4,7 @@
4
4
  */
5
5
 
6
6
  @import "__html";
7
- @import "_prose";
8
7
  @import "@anydigital/breakout-css";
8
+ @import "_prose";
9
+ @import "_prism";
10
+ @import "_util";
package/dist/bricks.css CHANGED
@@ -28,113 +28,193 @@ body > main {
28
28
  flex-grow: 1;
29
29
  }
30
30
 
31
- .prose {
32
- /* Container-like behavior with padding and auto margins */
33
- width: 100%;
34
- padding: 1rem;
35
- margin-inline: auto;
36
- }
31
+ /* Disable hyphenation for links */
37
32
 
38
- .prose a {
39
- text-underline-offset: 0.1em;
40
- text-decoration-thickness: 1px;
41
- /* Don't underline links that point to anchors */
33
+ body a {
34
+ hyphens: none;
42
35
  }
43
36
 
44
- .prose a[href^="#"] {
45
- text-decoration: none;
46
- }
37
+ /* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
47
38
 
48
- .prose a:hover {
49
- text-decoration-thickness: 2px;
50
- }
39
+ .breakout {
40
+ padding-inline: 10%;
51
41
 
52
- .prose a small,.prose a sup,.prose a sub {
53
- font-weight: 300;
54
- /* Workaround to prevent underline */
55
- display: inline-block;
42
+ /* Direct children, or wrapped in <p> for Markdown support */
43
+ }
44
+
45
+ .breakout > img:not(does-not-exist):not(.does-not-exist),.breakout > picture:not(does-not-exist):not(.does-not-exist),.breakout > figure:not(does-not-exist):not(.does-not-exist),.breakout > canvas:not(does-not-exist):not(.does-not-exist),.breakout > audio:not(does-not-exist):not(.does-not-exist),.breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > pre:not(does-not-exist):not(.does-not-exist),.breakout > iframe:not(does-not-exist):not(.does-not-exist),.breakout > object:not(does-not-exist):not(.does-not-exist),.breakout > embed:not(does-not-exist):not(.does-not-exist),.breakout > video:not(does-not-exist):not(.does-not-exist),.breakout > .breakout-item:not(does-not-exist),.breakout > .breakout-item-max:not(does-not-exist),.breakout > p > img:not(.does-not-exist),.breakout > p > picture:not(.does-not-exist),.breakout > p > figure:not(.does-not-exist),.breakout > p > canvas:not(.does-not-exist),.breakout > p > audio:not(.does-not-exist),.breakout > p > table:not(.does-not-exist),.breakout > p > pre:not(.does-not-exist),.breakout > p > iframe:not(.does-not-exist),.breakout > p > object:not(.does-not-exist),.breakout > p > embed:not(.does-not-exist),.breakout > p > video:not(.does-not-exist),.breakout > p > .breakout-item,.breakout > p > .breakout-item-max {
46
+ width: -moz-fit-content;
47
+ width: fit-content;
48
+ min-width: 100%;
49
+ max-width: 125%;
50
+ margin-left: 50%;
51
+ transform: translateX(-50%);
56
52
  }
57
53
 
58
- /* Helper to insert icons in links */
54
+ /* Respect inline blocks' min-width */
59
55
 
60
- .prose a i {
61
- height: 1em;
62
- vertical-align: -10%;
63
- margin-right: 0.25em;
64
- font-style: normal;
65
- /* Workaround to prevent underline */
66
- display: inline-block;
56
+ .breakout > img:not(does-not-exist),.breakout > picture:not(does-not-exist),.breakout > figure:not(does-not-exist),.breakout > canvas:not(does-not-exist),.breakout > audio:not(does-not-exist),.breakout > p > img,.breakout > p > picture,.breakout > p > figure,.breakout > p > canvas,.breakout > p > audio {
57
+ min-width: auto;
67
58
  }
68
59
 
69
- .prose a i img {
70
- height: 100%;
71
- margin: 0 !important;
72
- }
60
+ /* Max out the width of the element */
73
61
 
74
- .prose h1 small,.prose h1 sup,.prose h1 sub {
75
- font-size: 0.5em;
76
- font-weight: 300;
62
+ .breakout > .breakout-item-max:not(does-not-exist),.breakout > p > .breakout-item-max {
63
+ width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
77
64
  }
78
65
 
79
- .prose h2:not([class]),.prose h3:not([class]),.prose h4:not([class]) {
66
+ .breakout-headings h2:not([class]),.breakout-headings h3:not([class]),.breakout-headings h4:not([class]),.breakout-headings hr {
80
67
  position: relative;
81
68
  }
82
69
 
83
- .prose h2:not([class])::before {
70
+ .breakout-headings h2:not([class])::before {
84
71
  content: "";
85
72
  display: block;
86
73
  position: absolute;
87
74
  background-color: rgba(0, 0, 0, 5%);
88
75
  }
89
76
 
90
- .prose h3:not([class])::before {
77
+ .breakout-headings h3:not([class])::before {
91
78
  content: "";
92
79
  display: block;
93
80
  position: absolute;
94
81
  background-color: rgba(0, 0, 0, 5%);
95
82
  }
96
83
 
97
- .prose h4:not([class])::before {
84
+ .breakout-headings h4:not([class])::before {
98
85
  content: "";
99
86
  display: block;
100
87
  position: absolute;
101
88
  background-color: rgba(0, 0, 0, 5%);
102
89
  }
103
90
 
104
- .prose h2:not([class]) {
105
- margin-top: 2em;
106
- }
91
+ .breakout-headings hr:not(.does-not-exist)::before {
92
+ content: "";
93
+ display: block;
94
+ position: absolute;
95
+ background-color: rgba(0, 0, 0, 5%);
96
+ }
107
97
 
108
- .prose h2:not([class])::before {
109
- width: 100vw;
110
- left: 50%;
111
- height: 0.4em;
112
- top: -1em;
113
- transform: translateX(-50%);
98
+ .breakout-headings h2:not([class])::before {
99
+ width: 10em;
100
+ right: 100%;
101
+ margin-right: 1rem;
102
+ height: 0.3em;
103
+ top: 50%;
104
+ transform: translateY(-50%);
105
+ background: linear-gradient(
106
+ to left,
107
+ rgba(0, 0, 0, 10%),
108
+ rgba(0, 0, 0, 5%) 10%,
109
+ transparent
110
+ );
114
111
  }
115
112
 
116
- .prose h3:not([class])::before {
113
+ .breakout-headings h3:not([class])::before {
117
114
  width: 10em;
118
115
  right: 100%;
119
- margin-right: 0.5em;
116
+ margin-right: 1rem;
120
117
  height: 0.3em;
121
118
  top: 50%;
122
119
  transform: translateY(-50%);
123
- background: linear-gradient(to left, rgba(0, 0, 0, 10%), rgba(0, 0, 0, 5%) 10%, transparent);
120
+ background: linear-gradient(
121
+ to left,
122
+ rgba(0, 0, 0, 10%),
123
+ rgba(0, 0, 0, 5%) 10%,
124
+ transparent
125
+ );
124
126
  }
125
127
 
126
- .prose h4:not([class])::before {
128
+ .breakout-headings h4:not([class])::before {
127
129
  width: 10em;
128
130
  right: 100%;
129
- margin-right: 0.5em;
131
+ margin-right: 1rem;
130
132
  height: 0.3em;
131
133
  top: 50%;
132
134
  transform: translateY(-50%);
133
- background: linear-gradient(to left, rgba(0, 0, 0, 10%), rgba(0, 0, 0, 5%) 10%, transparent);
135
+ background: linear-gradient(
136
+ to left,
137
+ rgba(0, 0, 0, 10%),
138
+ rgba(0, 0, 0, 5%) 10%,
139
+ transparent
140
+ );
134
141
  }
135
142
 
136
- .prose h4:not([class])::before {
137
- height: 0.2em;
143
+ .breakout-headings hr {
144
+ height: 0.75rem;
145
+ border: none;
146
+ overflow: visible;
147
+ }
148
+
149
+ .breakout-headings hr::before {
150
+ width: 100vw;
151
+ left: 50%;
152
+ height: 100%;
153
+ transform: translateX(-50%);
154
+ }
155
+
156
+ .breakout-headings hr + h2::before {
157
+ display: none !important;
158
+ }
159
+
160
+ .breakout-headings hr + h3::before {
161
+ display: none !important;
162
+ }
163
+
164
+ .breakout-headings hr + h4::before {
165
+ display: none !important;
166
+ }
167
+
168
+ .prose {
169
+ /* Container-like behavior with padding and auto margins */
170
+ width: 100%;
171
+ padding: 1rem;
172
+ margin-inline: auto;
173
+ }
174
+
175
+ .prose a {
176
+ text-underline-offset: 0.1em;
177
+ text-decoration-thickness: 1px;
178
+ /* Don't underline links that point to anchors */
179
+ }
180
+
181
+ .prose a[href^="#"] {
182
+ text-decoration: none;
183
+ }
184
+
185
+ .prose a:hover {
186
+ text-decoration-thickness: 2px;
187
+ }
188
+
189
+ .prose a small,.prose a sup,.prose a sub {
190
+ font-weight: 300;
191
+ /* Workaround to prevent underline */
192
+ display: inline-block;
193
+ }
194
+
195
+ /* Helper to insert icons in links */
196
+
197
+ .prose a i {
198
+ height: 1em;
199
+ vertical-align: -10%;
200
+ margin-right: 0.25em;
201
+ font-style: normal;
202
+ /* Workaround to prevent underline */
203
+ display: inline-block;
204
+ }
205
+
206
+ .prose a i img {
207
+ height: 100%;
208
+ margin: 0 !important;
209
+ }
210
+
211
+ .prose h1 {
212
+ margin-bottom: 0.5em !important;
213
+ }
214
+
215
+ .prose h1 small,.prose h1 sup,.prose h1 sub {
216
+ font-size: 0.5em;
217
+ font-weight: 300;
138
218
  }
139
219
 
140
220
  .prose table {
@@ -197,33 +277,23 @@ body > main {
197
277
  font-style: italic;
198
278
  }
199
279
 
200
- /* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
201
-
202
- .breakout {
203
- padding-inline: 10%;
204
-
205
- /* Direct children, or wrapped in <p> for Markdown support */
206
- }
280
+ /* Prism.js */
207
281
 
208
- .breakout > img:not(does-not-exist):not(.does-not-exist),.breakout > picture:not(does-not-exist):not(.does-not-exist),.breakout > figure:not(does-not-exist):not(.does-not-exist),.breakout > canvas:not(does-not-exist):not(.does-not-exist),.breakout > audio:not(does-not-exist):not(.does-not-exist),.breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > pre:not(does-not-exist):not(.does-not-exist),.breakout > iframe:not(does-not-exist):not(.does-not-exist),.breakout > object:not(does-not-exist):not(.does-not-exist),.breakout > embed:not(does-not-exist):not(.does-not-exist),.breakout > video:not(does-not-exist):not(.does-not-exist),.breakout > .breakout-item:not(does-not-exist),.breakout > .breakout-item-max:not(does-not-exist),.breakout > p > img:not(.does-not-exist),.breakout > p > picture:not(.does-not-exist),.breakout > p > figure:not(.does-not-exist),.breakout > p > canvas:not(.does-not-exist),.breakout > p > audio:not(.does-not-exist),.breakout > p > table:not(.does-not-exist),.breakout > p > pre:not(.does-not-exist),.breakout > p > iframe:not(.does-not-exist),.breakout > p > object:not(.does-not-exist),.breakout > p > embed:not(.does-not-exist),.breakout > p > video:not(.does-not-exist),.breakout > p > .breakout-item,.breakout > p > .breakout-item-max {
209
- width: -moz-fit-content;
210
- width: fit-content;
211
- min-width: 100%;
212
- max-width: 125%;
213
- margin-left: 50%;
214
- transform: translateX(-50%);
215
- }
282
+ .token.treeview-part .entry-line {
283
+ width: 2.5em !important;
284
+ opacity: 25%;
285
+ }
216
286
 
217
- /* Respect inline blocks' min-width */
287
+ .token.treeview-part .entry-name:last-child {
288
+ opacity: 50%;
289
+ }
218
290
 
219
- .breakout > img:not(does-not-exist),.breakout > picture:not(does-not-exist),.breakout > figure:not(does-not-exist),.breakout > canvas:not(does-not-exist),.breakout > audio:not(does-not-exist),.breakout > p > img,.breakout > p > picture,.breakout > p > figure,.breakout > p > canvas,.breakout > p > audio {
220
- min-width: auto;
291
+ .token.treeview-part .entry-name:last-child::before {
292
+ display: none !important;
221
293
  }
222
294
 
223
- /* Max out the width of the element */
295
+ /* Utility classes */
224
296
 
225
- .breakout > .breakout-item-max:not(does-not-exist),.breakout > p > .breakout-item-max {
226
- width: 125% !important; /* @TODO: !important for cases like figure.breakout-item-max */
227
- }
228
-
229
- /* @TODO: Allow non-direct children. */
297
+ .invert ::-webkit-scrollbar {
298
+ filter: invert(1) !important;
299
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anydigital/bricks",
3
- "version": "1.0.0-alpha.15",
3
+ "version": "1.0.0-alpha.16",
4
4
  "description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
5
5
  "main": "dist/bricks.css",
6
6
  "style": "dist/bricks.css",
@@ -24,7 +24,7 @@
24
24
  "author": "Anton Staroverov",
25
25
  "license": "MIT",
26
26
  "devDependencies": {
27
- "@anydigital/breakout-css": "^1.0.0-alpha.7",
27
+ "@anydigital/breakout-css": "^1.0.0-alpha.8",
28
28
  "postcss": "^8.4.33",
29
29
  "postcss-cli": "^11.0.0",
30
30
  "postcss-import": "^16.1.1",