@refrakt-md/lumina 0.33.0 → 0.35.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 (142) hide show
  1. package/base.css +29 -29
  2. package/contracts/structures.json +623 -0
  3. package/dist/config.d.ts.map +1 -1
  4. package/dist/config.js.map +1 -1
  5. package/dist/icons.d.ts.map +1 -1
  6. package/dist/icons.js +57 -57
  7. package/dist/icons.js.map +1 -1
  8. package/dist/presets/catppuccin.js.map +1 -1
  9. package/dist/presets/dracula.js.map +1 -1
  10. package/dist/presets/gruvbox.js.map +1 -1
  11. package/dist/presets/niwaki.js.map +1 -1
  12. package/dist/presets/nord.js.map +1 -1
  13. package/dist/presets/one-dark.js.map +1 -1
  14. package/dist/presets/solarized.js.map +1 -1
  15. package/dist/presets/tideline.d.ts.map +1 -1
  16. package/dist/presets/tideline.js +20 -4
  17. package/dist/presets/tideline.js.map +1 -1
  18. package/dist/presets/tokyo-night.js.map +1 -1
  19. package/dist/tokens.js.map +1 -1
  20. package/index.css +124 -124
  21. package/package.json +5 -5
  22. package/presets.json +61 -13
  23. package/styles/base/attributes.css +32 -13
  24. package/styles/dimensions/checklist.css +45 -46
  25. package/styles/dimensions/cover.css +71 -51
  26. package/styles/dimensions/density.css +69 -65
  27. package/styles/dimensions/frame.css +116 -57
  28. package/styles/dimensions/metadata.css +110 -103
  29. package/styles/dimensions/motion.css +42 -13
  30. package/styles/dimensions/reading.css +27 -27
  31. package/styles/dimensions/sections.css +44 -45
  32. package/styles/dimensions/sequence.css +56 -57
  33. package/styles/dimensions/state.css +8 -2
  34. package/styles/dimensions/substrate.css +82 -58
  35. package/styles/dimensions/surfaces.css +65 -62
  36. package/styles/elements/blockquote.css +24 -25
  37. package/styles/elements/code.css +72 -71
  38. package/styles/elements/table.css +36 -37
  39. package/styles/global.css +163 -121
  40. package/styles/layouts/blog.css +219 -218
  41. package/styles/layouts/default.css +168 -167
  42. package/styles/layouts/docs.css +121 -122
  43. package/styles/layouts/mobile.css +54 -55
  44. package/styles/layouts/on-this-page.css +46 -47
  45. package/styles/layouts/plan.css +248 -247
  46. package/styles/layouts/search.css +142 -140
  47. package/styles/layouts/split.css +45 -45
  48. package/styles/layouts/theme-toggle.css +33 -31
  49. package/styles/layouts/version-switcher.css +38 -37
  50. package/styles/runes/accordion.css +90 -81
  51. package/styles/runes/aggregate.css +50 -39
  52. package/styles/runes/annotate.css +46 -45
  53. package/styles/runes/api.css +22 -23
  54. package/styles/runes/audio.css +140 -141
  55. package/styles/runes/badge.css +12 -13
  56. package/styles/runes/bar.css +4 -5
  57. package/styles/runes/bento.css +73 -62
  58. package/styles/runes/bg.css +62 -47
  59. package/styles/runes/blog.css +89 -90
  60. package/styles/runes/bond.css +49 -50
  61. package/styles/runes/breadcrumb.css +34 -35
  62. package/styles/runes/budget.css +126 -127
  63. package/styles/runes/bug.css +28 -27
  64. package/styles/runes/card.css +63 -60
  65. package/styles/runes/carousel.css +15 -15
  66. package/styles/runes/cast.css +50 -51
  67. package/styles/runes/changelog.css +45 -46
  68. package/styles/runes/character.css +31 -32
  69. package/styles/runes/chart.css +194 -106
  70. package/styles/runes/codegroup.css +109 -100
  71. package/styles/runes/collection.css +87 -86
  72. package/styles/runes/compare.css +38 -39
  73. package/styles/runes/comparison.css +205 -179
  74. package/styles/runes/conversation.css +36 -33
  75. package/styles/runes/cta.css +135 -132
  76. package/styles/runes/datatable.css +84 -83
  77. package/styles/runes/decision.css +25 -26
  78. package/styles/runes/design-context.css +21 -23
  79. package/styles/runes/details.css +26 -27
  80. package/styles/runes/diagram.css +28 -29
  81. package/styles/runes/diff.css +75 -72
  82. package/styles/runes/drawer.css +276 -198
  83. package/styles/runes/embed.css +20 -21
  84. package/styles/runes/event.css +35 -36
  85. package/styles/runes/expand.css +43 -34
  86. package/styles/runes/faction.css +47 -48
  87. package/styles/runes/feature.css +119 -112
  88. package/styles/runes/figure.css +11 -12
  89. package/styles/runes/file-ref.css +11 -13
  90. package/styles/runes/form.css +155 -154
  91. package/styles/runes/gallery.css +59 -60
  92. package/styles/runes/grid.css +10 -7
  93. package/styles/runes/hero.css +189 -185
  94. package/styles/runes/hint.css +57 -58
  95. package/styles/runes/howto.css +62 -64
  96. package/styles/runes/itinerary.css +133 -134
  97. package/styles/runes/juxtapose.css +83 -82
  98. package/styles/runes/lore.css +36 -34
  99. package/styles/runes/map.css +106 -99
  100. package/styles/runes/mediatext.css +30 -27
  101. package/styles/runes/milestone.css +98 -97
  102. package/styles/runes/mockup.css +338 -335
  103. package/styles/runes/nav.css +465 -450
  104. package/styles/runes/organization.css +23 -20
  105. package/styles/runes/page-section.css +14 -15
  106. package/styles/runes/pagination.css +45 -44
  107. package/styles/runes/palette.css +78 -80
  108. package/styles/runes/placeholder.css +8 -9
  109. package/styles/runes/plan-history.css +160 -161
  110. package/styles/runes/plan-progress.css +15 -16
  111. package/styles/runes/plan-ref.css +32 -23
  112. package/styles/runes/playlist.css +106 -107
  113. package/styles/runes/plot.css +96 -91
  114. package/styles/runes/preview.css +152 -149
  115. package/styles/runes/pricing.css +133 -123
  116. package/styles/runes/progress.css +32 -27
  117. package/styles/runes/pullquote.css +89 -90
  118. package/styles/runes/realm.css +47 -48
  119. package/styles/runes/recipe.css +112 -114
  120. package/styles/runes/relationships.css +77 -76
  121. package/styles/runes/reveal.css +90 -79
  122. package/styles/runes/sandbox.css +59 -60
  123. package/styles/runes/section.css +57 -50
  124. package/styles/runes/showcase.css +35 -16
  125. package/styles/runes/sidenote.css +30 -27
  126. package/styles/runes/snippet.css +8 -9
  127. package/styles/runes/spacing.css +86 -88
  128. package/styles/runes/spec.css +24 -25
  129. package/styles/runes/steps.css +89 -80
  130. package/styles/runes/storyboard.css +46 -45
  131. package/styles/runes/swatch.css +22 -23
  132. package/styles/runes/symbol.css +117 -118
  133. package/styles/runes/tabs.css +88 -79
  134. package/styles/runes/testimonial.css +43 -44
  135. package/styles/runes/textblock.css +32 -28
  136. package/styles/runes/timeline.css +63 -64
  137. package/styles/runes/tint.css +214 -215
  138. package/styles/runes/toc.css +40 -41
  139. package/styles/runes/track.css +89 -90
  140. package/styles/runes/typography.css +89 -91
  141. package/styles/runes/work.css +47 -36
  142. package/styles/runes/xref.css +21 -22
package/styles/runes/organization.css CHANGED
@@ -1,22 +1,25 @@
1
1
  @layer skin {
2
- /* Organization */
3
- .rf-organization__type {
4
- font-size: var(--rf-text-xs);
5
- font-weight: var(--rf-weight-normal);
6
- text-transform: uppercase;
7
- letter-spacing: var(--rf-tracking-wider);
8
- color: var(--rf-color-muted);
9
- opacity: 0.6;
10
- margin-bottom: 0.5rem;
11
- }
12
- .rf-organization__body img {
13
- margin-bottom: 1rem;
14
- }
15
- .rf-organization__body ul,
16
- .rf-organization__body ol {
17
- padding-left: 1.5rem;
18
- }
19
- .rf-organization__body a { color: var(--rf-color-primary); }
20
- .rf-organization__body a:hover { color: var(--rf-color-primary-hover); }
21
-
2
+ /* Organization */
3
+ .rf-organization__type {
4
+ font-size: var(--rf-text-xs);
5
+ font-weight: var(--rf-weight-normal);
6
+ text-transform: uppercase;
7
+ letter-spacing: var(--rf-tracking-wider);
8
+ color: var(--rf-color-muted);
9
+ opacity: 0.6;
10
+ margin-bottom: 0.5rem;
11
+ }
12
+ .rf-organization__body img {
13
+ margin-bottom: 1rem;
14
+ }
15
+ .rf-organization__body ul,
16
+ .rf-organization__body ol {
17
+ padding-left: 1.5rem;
18
+ }
19
+ .rf-organization__body a {
20
+ color: var(--rf-color-primary);
21
+ }
22
+ .rf-organization__body a:hover {
23
+ color: var(--rf-color-primary-hover);
24
+ }
22
25
  }
package/styles/runes/page-section.css CHANGED
@@ -1,20 +1,19 @@
1
1
  @layer skin {
2
- /* PageSection */
3
- .rf-page-section {
4
- padding: 3rem 0;
5
- }
6
- .rf-page-section > h1:first-child,
7
- .rf-page-section > h2:first-child {
8
- margin-top: 0;
9
- }
10
- .rf-page-section--split {
11
- gap: 3rem;
12
- }
13
-
14
- @media (max-width: 768px) {
2
+ /* PageSection */
3
+ .rf-page-section {
4
+ padding: 3rem 0;
5
+ }
6
+ .rf-page-section > h1:first-child,
7
+ .rf-page-section > h2:first-child {
8
+ margin-top: 0;
9
+ }
15
10
  .rf-page-section--split {
16
- gap: 1.5rem;
11
+ gap: 3rem;
17
12
  }
18
- }
19
13
 
14
+ @media (max-width: 768px) {
15
+ .rf-page-section--split {
16
+ gap: 1.5rem;
17
+ }
18
+ }
20
19
  }
package/styles/runes/pagination.css CHANGED
@@ -1,53 +1,54 @@
1
1
  @layer skin {
2
- /* Pagination — skin. The flex row + box flex sizing + alignment + marker order
2
+ /* Pagination — skin. The flex row + box flex sizing + alignment + marker order
3
3
  * live in @refrakt-md/skeleton (styles/runes/pagination.css). */
4
- .rf-pagination {
5
- gap: 1rem;
6
- margin: 3rem 0 1.5rem;
7
- padding-top: 1.5rem;
8
- border-top: 1px solid var(--rf-color-border);
9
- }
10
- .rf-pagination__prev,
11
- .rf-pagination__next {
12
- gap: 0.375rem;
13
- padding: 0.75rem 1rem;
14
- border: 1px solid var(--rf-color-border);
15
- border-radius: var(--rf-radius-md);
16
- color: var(--rf-color-text);
17
- text-decoration: none;
18
- font-size: var(--rf-text-sm);
19
- transition: border-color 150ms ease, background-color 150ms ease;
20
- }
21
- .rf-pagination__prev {
22
- text-align: left;
23
- }
24
- .rf-pagination__next {
25
- text-align: right;
26
- }
27
- .rf-pagination__prev:hover,
28
- .rf-pagination__next:hover {
29
- border-color: var(--rf-color-primary);
30
- background: var(--rf-color-surface, var(--rf-color-bg));
31
- text-decoration: none;
32
- }
33
- .rf-pagination [data-name="marker"] {
34
- color: var(--rf-color-muted);
35
- font-weight: var(--rf-weight-normal);
36
- font-size: var(--rf-text-lg);
37
- line-height: 1;
38
- }
39
- .rf-pagination [data-name="label"] {
40
- font-weight: var(--rf-weight-medium);
41
- }
42
- @media (max-width: 768px) {
43
4
  .rf-pagination {
44
- gap: 0.5rem;
5
+ gap: 1rem;
6
+ margin: 3rem 0 1.5rem;
7
+ padding-top: 1.5rem;
8
+ border-top: 1px solid var(--rf-color-border);
45
9
  }
46
10
  .rf-pagination__prev,
47
11
  .rf-pagination__next {
48
- padding: 0.625rem 0.875rem;
12
+ gap: 0.375rem;
13
+ padding: 0.75rem 1rem;
14
+ border: 1px solid var(--rf-color-border);
15
+ border-radius: var(--rf-radius-md);
16
+ color: var(--rf-color-text);
17
+ text-decoration: none;
49
18
  font-size: var(--rf-text-sm);
19
+ transition:
20
+ border-color 150ms ease,
21
+ background-color 150ms ease;
22
+ }
23
+ .rf-pagination__prev {
24
+ text-align: left;
25
+ }
26
+ .rf-pagination__next {
27
+ text-align: right;
28
+ }
29
+ .rf-pagination__prev:hover,
30
+ .rf-pagination__next:hover {
31
+ border-color: var(--rf-color-primary);
32
+ background: var(--rf-color-surface, var(--rf-color-bg));
33
+ text-decoration: none;
34
+ }
35
+ .rf-pagination [data-name="marker"] {
36
+ color: var(--rf-color-muted);
37
+ font-weight: var(--rf-weight-normal);
38
+ font-size: var(--rf-text-lg);
39
+ line-height: 1;
40
+ }
41
+ .rf-pagination [data-name="label"] {
42
+ font-weight: var(--rf-weight-medium);
43
+ }
44
+ @media (max-width: 768px) {
45
+ .rf-pagination {
46
+ gap: 0.5rem;
47
+ }
48
+ .rf-pagination__prev,
49
+ .rf-pagination__next {
50
+ padding: 0.625rem 0.875rem;
51
+ font-size: var(--rf-text-sm);
52
+ }
50
53
  }
51
- }
52
-
53
54
  }
package/styles/runes/palette.css CHANGED
@@ -1,88 +1,86 @@
1
1
  @layer skin {
2
-
3
- /* WORK-538 — resting title size, so the prominence ramp computes from it
2
+ /* WORK-538 — resting title size, so the prominence ramp computes from it
4
3
  * rather than from the density default. */
5
- .rf-palette {
6
- --rf-title-size: var(--rf-text-lg);
7
- }
4
+ .rf-palette {
5
+ --rf-title-size: var(--rf-text-lg);
6
+ }
8
7
 
9
- /* Palette — color swatch grid */
10
- .rf-palette__title {
11
- /* WORK-538 — read the prominence override first; the fallback is this rune's
8
+ /* Palette — color swatch grid */
9
+ .rf-palette__title {
10
+ /* WORK-538 — read the prominence override first; the fallback is this rune's
12
11
  * resting size, stated as --rf-title-size on the root so the prominence ramp
13
12
  * can compute from it. */
14
- font-size: var(--rf-prominence-size, var(--rf-title-size));
15
- font-weight: var(--rf-weight-semibold);
16
- margin-bottom: 1rem;
17
- }
18
- .rf-palette__group {
19
- margin-bottom: 1.5rem;
20
- }
21
- .rf-palette__group:last-child {
22
- margin-bottom: 0;
23
- }
24
- .rf-palette__group-title {
25
- font-size: var(--rf-text-xs);
26
- font-weight: var(--rf-weight-semibold);
27
- text-transform: uppercase;
28
- letter-spacing: var(--rf-tracking-wider);
29
- color: var(--rf-color-muted);
30
- margin-bottom: 0.75rem;
31
- }
32
- .rf-palette__grid {
33
- gap: 0.75rem;
34
- }
35
- .rf-palette__swatch {
36
- gap: 0.375rem;
37
- }
38
- .rf-palette__swatch-color {
39
- border-radius: var(--rf-radius-md, 8px);
40
- border: 1px solid rgba(0, 0, 0, 0.08);
41
- }
42
- .rf-palette__swatch-name {
43
- font-weight: var(--rf-weight-medium);
44
- font-size: var(--rf-text-sm);
45
- }
46
- .rf-palette__swatch-value {
47
- font-family: var(--rf-font-mono, monospace);
48
- font-size: var(--rf-text-xs);
49
- color: var(--rf-color-muted);
50
- }
51
- .rf-palette__swatch-contrast {
52
- font-family: var(--rf-font-mono, monospace);
53
- font-size: var(--rf-text-xs);
54
- color: var(--rf-color-muted);
55
- }
56
- .rf-palette__swatch-a11y {
57
- gap: 0.5rem;
58
- font-size: var(--rf-text-xs);
59
- font-weight: var(--rf-weight-medium);
60
- }
61
- .rf-palette__swatch-a11y--pass {
62
- color: var(--rf-color-success, #10b981);
63
- }
64
- .rf-palette__swatch-a11y--fail {
65
- color: var(--rf-color-danger, #ef4444);
66
- }
13
+ font-size: var(--rf-prominence-size, var(--rf-title-size));
14
+ font-weight: var(--rf-weight-semibold);
15
+ margin-bottom: 1rem;
16
+ }
17
+ .rf-palette__group {
18
+ margin-bottom: 1.5rem;
19
+ }
20
+ .rf-palette__group:last-child {
21
+ margin-bottom: 0;
22
+ }
23
+ .rf-palette__group-title {
24
+ font-size: var(--rf-text-xs);
25
+ font-weight: var(--rf-weight-semibold);
26
+ text-transform: uppercase;
27
+ letter-spacing: var(--rf-tracking-wider);
28
+ color: var(--rf-color-muted);
29
+ margin-bottom: 0.75rem;
30
+ }
31
+ .rf-palette__grid {
32
+ gap: 0.75rem;
33
+ }
34
+ .rf-palette__swatch {
35
+ gap: 0.375rem;
36
+ }
37
+ .rf-palette__swatch-color {
38
+ border-radius: var(--rf-radius-md, 8px);
39
+ border: 1px solid rgba(0, 0, 0, 0.08);
40
+ }
41
+ .rf-palette__swatch-name {
42
+ font-weight: var(--rf-weight-medium);
43
+ font-size: var(--rf-text-sm);
44
+ }
45
+ .rf-palette__swatch-value {
46
+ font-family: var(--rf-font-mono, monospace);
47
+ font-size: var(--rf-text-xs);
48
+ color: var(--rf-color-muted);
49
+ }
50
+ .rf-palette__swatch-contrast {
51
+ font-family: var(--rf-font-mono, monospace);
52
+ font-size: var(--rf-text-xs);
53
+ color: var(--rf-color-muted);
54
+ }
55
+ .rf-palette__swatch-a11y {
56
+ gap: 0.5rem;
57
+ font-size: var(--rf-text-xs);
58
+ font-weight: var(--rf-weight-medium);
59
+ }
60
+ .rf-palette__swatch-a11y--pass {
61
+ color: var(--rf-color-success, #10b981);
62
+ }
63
+ .rf-palette__swatch-a11y--fail {
64
+ color: var(--rf-color-danger, #ef4444);
65
+ }
67
66
 
68
- /* Neutral scale — horizontal gradient strip */
69
- .rf-palette__scale {
70
- border-radius: var(--rf-radius-md, 8px);
71
- margin-bottom: 0.5rem;
72
- }
73
- .rf-palette__scale-stop {
74
- padding: 1.25rem 0.5rem 0.5rem;
75
- font-size: var(--rf-text-xs);
76
- font-family: var(--rf-font-mono, monospace);
77
- }
78
- .rf-palette__scale + .rf-palette__swatch-name {
79
- margin-top: 0.25rem;
80
- font-size: var(--rf-text-xs);
81
- }
82
-
83
- /* Context-aware: no outer margin when inside design-context */
84
- .rf-palette--in-design-context {
85
- margin: 0;
86
- }
67
+ /* Neutral scale — horizontal gradient strip */
68
+ .rf-palette__scale {
69
+ border-radius: var(--rf-radius-md, 8px);
70
+ margin-bottom: 0.5rem;
71
+ }
72
+ .rf-palette__scale-stop {
73
+ padding: 1.25rem 0.5rem 0.5rem;
74
+ font-size: var(--rf-text-xs);
75
+ font-family: var(--rf-font-mono, monospace);
76
+ }
77
+ .rf-palette__scale + .rf-palette__swatch-name {
78
+ margin-top: 0.25rem;
79
+ font-size: var(--rf-text-xs);
80
+ }
87
81
 
82
+ /* Context-aware: no outer margin when inside design-context */
83
+ .rf-palette--in-design-context {
84
+ margin: 0;
85
+ }
88
86
  }
package/styles/runes/placeholder.css CHANGED
@@ -1,16 +1,15 @@
1
1
  @layer skin {
2
- /* Placeholder — generated inline SVG from the `placeholder:<shape>` image-src
2
+ /* Placeholder — generated inline SVG from the `placeholder:<shape>` image-src
3
3
  * scheme (SPEC-106). The SVG carries its own viewBox aspect and tints itself
4
4
  * with theme tokens (surface / muted / border), so it tracks the active tint
5
5
  * and dark mode for free. These rules just make it behave like a responsive
6
6
  * replaced element wherever a real `<img>` would have gone. */
7
- .rf-placeholder {
8
- border-radius: var(--rf-radius-media);
9
- }
10
-
11
- /* Avatar shape reads as round. */
12
- .rf-placeholder[data-shape="avatar"] {
13
- border-radius: 50%;
14
- }
7
+ .rf-placeholder {
8
+ border-radius: var(--rf-radius-media);
9
+ }
15
10
 
11
+ /* Avatar shape reads as round. */
12
+ .rf-placeholder[data-shape="avatar"] {
13
+ border-radius: 50%;
14
+ }
16
15
  }