@refrakt-md/lumina 0.9.1 → 0.9.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.
Files changed (39) hide show
  1. package/contracts/structures.json +19 -40
  2. package/dist/config.js +42 -42
  3. package/dist/config.js.map +1 -1
  4. package/layouts/index.ts +13 -0
  5. package/package.json +10 -35
  6. package/styles/dimensions/density.css +22 -0
  7. package/styles/dimensions/metadata.css +2 -6
  8. package/styles/dimensions/sections.css +1 -1
  9. package/styles/dimensions/surfaces.css +5 -4
  10. package/styles/elements/blockquote.css +1 -1
  11. package/styles/elements/code.css +11 -0
  12. package/styles/elements/table.css +14 -8
  13. package/styles/global.css +1 -1
  14. package/styles/layouts/default.css +7 -0
  15. package/styles/runes/api.css +11 -54
  16. package/styles/runes/bond.css +3 -3
  17. package/styles/runes/budget.css +22 -8
  18. package/styles/runes/chart.css +1 -0
  19. package/styles/runes/codegroup.css +14 -5
  20. package/styles/runes/design-context.css +13 -16
  21. package/styles/runes/details.css +3 -8
  22. package/styles/runes/diff.css +3 -2
  23. package/styles/runes/event.css +2 -23
  24. package/styles/runes/form.css +4 -1
  25. package/styles/runes/gallery.css +1 -0
  26. package/styles/runes/hint.css +3 -0
  27. package/styles/runes/lore.css +0 -10
  28. package/styles/runes/milestone.css +13 -5
  29. package/styles/runes/preview.css +5 -1
  30. package/styles/runes/testimonial.css +5 -2
  31. package/styles/runes/tint.css +59 -57
  32. package/tokens/base.css +48 -48
  33. package/tokens/dark.css +72 -72
  34. package/html/index.ts +0 -28
  35. package/svelte/elements.ts +0 -1
  36. package/svelte/index.ts +0 -37
  37. package/svelte/manifest.json +0 -17
  38. package/svelte/registry.ts +0 -2
  39. package/svelte/tokens.css +0 -6
package/styles/runes/codegroup.css CHANGED
@@ -25,10 +25,11 @@
25
25
  .rf-codegroup__dot:nth-child(1) { background: #ef4444; }
26
26
  .rf-codegroup__dot:nth-child(2) { background: #f59e0b; }
27
27
  .rf-codegroup__dot:nth-child(3) { background: #22c55e; }
28
- .rf-codegroup__title {
28
+ .rf-codegroup__title[data-section="title"] {
29
29
  margin-left: 0.5rem;
30
30
  font-family: var(--rf-font-mono);
31
31
  font-size: 0.8rem;
32
+ font-weight: normal;
32
33
  opacity: 0.7;
33
34
  }
34
35
  .rf-codegroup ul {
@@ -48,7 +49,7 @@
48
49
  padding: 0.5rem 1rem;
49
50
  font-size: 0.8rem;
50
51
  font-family: var(--rf-font-mono);
51
- color: rgba(255, 255, 255, 0.5);
52
+ color: rgba(255, 255, 255, 0.7);
52
53
  background: none;
53
54
  border: none;
54
55
  border-bottom: 2px solid transparent;
@@ -56,12 +57,20 @@
56
57
  transition: color 200ms ease, border-color 200ms ease;
57
58
  white-space: nowrap;
58
59
  }
59
- .rf-codegroup__tab:hover {
60
+ .rf-codegroup__tab:hover,
61
+ .rf-codegroup button[data-state="inactive"]:hover {
60
62
  color: rgba(255, 255, 255, 0.8);
61
63
  }
62
- .rf-codegroup__tab--active {
64
+ .rf-codegroup__tab--active,
65
+ .rf-codegroup button[data-state="active"] {
63
66
  color: rgba(255, 255, 255, 0.95);
64
- border-bottom-color: var(--rf-color-primary);
67
+ border-bottom-color: var(--rf-color-code-text);
68
+ }
69
+ .rf-codegroup button[data-state="inactive"] {
70
+ color: rgba(255, 255, 255, 0.7);
71
+ }
72
+ .rf-codegroup .rf-codeblock {
73
+ margin: 0;
65
74
  }
66
75
  .rf-codegroup pre {
67
76
  margin: 0;
package/styles/runes/design-context.css CHANGED
@@ -1,24 +1,21 @@
1
1
  /* Design Context — unified token card wrapper */
2
- .rf-design-context {
3
- border: 1px solid var(--rf-color-border, #e5e7eb);
4
- border-radius: 0.75rem;
5
- overflow: hidden;
6
- }
7
2
  .rf-design-context__title {
8
- font-size: 1.125rem;
9
- font-weight: 600;
10
- padding: 1rem 1.25rem;
11
- border-bottom: 1px solid var(--rf-color-border, #e5e7eb);
12
- background: var(--rf-color-bg-muted, #f9fafb);
3
+ font-size: 1.25rem;
4
+ font-weight: 700;
5
+ margin-bottom: 1rem;
13
6
  }
14
7
  .rf-design-context__sections {
15
8
  display: flex;
16
9
  flex-direction: column;
10
+ gap: 1.5rem;
17
11
  }
18
- .rf-design-context__sections > * {
19
- padding: 1.25rem;
20
- margin: 0;
21
- }
22
- .rf-design-context__sections > * + * {
23
- border-top: 1px dashed var(--rf-color-border, #e5e7eb);
12
+
13
+ /* Children inside design-context: remove card styling */
14
+ .rf-palette--in-design-context,
15
+ .rf-typography--in-design-context,
16
+ .rf-spacing--in-design-context,
17
+ .rf-swatch--in-design-context {
18
+ background: none;
19
+ border-radius: 0;
20
+ padding: 0;
24
21
  }
package/styles/runes/details.css CHANGED
@@ -1,18 +1,14 @@
1
1
  /* Details */
2
2
  .rf-details {
3
- border: 1px solid var(--rf-color-border);
4
- border-radius: var(--rf-radius-md);
5
- overflow: hidden;
6
3
  }
7
4
  .rf-details__summary {
8
5
  display: flex;
9
6
  align-items: center;
10
7
  gap: 0.5rem;
11
- padding: 0.75rem 1.25rem;
8
+ padding: 0.75rem 0;
12
9
  font-weight: 600;
13
10
  font-size: 0.925rem;
14
11
  cursor: pointer;
15
- background: var(--rf-color-surface);
16
12
  user-select: none;
17
13
  list-style: none;
18
14
  transition: background-color 200ms ease;
@@ -20,7 +16,7 @@
20
16
  .rf-details__summary::-webkit-details-marker { display: none; }
21
17
  .rf-details__summary::marker { display: none; content: ''; }
22
18
  .rf-details__summary:hover {
23
- background: var(--rf-color-surface-hover);
19
+ color: var(--rf-color-primary);
24
20
  }
25
21
  .rf-details__summary::after {
26
22
  content: '▸';
@@ -33,8 +29,7 @@
33
29
  transform: rotate(90deg);
34
30
  }
35
31
  .rf-details__body {
36
- padding: 1rem 1.25rem;
37
- border-top: 1px solid var(--rf-color-border);
32
+ padding: 0 0 1rem;
38
33
  font-size: 0.925rem;
39
34
  line-height: 1.65;
40
35
  }
package/styles/runes/diff.css CHANGED
@@ -2,12 +2,13 @@
2
2
  .rf-diff {
3
3
  border: 1px solid var(--rf-color-border);
4
4
  border-radius: var(--rf-radius-lg);
5
- overflow: hidden;
5
+ overflow-x: auto;
6
6
  font-size: 0.875rem;
7
7
  }
8
8
  .rf-diff__split-container {
9
9
  display: grid;
10
10
  grid-template-columns: 1fr 1fr;
11
+ min-width: 40rem;
11
12
  }
12
13
  .rf-diff__split-container .rf-diff__panel:first-child {
13
14
  border-right: 1px solid var(--rf-color-border);
@@ -29,7 +30,7 @@
29
30
  }
30
31
  .rf-diff__code {
31
32
  margin: 0;
32
- padding: 0;
33
+ padding: var(--rf-spacing-sm) 0;
33
34
  border: none;
34
35
  border-radius: 0;
35
36
  background: var(--rf-color-code-bg);
package/styles/runes/event.css CHANGED
@@ -1,30 +1,9 @@
1
1
  /* Event */
2
- .rf-event__details {
2
+ .rf-event__meta {
3
3
  display: flex;
4
4
  flex-wrap: wrap;
5
5
  align-items: center;
6
- gap: 1.5rem;
7
- background: var(--rf-color-surface);
8
- border-radius: var(--rf-radius-md);
9
- padding: 0.75rem 1rem;
10
- }
11
- .rf-event__detail {
12
- display: block;
13
- }
14
- .rf-event__label {
15
- display: block;
16
- margin-bottom: 0.125rem;
17
- font-size: 0.75rem;
18
- font-weight: 400;
19
- text-transform: uppercase;
20
- letter-spacing: 0.05em;
21
- color: var(--rf-color-muted);
22
- opacity: 0.6;
23
- }
24
- .rf-event__value {
25
- font-size: 0.9375rem;
26
- font-weight: 500;
27
- color: var(--rf-color-text);
6
+ gap: 0.5rem;
28
7
  }
29
8
  .rf-event__register {
30
9
  display: inline-block;
package/styles/runes/form.css CHANGED
@@ -3,7 +3,7 @@
3
3
  display: flex;
4
4
  flex-direction: column;
5
5
  gap: 1.25rem;
6
- max-width: 36rem;
6
+ max-width: none;
7
7
  }
8
8
  .rf-form__body {
9
9
  display: flex;
@@ -30,6 +30,9 @@
30
30
  flex: 1;
31
31
  min-width: 10rem;
32
32
  }
33
+ .rf-form--inline .rf-form__submit {
34
+ align-self: flex-end;
35
+ }
33
36
  /* Compact variant */
34
37
  .rf-form--compact {
35
38
  gap: 0.75rem;
package/styles/runes/gallery.css CHANGED
@@ -20,6 +20,7 @@
20
20
  position: relative;
21
21
  overflow: hidden;
22
22
  border-radius: var(--rf-radius-md);
23
+ margin: 0;
23
24
  }
24
25
  .rf-gallery__item img {
25
26
  width: 100%;
package/styles/runes/hint.css CHANGED
@@ -7,6 +7,9 @@
7
7
  border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
8
8
  background: var(--hint-bg);
9
9
  }
10
+ .rf-hint__header {
11
+ margin-bottom: 0.375rem;
12
+ }
10
13
  .rf-hint__icon {
11
14
  display: flex;
12
15
  align-items: center;
package/styles/runes/lore.css CHANGED
@@ -12,17 +12,7 @@
12
12
  padding-left: 1.5rem;
13
13
  }
14
14
  .rf-lore__content blockquote {
15
- border-left: 2px solid var(--rf-color-primary);
16
- background: var(--rf-color-surface);
17
- border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
18
- padding: 0.75rem 1.25rem;
19
- margin: 1rem 0;
20
15
  font-style: italic;
21
- color: var(--rf-color-muted);
22
- line-height: 1.6;
23
- }
24
- .rf-lore__content blockquote p {
25
- margin: 0;
26
16
  }
27
17
  .rf-lore > span[property="title"] {
28
18
  display: block;
package/styles/runes/milestone.css CHANGED
@@ -78,18 +78,26 @@
78
78
  /* Aggregate progress */
79
79
  .rf-milestone__progress {
80
80
  display: flex;
81
- align-items: center;
82
- gap: 0.625rem;
81
+ flex-direction: column;
83
82
  margin-bottom: 1rem;
84
83
  }
84
+ .rf-milestone__progress-header {
85
+ display: flex;
86
+ justify-content: space-between;
87
+ align-items: baseline;
88
+ margin-bottom: 0.375rem;
89
+ }
85
90
  .rf-milestone__progress-label {
86
91
  font-size: 0.75rem;
87
92
  font-weight: 600;
88
93
  color: var(--rf-color-muted);
89
- white-space: nowrap;
94
+ }
95
+ .rf-milestone__progress-count {
96
+ font-size: 0.75rem;
97
+ font-weight: 600;
98
+ color: var(--rf-color-muted);
90
99
  }
91
100
  .rf-milestone__progress-bar {
92
- flex: 1;
93
101
  height: 0.375rem;
94
102
  border-radius: var(--rf-radius-sm);
95
103
  background: var(--rf-color-surface-active);
@@ -100,7 +108,7 @@
100
108
  display: block;
101
109
  height: 100%;
102
110
  width: var(--rf-progress, 0%);
103
- background: var(--rf-color-success);
111
+ background: var(--rf-color-primary);
104
112
  border-radius: var(--rf-radius-sm);
105
113
  transition: width 0.3s ease;
106
114
  }
package/styles/runes/preview.css CHANGED
@@ -84,6 +84,9 @@
84
84
  .rf-preview__canvas > *:last-child {
85
85
  margin-bottom: 0;
86
86
  }
87
+ .rf-preview__canvas > [data-rune] + [data-rune] {
88
+ margin-top: 0.75rem;
89
+ }
87
90
 
88
91
  /* Viewport simulation toggle pill */
89
92
  .rf-preview__viewport-toggle {
@@ -118,7 +121,6 @@
118
121
 
119
122
  /* Source code view — bordered frame matching the canvas */
120
123
  .rf-preview__source {
121
- overflow: hidden;
122
124
  border: 1px solid var(--rf-color-border);
123
125
  border-radius: var(--rf-radius-lg);
124
126
  }
@@ -169,6 +171,8 @@
169
171
  }
170
172
  .rf-preview__source {
171
173
  border-radius: 0;
174
+ border-left: none;
175
+ border-right: none;
172
176
  }
173
177
  /* Break out of feature's padding-inline to reach viewport edges */
174
178
  .rf-preview--in-feature {
package/styles/runes/testimonial.css CHANGED
@@ -14,6 +14,9 @@
14
14
  color: var(--rf-color-border);
15
15
  line-height: 1;
16
16
  }
17
+ .rf-testimonial__star::before {
18
+ content: '★';
19
+ }
17
20
  .rf-testimonial__star[data-filled="true"] {
18
21
  color: var(--rf-color-warning);
19
22
  }
@@ -37,14 +40,14 @@
37
40
  .rf-testimonial blockquote p {
38
41
  margin: 0;
39
42
  }
40
- .rf-testimonial span[property="authorName"] {
43
+ .rf-testimonial__author-name {
41
44
  display: block;
42
45
  font-weight: 700;
43
46
  font-style: normal;
44
47
  font-size: 0.925rem;
45
48
  color: var(--rf-color-text);
46
49
  }
47
- .rf-testimonial span[property="authorRole"] {
50
+ .rf-testimonial__author-role {
48
51
  display: block;
49
52
  margin-top: 0.125rem;
50
53
  font-size: 0.85rem;
package/styles/runes/tint.css CHANGED
@@ -11,37 +11,37 @@
11
11
  /* ── 0. Token registration ────────────────────────────────────────────────
12
12
  * @property makes guaranteed-invalid fall back to the inherited value
13
13
  * (inherits: true) rather than propagating as invalid through children.
14
- * initial-value matches the light-mode defaults from tokens/base.css. */
14
+ * initial-value must match the light-mode defaults in tokens/base.css. */
15
15
 
16
16
  @property --rf-color-bg {
17
17
  syntax: '<color>';
18
18
  inherits: true;
19
- initial-value: #ffffff;
19
+ initial-value: #faf5eb;
20
20
  }
21
21
  @property --rf-color-surface {
22
22
  syntax: '<color>';
23
23
  inherits: true;
24
- initial-value: #f8fafc;
24
+ initial-value: #fffbf2;
25
25
  }
26
26
  @property --rf-color-text {
27
27
  syntax: '<color>';
28
28
  inherits: true;
29
- initial-value: #1a1a2e;
29
+ initial-value: #1d3557;
30
30
  }
31
31
  @property --rf-color-muted {
32
32
  syntax: '<color>';
33
33
  inherits: true;
34
- initial-value: #64748b;
34
+ initial-value: #5a7a90;
35
35
  }
36
36
  @property --rf-color-primary {
37
37
  syntax: '<color>';
38
38
  inherits: true;
39
- initial-value: #0ea5e9;
39
+ initial-value: #457b9d;
40
40
  }
41
41
  @property --rf-color-border {
42
42
  syntax: '<color>';
43
43
  inherits: true;
44
- initial-value: #e2e8f0;
44
+ initial-value: #d8e4de;
45
45
  }
46
46
 
47
47
  /* ── 1. Colour scheme override ──────────────────────────────────────────────
@@ -49,17 +49,18 @@
49
49
  * tokens are also exposed as --cs-* intermediaries so compound selectors
50
50
  * in step 4 can fall back to them without a cycle. */
51
51
 
52
+ /* Keep in sync with tokens/dark.css */
52
53
  [data-color-scheme="dark"] {
53
54
  color-scheme: dark;
54
55
  color: var(--rf-color-text);
55
56
  background-color: var(--rf-color-bg);
56
57
 
57
- --cs-bg: #0c1222;
58
- --cs-surface: #0f172a;
59
- --cs-text: #e2e8f0;
60
- --cs-muted: #94a3b8;
61
- --cs-accent: #38bdf8;
62
- --cs-border: rgba(255, 255, 255, 0.1);
58
+ --cs-bg: #152238;
59
+ --cs-surface: #1a2940;
60
+ --cs-text: #f1faee;
61
+ --cs-muted: #a8dadc;
62
+ --cs-accent: #70b4c0;
63
+ --cs-border: rgba(168, 218, 220, 0.15);
63
64
 
64
65
  --rf-color-bg: var(--cs-bg);
65
66
  --rf-color-surface: var(--cs-surface);
@@ -68,27 +69,27 @@
68
69
  --rf-color-primary: var(--cs-accent);
69
70
  --rf-color-border: var(--cs-border);
70
71
 
71
- --rf-color-primary-hover: #7dd3fc;
72
- --rf-color-surface-hover: #1e293b;
73
- --rf-color-surface-active: #334155;
74
- --rf-color-surface-raised: #1e293b;
75
-
76
- --rf-color-info: #60a5fa;
77
- --rf-color-info-bg: rgba(59, 130, 246, 0.1);
78
- --rf-color-info-border: rgba(59, 130, 246, 0.3);
79
- --rf-color-warning: #fbbf24;
80
- --rf-color-warning-bg: rgba(245, 158, 11, 0.1);
81
- --rf-color-warning-border: rgba(245, 158, 11, 0.3);
82
- --rf-color-danger: #f87171;
83
- --rf-color-danger-bg: rgba(239, 68, 68, 0.1);
84
- --rf-color-danger-border: rgba(239, 68, 68, 0.3);
85
- --rf-color-success: #34d399;
86
- --rf-color-success-bg: rgba(16, 185, 129, 0.1);
87
- --rf-color-success-border: rgba(16, 185, 129, 0.3);
88
-
89
- --rf-color-code-bg: #0f172a;
90
- --rf-color-code-text: #e2e8f0;
91
- --rf-color-inline-code-bg: rgba(255, 255, 255, 0.08);
72
+ --rf-color-primary-hover: #a8dadc;
73
+ --rf-color-surface-hover: #203048;
74
+ --rf-color-surface-active: #263850;
75
+ --rf-color-surface-raised: #1a2940;
76
+
77
+ --rf-color-info: #a8dadc;
78
+ --rf-color-info-bg: rgba(69, 123, 157, 0.12);
79
+ --rf-color-info-border: rgba(69, 123, 157, 0.3);
80
+ --rf-color-warning: #e8c07a;
81
+ --rf-color-warning-bg: rgba(200, 144, 10, 0.12);
82
+ --rf-color-warning-border: rgba(200, 144, 10, 0.3);
83
+ --rf-color-danger: #f07078;
84
+ --rf-color-danger-bg: rgba(230, 57, 70, 0.12);
85
+ --rf-color-danger-border: rgba(230, 57, 70, 0.3);
86
+ --rf-color-success: #72c098;
87
+ --rf-color-success-bg: rgba(61, 143, 101, 0.12);
88
+ --rf-color-success-border: rgba(61, 143, 101, 0.3);
89
+
90
+ --rf-color-code-bg: #152238;
91
+ --rf-color-code-text: #f1faee;
92
+ --rf-color-inline-code-bg: rgba(168, 218, 220, 0.08);
92
93
 
93
94
  --rf-shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
94
95
  --rf-shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
@@ -96,17 +97,18 @@
96
97
  --rf-shadow-lg: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
97
98
  }
98
99
 
100
+ /* Keep in sync with tokens/base.css */
99
101
  [data-color-scheme="light"] {
100
102
  color-scheme: light;
101
103
  color: var(--rf-color-text);
102
104
  background-color: var(--rf-color-bg);
103
105
 
104
- --cs-bg: #ffffff;
105
- --cs-surface: #f8fafc;
106
- --cs-text: #1a1a2e;
107
- --cs-muted: #64748b;
108
- --cs-accent: #0ea5e9;
109
- --cs-border: #e2e8f0;
106
+ --cs-bg: #faf5eb;
107
+ --cs-surface: #fffbf2;
108
+ --cs-text: #1d3557;
109
+ --cs-muted: #5a7a90;
110
+ --cs-accent: #457b9d;
111
+ --cs-border: #d8e4de;
110
112
 
111
113
  --rf-color-bg: var(--cs-bg);
112
114
  --rf-color-surface: var(--cs-surface);
@@ -115,25 +117,25 @@
115
117
  --rf-color-primary: var(--cs-accent);
116
118
  --rf-color-border: var(--cs-border);
117
119
 
118
- --rf-color-primary-hover: #0284c7;
119
- --rf-color-surface-hover: #f1f5f9;
120
- --rf-color-surface-active: #e2e8f0;
120
+ --rf-color-primary-hover: #376585;
121
+ --rf-color-surface-hover: #fdf0d5;
122
+ --rf-color-surface-active: #f9ebcc;
121
123
  --rf-color-surface-raised: #ffffff;
122
124
 
123
- --rf-color-info: #3b82f6;
124
- --rf-color-info-bg: #eff6ff;
125
- --rf-color-info-border: #bfdbfe;
126
- --rf-color-warning: #f59e0b;
127
- --rf-color-warning-bg: #fffbeb;
128
- --rf-color-warning-border: #fde68a;
129
- --rf-color-danger: #ef4444;
130
- --rf-color-danger-bg: #fef2f2;
131
- --rf-color-danger-border: #fecaca;
132
- --rf-color-success: #10b981;
133
- --rf-color-success-bg: #ecfdf5;
134
- --rf-color-success-border: #a7f3d0;
135
-
136
- --rf-color-inline-code-bg: #f1f5f9;
125
+ --rf-color-info: #457b9d;
126
+ --rf-color-info-bg: #edf4f8;
127
+ --rf-color-info-border: #a8dadc;
128
+ --rf-color-warning: #c8900a;
129
+ --rf-color-warning-bg: #fdf5e4;
130
+ --rf-color-warning-border: #edd49a;
131
+ --rf-color-danger: #e63946;
132
+ --rf-color-danger-bg: #fdeced;
133
+ --rf-color-danger-border: #f0b0b5;
134
+ --rf-color-success: #3d8f65;
135
+ --rf-color-success-bg: #ecf5ef;
136
+ --rf-color-success-border: #a8d4b8;
137
+
138
+ --rf-color-inline-code-bg: #f9ebcc;
137
139
 
138
140
  --rf-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
139
141
  --rf-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
package/tokens/base.css CHANGED
@@ -5,46 +5,46 @@
5
5
  --rf-font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
6
6
  --rf-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
7
7
 
8
- /* Primary scale (sky-blue) */
9
- --rf-color-primary-50: #f0f9ff;
10
- --rf-color-primary-100: #e0f2fe;
11
- --rf-color-primary-200: #bae6fd;
12
- --rf-color-primary-300: #7dd3fc;
13
- --rf-color-primary-400: #38bdf8;
14
- --rf-color-primary-500: #0ea5e9;
15
- --rf-color-primary-600: #0284c7;
16
- --rf-color-primary-700: #0369a1;
17
- --rf-color-primary-800: #075985;
18
- --rf-color-primary-900: #0c4a6e;
19
- --rf-color-primary-950: #082f49;
8
+ /* Primary scale (cerulean → frosted blue) */
9
+ --rf-color-primary-50: #f0f6f9;
10
+ --rf-color-primary-100: #dcebf0;
11
+ --rf-color-primary-200: #b8d6e2;
12
+ --rf-color-primary-300: #a8dadc;
13
+ --rf-color-primary-400: #70b4c0;
14
+ --rf-color-primary-500: #457b9d;
15
+ --rf-color-primary-600: #376585;
16
+ --rf-color-primary-700: #1d3557;
17
+ --rf-color-primary-800: #182c4a;
18
+ --rf-color-primary-900: #12213a;
19
+ --rf-color-primary-950: #0c162a;
20
20
 
21
21
  /* Core palette */
22
- --rf-color-text: #1a1a2e;
23
- --rf-color-muted: #64748b;
24
- --rf-color-border: #e2e8f0;
25
- --rf-color-bg: #ffffff;
26
- --rf-color-primary: var(--rf-color-primary-500);
27
- --rf-color-primary-hover: var(--rf-color-primary-600);
22
+ --rf-color-text: #1d3557;
23
+ --rf-color-muted: #5a7a90;
24
+ --rf-color-border: #d8e4de;
25
+ --rf-color-bg: #faf5eb;
26
+ --rf-color-primary: #457b9d;
27
+ --rf-color-primary-hover: #376585;
28
28
 
29
- /* Surfaces */
30
- --rf-color-surface: #f8fafc;
31
- --rf-color-surface-hover: #f1f5f9;
32
- --rf-color-surface-active: #e2e8f0;
29
+ /* Surfaces — lighter than background */
30
+ --rf-color-surface: #fffbf2;
31
+ --rf-color-surface-hover: #fdf0d5;
32
+ --rf-color-surface-active: #f9ebcc;
33
33
  --rf-color-surface-raised: #ffffff;
34
34
 
35
35
  /* Semantic */
36
- --rf-color-info: #3b82f6;
37
- --rf-color-info-bg: #eff6ff;
38
- --rf-color-info-border: #bfdbfe;
39
- --rf-color-warning: #f59e0b;
40
- --rf-color-warning-bg: #fffbeb;
41
- --rf-color-warning-border: #fde68a;
42
- --rf-color-danger: #ef4444;
43
- --rf-color-danger-bg: #fef2f2;
44
- --rf-color-danger-border: #fecaca;
45
- --rf-color-success: #10b981;
46
- --rf-color-success-bg: #ecfdf5;
47
- --rf-color-success-border: #a7f3d0;
36
+ --rf-color-info: #457b9d;
37
+ --rf-color-info-bg: #edf4f8;
38
+ --rf-color-info-border: #a8dadc;
39
+ --rf-color-warning: #c8900a;
40
+ --rf-color-warning-bg: #fdf5e4;
41
+ --rf-color-warning-border: #edd49a;
42
+ --rf-color-danger: #e63946;
43
+ --rf-color-danger-bg: #fdeced;
44
+ --rf-color-danger-border: #f0b0b5;
45
+ --rf-color-success: #3d8f65;
46
+ --rf-color-success-bg: #ecf5ef;
47
+ --rf-color-success-border: #a8d4b8;
48
48
 
49
49
  /* Radii */
50
50
  --rf-radius-sm: 6px;
@@ -79,20 +79,20 @@
79
79
  --rf-shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
80
80
 
81
81
  /* Code block */
82
- --rf-color-code-bg: #0f172a;
83
- --rf-color-code-text: #e2e8f0;
84
- --rf-color-inline-code-bg: #f1f5f9;
82
+ --rf-color-code-bg: #1d3557;
83
+ --rf-color-code-text: #f1faee;
84
+ --rf-color-inline-code-bg: #f9ebcc;
85
85
 
86
86
  /* Syntax highlighting (Shiki CSS variables) */
87
- --shiki-foreground: var(--rf-color-code-text);
88
- --shiki-background: var(--rf-color-code-bg);
89
- --shiki-token-keyword: #c792ea;
90
- --shiki-token-string: #c3e88d;
91
- --shiki-token-string-expression: #c3e88d;
92
- --shiki-token-constant: #f78c6c;
93
- --shiki-token-comment: #637777;
94
- --shiki-token-function: #82aaff;
95
- --shiki-token-parameter: #d6deeb;
96
- --shiki-token-punctuation: #89ddff;
97
- --shiki-token-link: #82aaff;
87
+ --shiki-foreground: #f1faee;
88
+ --shiki-background: #1d3557;
89
+ --shiki-token-keyword: #f2cc8f;
90
+ --shiki-token-string: #a8dadc;
91
+ --shiki-token-string-expression: #a8dadc;
92
+ --shiki-token-constant: #e8c07a;
93
+ --shiki-token-comment: #5a7a90;
94
+ --shiki-token-function: #70b4c0;
95
+ --shiki-token-parameter: #b8d6e2;
96
+ --shiki-token-punctuation: #a8dadc;
97
+ --shiki-token-link: #70b4c0;
98
98
  }