@refrakt-md/lumina 0.8.2 → 0.8.3
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/contracts/structures.json +419 -16
- package/package.json +6 -6
- package/styles/runes/audio.css +2 -7
- package/styles/runes/bond.css +0 -3
- package/styles/runes/budget.css +16 -24
- package/styles/runes/cast.css +37 -14
- package/styles/runes/character.css +19 -29
- package/styles/runes/datatable.css +2 -6
- package/styles/runes/event.css +13 -11
- package/styles/runes/faction.css +79 -36
- package/styles/runes/howto.css +70 -18
- package/styles/runes/lore.css +21 -15
- package/styles/runes/organization.css +3 -5
- package/styles/runes/playlist.css +58 -34
- package/styles/runes/plot.css +84 -24
- package/styles/runes/preview.css +21 -20
- package/styles/runes/pullquote.css +21 -7
- package/styles/runes/realm.css +72 -32
- package/styles/runes/recipe.css +131 -27
- package/styles/runes/steps.css +13 -17
- package/styles/runes/tabs.css +16 -15
- package/styles/runes/track.css +3 -4
package/styles/runes/recipe.css
CHANGED
|
@@ -1,23 +1,25 @@
|
|
|
1
|
-
/* Recipe */
|
|
1
|
+
/* Recipe — editorial cookbook aesthetic */
|
|
2
|
+
|
|
3
|
+
/* Root: no border box, just flow spacing */
|
|
2
4
|
.rf-recipe {
|
|
3
|
-
border: 1px solid var(--rf-color-border);
|
|
4
|
-
border-radius: var(--rf-radius-lg);
|
|
5
|
-
padding: 2rem;
|
|
6
5
|
margin: 1.5rem 0;
|
|
7
6
|
}
|
|
7
|
+
|
|
8
|
+
/* Header */
|
|
8
9
|
.rf-recipe__header {
|
|
9
|
-
margin-bottom: 1.
|
|
10
|
+
margin-bottom: 1.25rem;
|
|
10
11
|
}
|
|
11
12
|
.rf-recipe .rf-recipe__eyebrow {
|
|
12
|
-
font-size: 0.
|
|
13
|
+
font-size: 0.8rem;
|
|
13
14
|
font-weight: 600;
|
|
14
|
-
letter-spacing: 0.
|
|
15
|
+
letter-spacing: 0.06em;
|
|
15
16
|
text-transform: uppercase;
|
|
16
17
|
color: var(--rf-color-primary);
|
|
17
|
-
margin: 0 0 0.
|
|
18
|
+
margin: 0 0 0.375rem;
|
|
18
19
|
}
|
|
19
20
|
.rf-recipe__headline {
|
|
20
21
|
margin-top: 0;
|
|
22
|
+
margin-bottom: 0.25rem;
|
|
21
23
|
}
|
|
22
24
|
.rf-recipe .rf-recipe__blurb {
|
|
23
25
|
color: var(--rf-color-muted);
|
|
@@ -27,49 +29,109 @@
|
|
|
27
29
|
.rf-recipe__image {
|
|
28
30
|
margin-bottom: 1rem;
|
|
29
31
|
}
|
|
32
|
+
|
|
33
|
+
/* Meta bar — soft surface strip instead of bordered divider */
|
|
30
34
|
.rf-recipe__meta {
|
|
31
35
|
display: flex;
|
|
32
36
|
flex-wrap: wrap;
|
|
33
|
-
gap:
|
|
37
|
+
gap: 0.75rem 1.25rem;
|
|
34
38
|
align-items: center;
|
|
35
|
-
|
|
39
|
+
background: var(--rf-color-surface);
|
|
40
|
+
border-radius: var(--rf-radius-md);
|
|
41
|
+
padding: 0.625rem 1rem;
|
|
36
42
|
margin-bottom: 1.5rem;
|
|
37
|
-
border-bottom: 1px solid var(--rf-color-border);
|
|
38
43
|
}
|
|
39
44
|
.rf-recipe__meta-item {
|
|
40
|
-
font-size: 0.
|
|
45
|
+
font-size: 0.8125rem;
|
|
41
46
|
color: var(--rf-color-muted);
|
|
42
|
-
font-weight:
|
|
47
|
+
font-weight: 400;
|
|
43
48
|
}
|
|
49
|
+
|
|
50
|
+
/* Difficulty — plain text, same style as other meta items */
|
|
44
51
|
.rf-recipe__badge {
|
|
45
|
-
font-size: 0.
|
|
46
|
-
font-weight:
|
|
47
|
-
padding: 0.125rem 0.5rem;
|
|
48
|
-
border-radius: var(--rf-radius-full);
|
|
52
|
+
font-size: 0.8125rem;
|
|
53
|
+
font-weight: 400;
|
|
49
54
|
text-transform: capitalize;
|
|
55
|
+
color: var(--rf-color-muted);
|
|
50
56
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
[data-difficulty="medium"] .rf-recipe__badge { color: var(--rf-color-warning); background: var(--rf-color-warning-bg); }
|
|
54
|
-
[data-difficulty="hard"] .rf-recipe__badge { color: var(--rf-color-danger); background: var(--rf-color-danger-bg); }
|
|
57
|
+
|
|
58
|
+
/* Content wrapper */
|
|
55
59
|
.rf-recipe__content {
|
|
56
60
|
display: flex;
|
|
57
61
|
flex-direction: column;
|
|
58
|
-
gap: 1.
|
|
62
|
+
gap: 1.75rem;
|
|
59
63
|
}
|
|
64
|
+
|
|
65
|
+
/* Ingredients — surfaced zone with custom markers */
|
|
60
66
|
.rf-recipe__content ul {
|
|
67
|
+
background: var(--rf-color-surface);
|
|
68
|
+
border-radius: var(--rf-radius-md);
|
|
69
|
+
padding: 1.25rem 1.25rem 1.25rem 2.5rem;
|
|
61
70
|
list-style: disc;
|
|
62
|
-
|
|
71
|
+
margin: 0;
|
|
72
|
+
}
|
|
73
|
+
.rf-recipe__content ul li {
|
|
74
|
+
padding: 0.2rem 0;
|
|
75
|
+
line-height: 1.6;
|
|
76
|
+
}
|
|
77
|
+
.rf-recipe__content ul li::marker {
|
|
78
|
+
color: var(--rf-color-primary);
|
|
63
79
|
}
|
|
80
|
+
|
|
81
|
+
/* Steps — numbered with styled counters */
|
|
64
82
|
.rf-recipe__content ol {
|
|
65
|
-
padding-left:
|
|
83
|
+
padding-left: 0;
|
|
84
|
+
margin: 0;
|
|
85
|
+
list-style: none;
|
|
86
|
+
counter-reset: recipe-step;
|
|
87
|
+
}
|
|
88
|
+
.rf-recipe__content ol > li {
|
|
89
|
+
counter-increment: recipe-step;
|
|
90
|
+
padding: 0.625rem 0;
|
|
91
|
+
padding-left: 2.25rem;
|
|
92
|
+
position: relative;
|
|
93
|
+
line-height: 1.65;
|
|
94
|
+
}
|
|
95
|
+
.rf-recipe__content ol > li + li {
|
|
96
|
+
border-top: 1px solid var(--rf-color-border);
|
|
97
|
+
}
|
|
98
|
+
.rf-recipe__content ol > li::before {
|
|
99
|
+
content: counter(recipe-step);
|
|
100
|
+
position: absolute;
|
|
101
|
+
left: 0;
|
|
102
|
+
top: 0.625rem;
|
|
103
|
+
width: 1.5rem;
|
|
104
|
+
height: 1.5rem;
|
|
105
|
+
display: flex;
|
|
106
|
+
align-items: center;
|
|
107
|
+
justify-content: center;
|
|
108
|
+
font-size: 0.75rem;
|
|
109
|
+
font-weight: 700;
|
|
110
|
+
color: var(--rf-color-primary);
|
|
111
|
+
background: var(--rf-color-surface);
|
|
112
|
+
border-radius: var(--rf-radius-full);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* Tips — callout accent like hint */
|
|
116
|
+
.rf-recipe__content blockquote {
|
|
117
|
+
border-left: 2px solid var(--rf-color-primary);
|
|
118
|
+
background: var(--rf-color-surface);
|
|
119
|
+
border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
|
|
120
|
+
padding: 0.75rem 1.25rem;
|
|
121
|
+
margin: 0;
|
|
122
|
+
font-size: 0.9125rem;
|
|
123
|
+
font-style: italic;
|
|
124
|
+
color: var(--rf-color-muted);
|
|
125
|
+
line-height: 1.6;
|
|
66
126
|
}
|
|
67
|
-
.rf-recipe__content
|
|
68
|
-
|
|
127
|
+
.rf-recipe__content blockquote p {
|
|
128
|
+
margin: 0;
|
|
69
129
|
}
|
|
130
|
+
|
|
70
131
|
/* Media zone */
|
|
71
132
|
.rf-recipe__media {
|
|
72
133
|
border-radius: var(--rf-radius-lg);
|
|
134
|
+
overflow: hidden;
|
|
73
135
|
}
|
|
74
136
|
.rf-recipe__media img {
|
|
75
137
|
display: block;
|
|
@@ -77,8 +139,50 @@
|
|
|
77
139
|
height: auto;
|
|
78
140
|
border-radius: var(--rf-radius-lg);
|
|
79
141
|
}
|
|
80
|
-
|
|
142
|
+
|
|
143
|
+
/* Split layout — shared */
|
|
144
|
+
.rf-recipe[data-layout="split"],
|
|
145
|
+
.rf-recipe[data-layout="split-reverse"] {
|
|
146
|
+
display: grid;
|
|
147
|
+
gap: var(--split-gap, 2rem);
|
|
148
|
+
align-items: var(--split-valign, start);
|
|
149
|
+
}
|
|
150
|
+
/* Both use the same column template */
|
|
151
|
+
.rf-recipe[data-layout="split"],
|
|
152
|
+
.rf-recipe[data-layout="split-reverse"] {
|
|
153
|
+
grid-template-columns: var(--split-ratio, 1fr 1fr);
|
|
154
|
+
}
|
|
155
|
+
/* Split: content left (col 1), media right (col 2) — DOM order is media first,
|
|
156
|
+
so explicit placement is needed */
|
|
157
|
+
.rf-recipe[data-layout="split"] > .rf-recipe__content {
|
|
158
|
+
grid-column: 1;
|
|
159
|
+
grid-row: 2;
|
|
160
|
+
}
|
|
161
|
+
.rf-recipe[data-layout="split"] > .rf-recipe__media {
|
|
162
|
+
grid-column: 2;
|
|
163
|
+
grid-row: 2;
|
|
164
|
+
}
|
|
165
|
+
/* Split-reverse: media left (col 1), content right (col 2) — matches DOM order */
|
|
166
|
+
/* Meta bar spans full width in split layouts */
|
|
81
167
|
.rf-recipe[data-layout="split"] > .rf-recipe__meta,
|
|
82
168
|
.rf-recipe[data-layout="split-reverse"] > .rf-recipe__meta {
|
|
83
169
|
grid-column: 1 / -1;
|
|
84
170
|
}
|
|
171
|
+
/* Collapse to single column on small screens */
|
|
172
|
+
@media (max-width: 640px) {
|
|
173
|
+
.rf-recipe[data-layout="split"],
|
|
174
|
+
.rf-recipe[data-layout="split-reverse"] {
|
|
175
|
+
grid-template-columns: 1fr;
|
|
176
|
+
}
|
|
177
|
+
.rf-recipe[data-layout="split"] > .rf-recipe__content,
|
|
178
|
+
.rf-recipe[data-layout="split"] > .rf-recipe__media {
|
|
179
|
+
grid-column: auto;
|
|
180
|
+
grid-row: auto;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* Split layout media gets subtle depth */
|
|
185
|
+
.rf-recipe[data-layout="split"] .rf-recipe__media img,
|
|
186
|
+
.rf-recipe[data-layout="split-reverse"] .rf-recipe__media img {
|
|
187
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
188
|
+
}
|
package/styles/runes/steps.css
CHANGED
|
@@ -47,35 +47,32 @@
|
|
|
47
47
|
.rf-step__content {
|
|
48
48
|
display: contents;
|
|
49
49
|
}
|
|
50
|
+
|
|
51
|
+
/* Individual step — borderless, matching recipe */
|
|
50
52
|
.rf-step {
|
|
51
53
|
counter-increment: step;
|
|
52
54
|
position: relative;
|
|
53
|
-
padding
|
|
54
|
-
padding-bottom: 1.75rem;
|
|
55
|
-
border-left: 2px solid var(--rf-color-border);
|
|
56
|
-
margin-left: 0.875rem;
|
|
55
|
+
padding: 0.625rem 0 0.625rem 2.25rem;
|
|
57
56
|
}
|
|
58
|
-
.rf-step
|
|
59
|
-
border-
|
|
60
|
-
padding-bottom: 0;
|
|
57
|
+
.rf-step + .rf-step {
|
|
58
|
+
border-top: 1px solid var(--rf-color-border);
|
|
61
59
|
}
|
|
62
60
|
.rf-step::before {
|
|
63
61
|
content: counter(step);
|
|
64
62
|
position: absolute;
|
|
65
|
-
left:
|
|
66
|
-
top: 0;
|
|
67
|
-
width: 1.
|
|
68
|
-
height: 1.
|
|
69
|
-
background: var(--rf-color-
|
|
70
|
-
color: var(--rf-color-
|
|
63
|
+
left: 0;
|
|
64
|
+
top: 0.625rem;
|
|
65
|
+
width: 1.5rem;
|
|
66
|
+
height: 1.5rem;
|
|
67
|
+
background: var(--rf-color-surface);
|
|
68
|
+
color: var(--rf-color-primary);
|
|
71
69
|
border-radius: var(--rf-radius-full);
|
|
72
70
|
display: flex;
|
|
73
71
|
align-items: center;
|
|
74
72
|
justify-content: center;
|
|
75
|
-
font-weight:
|
|
76
|
-
font-size: 0.
|
|
73
|
+
font-weight: 700;
|
|
74
|
+
font-size: 0.75rem;
|
|
77
75
|
font-variant-numeric: tabular-nums;
|
|
78
|
-
box-shadow: 0 0 0 4px var(--rf-color-bg);
|
|
79
76
|
}
|
|
80
77
|
.rf-step h1,
|
|
81
78
|
.rf-step h2,
|
|
@@ -95,7 +92,6 @@
|
|
|
95
92
|
margin-top: 0;
|
|
96
93
|
}
|
|
97
94
|
.rf-step p {
|
|
98
|
-
color: var(--rf-color-muted);
|
|
99
95
|
font-size: 0.925rem;
|
|
100
96
|
line-height: 1.65;
|
|
101
97
|
}
|
package/styles/runes/tabs.css
CHANGED
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
/* Tabs */
|
|
2
2
|
.rf-tabs {
|
|
3
|
-
border: 1px solid var(--rf-color-border);
|
|
4
|
-
border-radius: var(--rf-radius-md);
|
|
5
|
-
overflow: hidden;
|
|
6
3
|
margin: 1.5rem 0;
|
|
7
|
-
background: var(--rf-color-bg);
|
|
8
4
|
}
|
|
9
5
|
.rf-tabs__header {
|
|
10
6
|
margin-bottom: 1.5rem;
|
|
@@ -42,9 +38,10 @@
|
|
|
42
38
|
.rf-tabs__image {
|
|
43
39
|
margin-bottom: 1rem;
|
|
44
40
|
}
|
|
41
|
+
|
|
42
|
+
/* Tab bar — clean bottom line, no background */
|
|
45
43
|
.rf-tabs__tabs {
|
|
46
44
|
display: flex;
|
|
47
|
-
background: var(--rf-color-surface);
|
|
48
45
|
border-bottom: 1px solid var(--rf-color-border);
|
|
49
46
|
overflow-x: auto;
|
|
50
47
|
overflow-y: hidden;
|
|
@@ -54,37 +51,41 @@
|
|
|
54
51
|
padding: 0;
|
|
55
52
|
margin: 0;
|
|
56
53
|
}
|
|
54
|
+
|
|
55
|
+
/* Tab buttons */
|
|
57
56
|
.rf-tab {
|
|
58
57
|
flex: 0 0 auto;
|
|
59
58
|
padding: 0.625rem 1.25rem;
|
|
60
|
-
font-size: 0.
|
|
59
|
+
font-size: 0.875rem;
|
|
61
60
|
font-weight: 500;
|
|
62
61
|
color: var(--rf-color-muted);
|
|
63
62
|
background: none;
|
|
64
63
|
border: none;
|
|
65
64
|
border-bottom: 2px solid transparent;
|
|
66
65
|
cursor: pointer;
|
|
67
|
-
transition: color 200ms ease, border-color 200ms ease
|
|
66
|
+
transition: color 200ms ease, border-color 200ms ease;
|
|
68
67
|
white-space: nowrap;
|
|
69
|
-
margin-bottom: -1px;
|
|
70
68
|
font-family: inherit;
|
|
71
69
|
}
|
|
72
70
|
.rf-tab:hover {
|
|
73
71
|
color: var(--rf-color-text);
|
|
74
|
-
background: var(--rf-color-surface-hover);
|
|
75
72
|
}
|
|
76
73
|
.rf-tab--active {
|
|
77
74
|
color: var(--rf-color-primary);
|
|
78
75
|
border-bottom-color: var(--rf-color-primary);
|
|
79
76
|
font-weight: 600;
|
|
80
|
-
background: var(--rf-color-bg);
|
|
81
77
|
}
|
|
82
|
-
|
|
83
|
-
|
|
78
|
+
|
|
79
|
+
/* Panel content — breathing room */
|
|
80
|
+
.rf-tab-panel {
|
|
81
|
+
padding: 1.5rem 0;
|
|
84
82
|
}
|
|
85
|
-
.rf-
|
|
86
|
-
margin: 0;
|
|
83
|
+
.rf-tab-panel > *:first-child {
|
|
84
|
+
margin-top: 0;
|
|
87
85
|
}
|
|
88
|
-
.rf-
|
|
86
|
+
.rf-tab-panel > *:last-child {
|
|
89
87
|
margin-bottom: 0;
|
|
90
88
|
}
|
|
89
|
+
.rf-tab-panel pre {
|
|
90
|
+
margin: 0;
|
|
91
|
+
}
|
package/styles/runes/track.css
CHANGED
|
@@ -4,12 +4,11 @@
|
|
|
4
4
|
align-items: center;
|
|
5
5
|
gap: 0.75rem;
|
|
6
6
|
padding: 0.625rem 1.5rem;
|
|
7
|
-
border-bottom: 1px solid color-mix(in srgb, var(--rf-color-border) 50%, transparent);
|
|
8
7
|
transition: background 0.15s ease;
|
|
9
8
|
counter-increment: track;
|
|
10
9
|
}
|
|
11
|
-
.rf-track
|
|
12
|
-
|
|
10
|
+
.rf-track + .rf-track {
|
|
11
|
+
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rf-color-border) 50%, transparent);
|
|
13
12
|
}
|
|
14
13
|
.rf-track:hover {
|
|
15
14
|
background: color-mix(in srgb, var(--rf-color-border) 15%, transparent);
|
|
@@ -18,7 +17,7 @@
|
|
|
18
17
|
content: counter(track);
|
|
19
18
|
min-width: 1.5rem;
|
|
20
19
|
font-size: 0.8rem;
|
|
21
|
-
color: var(--rf-color-
|
|
20
|
+
color: var(--rf-color-primary);
|
|
22
21
|
text-align: right;
|
|
23
22
|
flex-shrink: 0;
|
|
24
23
|
}
|