@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/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
  }