@refrakt-md/lumina 0.33.0 → 0.34.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 (141) hide show
  1. package/base.css +29 -29
  2. package/dist/config.d.ts.map +1 -1
  3. package/dist/config.js.map +1 -1
  4. package/dist/icons.d.ts.map +1 -1
  5. package/dist/icons.js +57 -57
  6. package/dist/icons.js.map +1 -1
  7. package/dist/presets/catppuccin.js.map +1 -1
  8. package/dist/presets/dracula.js.map +1 -1
  9. package/dist/presets/gruvbox.js.map +1 -1
  10. package/dist/presets/niwaki.js.map +1 -1
  11. package/dist/presets/nord.js.map +1 -1
  12. package/dist/presets/one-dark.js.map +1 -1
  13. package/dist/presets/solarized.js.map +1 -1
  14. package/dist/presets/tideline.d.ts.map +1 -1
  15. package/dist/presets/tideline.js +20 -4
  16. package/dist/presets/tideline.js.map +1 -1
  17. package/dist/presets/tokyo-night.js.map +1 -1
  18. package/dist/tokens.js.map +1 -1
  19. package/index.css +124 -124
  20. package/package.json +5 -5
  21. package/presets.json +61 -13
  22. package/styles/base/attributes.css +32 -13
  23. package/styles/dimensions/checklist.css +45 -46
  24. package/styles/dimensions/cover.css +71 -51
  25. package/styles/dimensions/density.css +69 -65
  26. package/styles/dimensions/frame.css +116 -57
  27. package/styles/dimensions/metadata.css +110 -103
  28. package/styles/dimensions/motion.css +42 -13
  29. package/styles/dimensions/reading.css +27 -27
  30. package/styles/dimensions/sections.css +44 -45
  31. package/styles/dimensions/sequence.css +56 -57
  32. package/styles/dimensions/state.css +8 -2
  33. package/styles/dimensions/substrate.css +82 -58
  34. package/styles/dimensions/surfaces.css +65 -62
  35. package/styles/elements/blockquote.css +24 -25
  36. package/styles/elements/code.css +72 -71
  37. package/styles/elements/table.css +36 -37
  38. package/styles/global.css +163 -121
  39. package/styles/layouts/blog.css +219 -218
  40. package/styles/layouts/default.css +168 -167
  41. package/styles/layouts/docs.css +121 -122
  42. package/styles/layouts/mobile.css +54 -55
  43. package/styles/layouts/on-this-page.css +46 -47
  44. package/styles/layouts/plan.css +248 -247
  45. package/styles/layouts/search.css +142 -140
  46. package/styles/layouts/split.css +45 -45
  47. package/styles/layouts/theme-toggle.css +33 -31
  48. package/styles/layouts/version-switcher.css +38 -37
  49. package/styles/runes/accordion.css +90 -81
  50. package/styles/runes/aggregate.css +50 -39
  51. package/styles/runes/annotate.css +46 -45
  52. package/styles/runes/api.css +22 -23
  53. package/styles/runes/audio.css +140 -141
  54. package/styles/runes/badge.css +12 -13
  55. package/styles/runes/bar.css +4 -5
  56. package/styles/runes/bento.css +73 -62
  57. package/styles/runes/bg.css +62 -47
  58. package/styles/runes/blog.css +89 -90
  59. package/styles/runes/bond.css +49 -50
  60. package/styles/runes/breadcrumb.css +34 -35
  61. package/styles/runes/budget.css +126 -127
  62. package/styles/runes/bug.css +28 -27
  63. package/styles/runes/card.css +63 -60
  64. package/styles/runes/carousel.css +15 -15
  65. package/styles/runes/cast.css +50 -51
  66. package/styles/runes/changelog.css +45 -46
  67. package/styles/runes/character.css +31 -32
  68. package/styles/runes/chart.css +194 -106
  69. package/styles/runes/codegroup.css +109 -100
  70. package/styles/runes/collection.css +87 -86
  71. package/styles/runes/compare.css +38 -39
  72. package/styles/runes/comparison.css +205 -179
  73. package/styles/runes/conversation.css +36 -33
  74. package/styles/runes/cta.css +135 -132
  75. package/styles/runes/datatable.css +84 -83
  76. package/styles/runes/decision.css +25 -26
  77. package/styles/runes/design-context.css +21 -23
  78. package/styles/runes/details.css +26 -27
  79. package/styles/runes/diagram.css +28 -29
  80. package/styles/runes/diff.css +75 -72
  81. package/styles/runes/drawer.css +276 -198
  82. package/styles/runes/embed.css +20 -21
  83. package/styles/runes/event.css +35 -36
  84. package/styles/runes/expand.css +43 -34
  85. package/styles/runes/faction.css +47 -48
  86. package/styles/runes/feature.css +119 -112
  87. package/styles/runes/figure.css +11 -12
  88. package/styles/runes/file-ref.css +11 -13
  89. package/styles/runes/form.css +155 -154
  90. package/styles/runes/gallery.css +59 -60
  91. package/styles/runes/grid.css +10 -7
  92. package/styles/runes/hero.css +189 -185
  93. package/styles/runes/hint.css +57 -58
  94. package/styles/runes/howto.css +62 -64
  95. package/styles/runes/itinerary.css +133 -134
  96. package/styles/runes/juxtapose.css +83 -82
  97. package/styles/runes/lore.css +32 -34
  98. package/styles/runes/map.css +106 -99
  99. package/styles/runes/mediatext.css +30 -27
  100. package/styles/runes/milestone.css +98 -97
  101. package/styles/runes/mockup.css +338 -335
  102. package/styles/runes/nav.css +465 -450
  103. package/styles/runes/organization.css +23 -20
  104. package/styles/runes/page-section.css +14 -15
  105. package/styles/runes/pagination.css +45 -44
  106. package/styles/runes/palette.css +78 -80
  107. package/styles/runes/placeholder.css +8 -9
  108. package/styles/runes/plan-history.css +160 -161
  109. package/styles/runes/plan-progress.css +15 -16
  110. package/styles/runes/plan-ref.css +32 -23
  111. package/styles/runes/playlist.css +106 -107
  112. package/styles/runes/plot.css +92 -91
  113. package/styles/runes/preview.css +152 -149
  114. package/styles/runes/pricing.css +133 -123
  115. package/styles/runes/progress.css +32 -27
  116. package/styles/runes/pullquote.css +89 -90
  117. package/styles/runes/realm.css +47 -48
  118. package/styles/runes/recipe.css +112 -114
  119. package/styles/runes/relationships.css +77 -76
  120. package/styles/runes/reveal.css +90 -79
  121. package/styles/runes/sandbox.css +59 -60
  122. package/styles/runes/section.css +57 -50
  123. package/styles/runes/showcase.css +35 -16
  124. package/styles/runes/sidenote.css +30 -27
  125. package/styles/runes/snippet.css +8 -9
  126. package/styles/runes/spacing.css +86 -88
  127. package/styles/runes/spec.css +24 -25
  128. package/styles/runes/steps.css +89 -80
  129. package/styles/runes/storyboard.css +46 -45
  130. package/styles/runes/swatch.css +22 -23
  131. package/styles/runes/symbol.css +117 -118
  132. package/styles/runes/tabs.css +88 -79
  133. package/styles/runes/testimonial.css +43 -44
  134. package/styles/runes/textblock.css +32 -28
  135. package/styles/runes/timeline.css +63 -64
  136. package/styles/runes/tint.css +214 -215
  137. package/styles/runes/toc.css +40 -41
  138. package/styles/runes/track.css +89 -90
  139. package/styles/runes/typography.css +89 -91
  140. package/styles/runes/work.css +47 -36
  141. package/styles/runes/xref.css +21 -22
package/styles/layouts/blog.css CHANGED
@@ -1,231 +1,232 @@
1
1
  @layer skin {
2
- /* Blog layout */
2
+ /* Blog layout */
3
3
 
4
- /* The blog header chrome is taller (1.125rem padding + 2rem logo), so
4
+ /* The blog header chrome is taller (1.125rem padding + 2rem logo), so
5
5
  tell the mobile panel where the header ends. The variable lives on the
6
6
  layout root so the panel — a sibling of the header — inherits it. */
7
- .rf-layout-blog-article {
8
- --rf-header-height: 4.25rem;
9
- }
10
- /* ---- Header ---- */
11
- .rf-blog-header {
12
- background: var(--rf-color-bg);
13
- border-bottom: 1px solid var(--rf-color-border);
14
- }
15
- .rf-blog-header__inner {
16
- gap: 1rem;
17
- padding: 1.125rem 1.5rem;
18
- }
19
- .rf-blog-header p {
20
- margin: 0;
21
- line-height: 1;
22
- }
23
- .rf-blog-header a {
24
- color: inherit;
25
- text-decoration: none;
26
- }
27
- .rf-blog-header a:hover {
28
- text-decoration: none;
29
- }
30
- .rf-blog-header p:first-child a {
31
- gap: 0.5rem;
32
- font-weight: var(--rf-weight-semibold);
33
- font-size: var(--rf-text-xl);
34
- letter-spacing: var(--rf-tracking-tight);
35
- }
36
- .rf-blog-header p:first-child a > .rf-icon {
37
- vertical-align: middle;
38
- color: currentColor;
39
- }
40
- .rf-blog-header__inner p ~ p {
41
- font-size: var(--rf-text-sm);
42
- }
43
- .rf-blog-header__inner p ~ p a {
44
- margin-left: 1.5rem;
45
- color: var(--rf-color-muted);
46
- }
47
- .rf-blog-header__inner p ~ p a:hover {
48
- color: var(--rf-color-text);
49
- }
50
- .rf-blog-header__inner p ~ p a svg {
51
- vertical-align: -0.15em;
52
- }
53
-
54
- /* ---- Layout container ---- */
55
- .rf-blog {
56
- padding: 2.5rem 1.5rem 4rem;
57
- }
58
- .rf-blog--has-sidebar {
59
- gap: 3rem;
60
- }
61
- .rf-blog-index__title {
62
- font-size: var(--rf-text-4xl);
63
- font-weight: var(--rf-weight-bold);
64
- line-height: var(--rf-leading-tight);
65
- letter-spacing: var(--rf-tracking-tight);
66
- margin: 0 0 1rem;
67
- color: var(--rf-color-text);
68
- }
69
- .rf-blog-index__body {
70
- margin-bottom: 2rem;
71
- line-height: var(--rf-leading-relaxed);
72
- color: var(--rf-color-muted);
73
- }
74
- .rf-blog-index__posts {
75
- gap: 1.5rem;
76
- }
77
-
78
- /* ---- Post card ---- */
79
- .rf-blog-card {
80
- padding: 1.5rem;
81
- border: 1px solid var(--rf-color-border);
82
- border-radius: var(--rf-radius-md, 0.5rem);
83
- text-decoration: none;
84
- color: inherit;
85
- transition: border-color 0.15s, box-shadow 0.15s;
86
- }
87
- .rf-blog-card:hover {
88
- border-color: var(--rf-color-text);
89
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
90
- text-decoration: none;
91
- }
92
- .rf-blog-card__title {
93
- font-size: var(--rf-text-xl);
94
- font-weight: var(--rf-weight-bold);
95
- margin: 0 0 0.5rem;
96
- color: var(--rf-color-text);
97
- }
98
- .rf-blog-card__meta {
99
- gap: 0.75rem;
100
- font-size: var(--rf-text-sm);
101
- color: var(--rf-color-muted);
102
- margin-bottom: 0.5rem;
103
- }
104
- .rf-blog-card__author::before {
105
- content: '\00b7';
106
- margin-right: 0.75rem;
107
- }
108
- .rf-blog-card__desc {
109
- margin: 0 0 0.75rem;
110
- font-size: var(--rf-text);
111
- line-height: var(--rf-leading-relaxed);
112
- color: var(--rf-color-muted);
113
- }
114
- .rf-blog-card__tags {
115
- gap: 0.5rem;
116
- margin-bottom: 0.75rem;
117
- }
118
- .rf-blog-card__link {
119
- font-size: var(--rf-text-sm);
120
- font-weight: var(--rf-weight-semibold);
121
- color: var(--rf-color-primary, var(--rf-color-text));
122
- }
123
- .rf-blog-article__header {
124
- margin-bottom: 2.5rem;
125
- padding-bottom: 1.5rem;
126
- border-bottom: 1px solid var(--rf-color-border);
127
- }
128
- .rf-blog-article__title {
129
- font-size: var(--rf-text-4xl);
130
- font-weight: var(--rf-weight-bold);
131
- line-height: var(--rf-leading-tight);
132
- letter-spacing: var(--rf-tracking-tight);
133
- margin: 0 0 1rem;
134
- color: var(--rf-color-text);
135
- }
136
- .rf-blog-article__meta {
137
- gap: 0.75rem;
138
- font-size: var(--rf-text-sm);
139
- color: var(--rf-color-muted);
140
- }
141
- .rf-blog-article__meta time {
142
- font-weight: var(--rf-weight-medium);
143
- }
144
- .rf-blog-article__author::before {
145
- content: '\00b7';
146
- margin-right: 0.75rem;
147
- }
148
- .rf-blog-article__tags {
149
- gap: 0.5rem;
150
- margin-top: 0.75rem;
151
- }
152
- .rf-blog-article__tag {
153
- font-size: var(--rf-text-xs);
154
- font-weight: var(--rf-weight-medium);
155
- padding: 0.2rem 0.6rem;
156
- border-radius: 9999px;
157
- background: var(--rf-color-surface);
158
- color: var(--rf-color-muted);
159
- border: 1px solid var(--rf-color-border);
160
- }
161
-
162
- /* ---- Article body typography ---- */
163
- .rf-blog-article__body {
164
- line-height: var(--rf-leading-relaxed);
165
- }
166
- .rf-blog-article__body h2 {
167
- margin-top: 2.5rem;
168
- }
169
- .rf-blog-article__body h3 {
170
- margin-top: 2rem;
171
- }
172
- .rf-blog-article__body p {
173
- margin-bottom: 1.25rem;
174
- }
175
- .rf-blog-article__body img {
176
- border-radius: var(--rf-radius-md);
177
- margin: 1.5rem 0;
178
- }
179
-
180
- /* ---- Sidebar ---- */
181
- .rf-blog-sidebar {
182
- font-size: var(--rf-text-sm);
183
- color: var(--rf-color-muted);
184
- }
185
- .rf-blog-sidebar h2,
186
- .rf-blog-sidebar h3,
187
- .rf-blog-sidebar h4 {
188
- font-size: var(--rf-text-xs);
189
- font-weight: var(--rf-weight-semibold);
190
- text-transform: uppercase;
191
- letter-spacing: var(--rf-tracking-wider);
192
- color: var(--rf-color-muted);
193
- margin-top: 0;
194
- margin-bottom: 0.5rem;
195
- }
196
- .rf-blog-sidebar ul {
197
- padding: 0;
198
- margin: 0;
199
- }
200
- .rf-blog-sidebar li {
201
- padding: 0.25rem 0;
202
- }
203
- .rf-blog-sidebar a {
204
- color: var(--rf-color-muted);
205
- text-decoration: none;
206
- }
207
- .rf-blog-sidebar a:hover {
208
- color: var(--rf-color-text);
209
- }
7
+ .rf-layout-blog-article {
8
+ --rf-header-height: 4.25rem;
9
+ }
10
+ /* ---- Header ---- */
11
+ .rf-blog-header {
12
+ background: var(--rf-color-bg);
13
+ border-bottom: 1px solid var(--rf-color-border);
14
+ }
15
+ .rf-blog-header__inner {
16
+ gap: 1rem;
17
+ padding: 1.125rem 1.5rem;
18
+ }
19
+ .rf-blog-header p {
20
+ margin: 0;
21
+ line-height: 1;
22
+ }
23
+ .rf-blog-header a {
24
+ color: inherit;
25
+ text-decoration: none;
26
+ }
27
+ .rf-blog-header a:hover {
28
+ text-decoration: none;
29
+ }
30
+ .rf-blog-header p:first-child a {
31
+ gap: 0.5rem;
32
+ font-weight: var(--rf-weight-semibold);
33
+ font-size: var(--rf-text-xl);
34
+ letter-spacing: var(--rf-tracking-tight);
35
+ }
36
+ .rf-blog-header p:first-child a > .rf-icon {
37
+ vertical-align: middle;
38
+ color: currentColor;
39
+ }
40
+ .rf-blog-header__inner p ~ p {
41
+ font-size: var(--rf-text-sm);
42
+ }
43
+ .rf-blog-header__inner p ~ p a {
44
+ margin-left: 1.5rem;
45
+ color: var(--rf-color-muted);
46
+ }
47
+ .rf-blog-header__inner p ~ p a:hover {
48
+ color: var(--rf-color-text);
49
+ }
50
+ .rf-blog-header__inner p ~ p a svg {
51
+ vertical-align: -0.15em;
52
+ }
210
53
 
211
- /* ---- Footer ---- */
212
- .rf-blog-footer {
213
- border-top: 1px solid var(--rf-color-border);
214
- padding: 2rem 1.5rem;
215
- text-align: center;
216
- font-size: var(--rf-text-sm);
217
- color: var(--rf-color-muted);
218
- }
54
+ /* ---- Layout container ---- */
55
+ .rf-blog {
56
+ padding: 2.5rem 1.5rem 4rem;
57
+ }
58
+ .rf-blog--has-sidebar {
59
+ gap: 3rem;
60
+ }
61
+ .rf-blog-index__title {
62
+ font-size: var(--rf-text-4xl);
63
+ font-weight: var(--rf-weight-bold);
64
+ line-height: var(--rf-leading-tight);
65
+ letter-spacing: var(--rf-tracking-tight);
66
+ margin: 0 0 1rem;
67
+ color: var(--rf-color-text);
68
+ }
69
+ .rf-blog-index__body {
70
+ margin-bottom: 2rem;
71
+ line-height: var(--rf-leading-relaxed);
72
+ color: var(--rf-color-muted);
73
+ }
74
+ .rf-blog-index__posts {
75
+ gap: 1.5rem;
76
+ }
219
77
 
220
- /* ---- Mobile ---- */
221
- @media (max-width: 768px) {
78
+ /* ---- Post card ---- */
79
+ .rf-blog-card {
80
+ padding: 1.5rem;
81
+ border: 1px solid var(--rf-color-border);
82
+ border-radius: var(--rf-radius-md, 0.5rem);
83
+ text-decoration: none;
84
+ color: inherit;
85
+ transition:
86
+ border-color 0.15s,
87
+ box-shadow 0.15s;
88
+ }
89
+ .rf-blog-card:hover {
90
+ border-color: var(--rf-color-text);
91
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
92
+ text-decoration: none;
93
+ }
94
+ .rf-blog-card__title {
95
+ font-size: var(--rf-text-xl);
96
+ font-weight: var(--rf-weight-bold);
97
+ margin: 0 0 0.5rem;
98
+ color: var(--rf-color-text);
99
+ }
100
+ .rf-blog-card__meta {
101
+ gap: 0.75rem;
102
+ font-size: var(--rf-text-sm);
103
+ color: var(--rf-color-muted);
104
+ margin-bottom: 0.5rem;
105
+ }
106
+ .rf-blog-card__author::before {
107
+ content: "\00b7";
108
+ margin-right: 0.75rem;
109
+ }
110
+ .rf-blog-card__desc {
111
+ margin: 0 0 0.75rem;
112
+ font-size: var(--rf-text);
113
+ line-height: var(--rf-leading-relaxed);
114
+ color: var(--rf-color-muted);
115
+ }
116
+ .rf-blog-card__tags {
117
+ gap: 0.5rem;
118
+ margin-bottom: 0.75rem;
119
+ }
120
+ .rf-blog-card__link {
121
+ font-size: var(--rf-text-sm);
122
+ font-weight: var(--rf-weight-semibold);
123
+ color: var(--rf-color-primary, var(--rf-color-text));
124
+ }
125
+ .rf-blog-article__header {
126
+ margin-bottom: 2.5rem;
127
+ padding-bottom: 1.5rem;
128
+ border-bottom: 1px solid var(--rf-color-border);
129
+ }
222
130
  .rf-blog-article__title {
223
- font-size: var(--rf-text-3xl);
131
+ font-size: var(--rf-text-4xl);
132
+ font-weight: var(--rf-weight-bold);
133
+ line-height: var(--rf-leading-tight);
134
+ letter-spacing: var(--rf-tracking-tight);
135
+ margin: 0 0 1rem;
136
+ color: var(--rf-color-text);
137
+ }
138
+ .rf-blog-article__meta {
139
+ gap: 0.75rem;
140
+ font-size: var(--rf-text-sm);
141
+ color: var(--rf-color-muted);
142
+ }
143
+ .rf-blog-article__meta time {
144
+ font-weight: var(--rf-weight-medium);
145
+ }
146
+ .rf-blog-article__author::before {
147
+ content: "\00b7";
148
+ margin-right: 0.75rem;
149
+ }
150
+ .rf-blog-article__tags {
151
+ gap: 0.5rem;
152
+ margin-top: 0.75rem;
153
+ }
154
+ .rf-blog-article__tag {
155
+ font-size: var(--rf-text-xs);
156
+ font-weight: var(--rf-weight-medium);
157
+ padding: 0.2rem 0.6rem;
158
+ border-radius: 9999px;
159
+ background: var(--rf-color-surface);
160
+ color: var(--rf-color-muted);
161
+ border: 1px solid var(--rf-color-border);
162
+ }
163
+
164
+ /* ---- Article body typography ---- */
165
+ .rf-blog-article__body {
166
+ line-height: var(--rf-leading-relaxed);
167
+ }
168
+ .rf-blog-article__body h2 {
169
+ margin-top: 2.5rem;
170
+ }
171
+ .rf-blog-article__body h3 {
172
+ margin-top: 2rem;
173
+ }
174
+ .rf-blog-article__body p {
175
+ margin-bottom: 1.25rem;
224
176
  }
177
+ .rf-blog-article__body img {
178
+ border-radius: var(--rf-radius-md);
179
+ margin: 1.5rem 0;
180
+ }
181
+
182
+ /* ---- Sidebar ---- */
225
183
  .rf-blog-sidebar {
184
+ font-size: var(--rf-text-sm);
185
+ color: var(--rf-color-muted);
186
+ }
187
+ .rf-blog-sidebar h2,
188
+ .rf-blog-sidebar h3,
189
+ .rf-blog-sidebar h4 {
190
+ font-size: var(--rf-text-xs);
191
+ font-weight: var(--rf-weight-semibold);
192
+ text-transform: uppercase;
193
+ letter-spacing: var(--rf-tracking-wider);
194
+ color: var(--rf-color-muted);
195
+ margin-top: 0;
196
+ margin-bottom: 0.5rem;
197
+ }
198
+ .rf-blog-sidebar ul {
199
+ padding: 0;
200
+ margin: 0;
201
+ }
202
+ .rf-blog-sidebar li {
203
+ padding: 0.25rem 0;
204
+ }
205
+ .rf-blog-sidebar a {
206
+ color: var(--rf-color-muted);
207
+ text-decoration: none;
208
+ }
209
+ .rf-blog-sidebar a:hover {
210
+ color: var(--rf-color-text);
211
+ }
212
+
213
+ /* ---- Footer ---- */
214
+ .rf-blog-footer {
226
215
  border-top: 1px solid var(--rf-color-border);
227
- padding-top: 1.5rem;
216
+ padding: 2rem 1.5rem;
217
+ text-align: center;
218
+ font-size: var(--rf-text-sm);
219
+ color: var(--rf-color-muted);
228
220
  }
229
- }
230
221
 
222
+ /* ---- Mobile ---- */
223
+ @media (max-width: 768px) {
224
+ .rf-blog-article__title {
225
+ font-size: var(--rf-text-3xl);
226
+ }
227
+ .rf-blog-sidebar {
228
+ border-top: 1px solid var(--rf-color-border);
229
+ padding-top: 1.5rem;
230
+ }
231
+ }
231
232
  }