@refrakt-md/lumina 0.9.4 → 0.9.5

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 (6) hide show
  1. package/package.json +4 -4
  2. package/styles/runes/annotate.css +9 -13
  3. package/styles/runes/budget.css +3 -2
  4. package/styles/runes/diagram.css +15 -1
  5. package/styles/runes/juxtapose.css +14 -13
  6. package/styles/runes/mediatext.css +9 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@refrakt-md/lumina",
3
3
  "description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and layout configs",
4
- "version": "0.9.4",
4
+ "version": "0.9.5",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "repository": {
@@ -43,9 +43,9 @@
43
43
  "build": "tsc"
44
44
  },
45
45
  "dependencies": {
46
- "@refrakt-md/runes": "0.9.4",
47
- "@refrakt-md/transform": "0.9.4",
48
- "@refrakt-md/types": "0.9.4"
46
+ "@refrakt-md/runes": "0.9.5",
47
+ "@refrakt-md/transform": "0.9.5",
48
+ "@refrakt-md/types": "0.9.5"
49
49
  },
50
50
  "devDependencies": {
51
51
  "postcss": "^8.4.0"
package/styles/runes/annotate.css CHANGED
@@ -3,28 +3,26 @@
3
3
  display: contents;
4
4
  }
5
5
  /* Margin style */
6
- .rf-annotate--margin {
7
- position: relative;
8
- }
9
6
  .rf-annotate--margin .rf-annotate-note {
10
7
  float: right;
11
8
  clear: right;
12
9
  width: 40%;
13
- margin: 0 -44% 0.5rem 1rem;
14
- padding: 0.75rem 1rem;
10
+ margin: 0.25rem 0 0.5rem 1rem;
11
+ padding: 0.5rem 0 0.5rem 1rem;
15
12
  font-size: 0.8125rem;
16
13
  color: var(--rf-color-muted);
17
14
  border-left: 2px solid var(--rf-color-border);
18
15
  }
19
16
  /* Inline style */
17
+ .rf-annotate--inline p { display: inline; }
20
18
  .rf-annotate--inline .rf-annotate-note {
21
- margin: 0.5rem 0 1rem;
22
- padding: 0.75rem 1rem;
23
- font-size: 0.875rem;
19
+ display: inline-block;
20
+ vertical-align: baseline;
21
+ margin: 0 0.25rem;
22
+ padding: 0.125rem 0 0.125rem 0.5rem;
23
+ font-size: 0.8125rem;
24
24
  color: var(--rf-color-muted);
25
- background: var(--rf-color-surface);
26
- border-radius: var(--rf-radius-md);
27
- border-left: 3px solid var(--rf-color-primary);
25
+ border-left: 2px solid var(--rf-color-border);
28
26
  }
29
27
  /* Tooltip style */
30
28
  .rf-annotate--tooltip .rf-annotate-note {
@@ -78,7 +76,5 @@
78
76
  width: 100%;
79
77
  margin: 0.5rem 0 1rem;
80
78
  padding: 0.75rem 1rem;
81
- background: var(--rf-color-surface);
82
- border-radius: var(--rf-radius-md);
83
79
  }
84
80
  }
package/styles/runes/budget.css CHANGED
@@ -47,7 +47,7 @@
47
47
  align-items: center;
48
48
  margin-bottom: 0.5rem;
49
49
  }
50
- .rf-budget-category--estimate .rf-budget-category__header::after {
50
+ .rf-budget-category--estimate .rf-budget-category__subtotal::before {
51
51
  content: 'est.';
52
52
  font-size: 0.6875rem;
53
53
  font-weight: 600;
@@ -57,7 +57,8 @@
57
57
  background: var(--rf-color-warning-bg);
58
58
  padding: 0.0625rem 0.375rem;
59
59
  border-radius: var(--rf-radius-full);
60
- margin-left: 0.5rem;
60
+ margin-right: 0.5rem;
61
+ vertical-align: middle;
61
62
  }
62
63
  .rf-budget-category__label {
63
64
  font-size: 0.9375rem;
package/styles/runes/diagram.css CHANGED
@@ -1,9 +1,10 @@
1
1
  /* Diagram */
2
2
  .rf-diagram {
3
- border: 1px solid var(--rf-color-border);
3
+ display: block;
4
4
  border-radius: var(--rf-radius-lg);
5
5
  padding: 1.5rem;
6
6
  text-align: center;
7
+ overflow: hidden;
7
8
  }
8
9
  .rf-diagram__title {
9
10
  font-weight: 600;
@@ -24,3 +25,16 @@
24
25
  font-size: 0.875rem;
25
26
  margin: 0;
26
27
  }
28
+
29
+ /* Mermaid SVG overrides */
30
+ .rf-diagram__container .label {
31
+ font-family: var(--rf-font-sans) !important;
32
+ color: var(--rf-color-text) !important;
33
+ }
34
+ .rf-diagram__container .edgeLabel {
35
+ background-color: var(--rf-color-surface) !important;
36
+ }
37
+ .rf-diagram__container .marker {
38
+ fill: var(--rf-color-muted) !important;
39
+ stroke: var(--rf-color-muted) !important;
40
+ }
package/styles/runes/juxtapose.css CHANGED
@@ -122,35 +122,36 @@
122
122
  /* ─── Toggle bar (injected by behavior) ─── */
123
123
  .rf-juxtapose__toggle-bar {
124
124
  display: flex;
125
- gap: 0.25rem;
126
- padding: 0.25rem;
125
+ gap: 0.125rem;
126
+ padding: 0.125rem;
127
127
  margin-bottom: 0.75rem;
128
- background: var(--rf-color-surface);
129
- border: 1px solid var(--rf-color-border);
130
- border-radius: var(--rf-radius-md);
128
+ background: var(--rf-color-surface-active);
129
+ border-radius: var(--rf-radius-full);
131
130
  width: fit-content;
132
131
  }
133
132
 
134
- .rf-juxtapose__toggle-btn {
135
- padding: 0.375rem 1rem;
133
+ .rf-juxtapose__toggle-btn,
134
+ .rf-juxtapose__toggle-btn[data-state] {
135
+ padding: 0.25rem 0.75rem;
136
136
  border: none;
137
- border-radius: var(--rf-radius-sm);
137
+ border-radius: var(--rf-radius-full);
138
138
  background: transparent;
139
139
  color: var(--rf-color-muted);
140
- font-size: 0.875rem;
140
+ font-size: 0.75rem;
141
141
  font-weight: 500;
142
142
  cursor: pointer;
143
- transition: background 0.15s, color 0.15s;
143
+ transition: background 150ms ease, color 150ms ease;
144
144
  }
145
145
 
146
146
  .rf-juxtapose__toggle-btn:hover {
147
147
  color: var(--rf-color-text);
148
148
  }
149
149
 
150
- .rf-juxtapose__toggle-btn--active {
151
- background: var(--rf-color-bg, #fff);
150
+ .rf-juxtapose__toggle-btn--active,
151
+ .rf-juxtapose__toggle-btn[data-state="active"] {
152
+ background: var(--rf-color-bg);
152
153
  color: var(--rf-color-text);
153
- box-shadow: var(--rf-shadow-sm);
154
+ box-shadow: var(--rf-shadow-xs);
154
155
  }
155
156
 
156
157
  /* ─── Fade variant cursor hint ─── */
package/styles/runes/mediatext.css CHANGED
@@ -36,9 +36,17 @@
36
36
 
37
37
  /* Wrap mode — float-based text wrapping */
38
38
  .rf-mediatext[data-wrap="true"] .rf-mediatext__media {
39
- max-width: 50%;
40
39
  margin-bottom: 1rem;
41
40
  }
41
+ .rf-mediatext[data-ratio="1:1"][data-wrap="true"] .rf-mediatext__media {
42
+ max-width: 50%;
43
+ }
44
+ .rf-mediatext[data-ratio="1:2"][data-wrap="true"] .rf-mediatext__media {
45
+ max-width: 33.333%;
46
+ }
47
+ .rf-mediatext[data-ratio="2:1"][data-wrap="true"] .rf-mediatext__media {
48
+ max-width: 66.666%;
49
+ }
42
50
  .rf-mediatext--left[data-wrap="true"] .rf-mediatext__media {
43
51
  float: left;
44
52
  margin-right: 2rem;