@conduction/docusaurus-preset 3.45.1 → 3.45.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 (11) hide show
  1. package/package.json +1 -1
  2. package/src/diagrams/cn-arch-flow.js +4 -4
  3. package/src/diagrams/cn-domain-tree.js +1 -1
  4. package/src/diagrams/cn-pair.js +4 -4
  5. package/src/diagrams/cn-pipeline.js +3 -3
  6. package/src/diagrams/cn-platform.js +12 -5
  7. package/src/diagrams/cn-side-box.js +4 -4
  8. package/static/lib/canal-footer.css +1 -1
  9. package/static/lib/hex-rain.css +8 -8
  10. package/static/lib/logo-memory.css +1 -1
  11. package/static/lib/platform-diagram.css +7 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/docusaurus-preset",
3
- "version": "3.45.1",
3
+ "version": "3.45.3",
4
4
  "scripts": {
5
5
  "prepack": "node scripts/prepack-bundle-css.js",
6
6
  "test": "node --test"
package/src/diagrams/cn-arch-flow.js CHANGED
@@ -87,7 +87,7 @@ class CnArchFlow extends HTMLElement {
87
87
  }
88
88
 
89
89
  .panel {
90
- background: var(--c-cobalt-50);
90
+ background: var(--conduction-color-surface-subtle);
91
91
  border: 1px solid var(--c-cobalt-100);
92
92
  border-radius: var(--radius-md);
93
93
  padding: var(--space-6);
@@ -101,7 +101,7 @@ class CnArchFlow extends HTMLElement {
101
101
  }
102
102
 
103
103
  .arrow {
104
- color: var(--c-cobalt-400);
104
+ color: var(--conduction-color-text-muted);
105
105
  font-size: 16px;
106
106
  flex-shrink: 0;
107
107
  }
@@ -111,10 +111,10 @@ class CnArchFlow extends HTMLElement {
111
111
  flex: 1 1 0;
112
112
  min-width: 80px;
113
113
  padding: var(--space-3) var(--space-2);
114
- background: white;
114
+ background: var(--conduction-color-surface-card);
115
115
  border: 1px solid var(--c-cobalt-200);
116
116
  border-radius: var(--radius-sm);
117
- color: var(--c-cobalt-800);
117
+ color: var(--conduction-color-text-strong);
118
118
  font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
119
119
  font-size: 11px;
120
120
  text-align: center;
package/src/diagrams/cn-domain-tree.js CHANGED
@@ -84,7 +84,7 @@ class CnDomainTree extends HTMLElement {
84
84
  ::slotted([slot="legend"]) {
85
85
  display: flex; align-items: center; gap: var(--space-2);
86
86
  font-size: 13px;
87
- color: var(--c-cobalt-700);
87
+ color: var(--conduction-color-text-body);
88
88
  }
89
89
  </style>
90
90
 
package/src/diagrams/cn-pair.js CHANGED
@@ -92,7 +92,7 @@ class CnPair extends HTMLElement {
92
92
  align-items: center;
93
93
  gap: var(--space-5);
94
94
  padding: var(--space-6);
95
- background: var(--c-cobalt-50);
95
+ background: var(--conduction-color-surface-subtle);
96
96
  border-radius: var(--radius-md);
97
97
  }
98
98
 
@@ -123,12 +123,12 @@ class CnPair extends HTMLElement {
123
123
  .label {
124
124
  font-size: 16px;
125
125
  font-weight: 600;
126
- color: var(--c-cobalt-900);
126
+ color: var(--conduction-color-text-strong);
127
127
  }
128
128
  .caption {
129
129
  font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
130
130
  font-size: 11px;
131
- color: var(--c-cobalt-400);
131
+ color: var(--conduction-color-text-muted);
132
132
  letter-spacing: 0.06em;
133
133
  }
134
134
  .caption:empty { display: none; }
@@ -136,7 +136,7 @@ class CnPair extends HTMLElement {
136
136
  .bridge {
137
137
  font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
138
138
  font-size: 12px;
139
- color: var(--c-cobalt-700);
139
+ color: var(--conduction-color-text-body);
140
140
  letter-spacing: 0.05em;
141
141
  text-align: center;
142
142
  max-width: 160px;
package/src/diagrams/cn-pipeline.js CHANGED
@@ -90,7 +90,7 @@ class CnPipeline extends HTMLElement {
90
90
  }
91
91
 
92
92
  .stage {
93
- background: var(--c-cobalt-50);
93
+ background: var(--conduction-color-surface-subtle);
94
94
  border-radius: var(--radius-lg);
95
95
  padding: var(--space-9) var(--space-7);
96
96
  overflow-x: auto;
@@ -117,14 +117,14 @@ class CnPipeline extends HTMLElement {
117
117
  font-size: 11px;
118
118
  letter-spacing: 0.08em;
119
119
  text-transform: uppercase;
120
- color: var(--c-cobalt-400);
120
+ color: var(--conduction-color-text-muted);
121
121
  text-align: center;
122
122
  }
123
123
  ::slotted([slot="caption"]) {
124
124
  font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
125
125
  font-size: 11px;
126
126
  letter-spacing: 0.08em;
127
- color: var(--c-cobalt-400);
127
+ color: var(--conduction-color-text-muted);
128
128
  }
129
129
 
130
130
  @media (max-width: 700px) {
package/src/diagrams/cn-platform.js CHANGED
@@ -38,11 +38,18 @@ class CnPlatform extends HTMLElement {
38
38
  const ground = this.hasAttribute('ground');
39
39
  const tone = this.getAttribute('tone') || 'cobalt-50';
40
40
 
41
+ /* Semantic surfaces, not raw palette steps, so the stage follows the
42
+ theme. The `tone` attribute still names the light-mode intent and
43
+ each branch resolves to the same colour it always did on a white
44
+ ground; only dark mode changes. A raw `var(--c-cobalt-50)` here
45
+ stayed pale in dark mode while the legend text on it went light,
46
+ which is how the caption on the spec-driven-development post ended
47
+ up at 1.15:1. */
41
48
  const stageBg = tone === 'white'
42
- ? 'white'
49
+ ? 'var(--conduction-color-surface-card)'
43
50
  : tone === 'light'
44
- ? 'var(--c-cobalt-100)'
45
- : 'var(--c-cobalt-50)';
51
+ ? 'var(--conduction-color-surface-sunken)'
52
+ : 'var(--conduction-color-surface-subtle)';
46
53
 
47
54
  this.shadowRoot.innerHTML = `
48
55
  <style>
@@ -109,14 +116,14 @@ class CnPlatform extends HTMLElement {
109
116
  font-size: 11px;
110
117
  letter-spacing: 0.08em;
111
118
  text-transform: uppercase;
112
- color: var(--c-cobalt-400);
119
+ color: var(--conduction-color-text-muted);
113
120
  text-align: center;
114
121
  }
115
122
  ::slotted([slot="caption"]) {
116
123
  font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
117
124
  font-size: 11px;
118
125
  letter-spacing: 0.08em;
119
- color: var(--c-cobalt-400);
126
+ color: var(--conduction-color-text-muted);
120
127
  }
121
128
 
122
129
  @media (max-width: 700px) {
package/src/diagrams/cn-side-box.js CHANGED
@@ -45,7 +45,7 @@ class CnSideBox extends HTMLElement {
45
45
  :host {
46
46
  display: inline-block;
47
47
  width: ${widthPx};
48
- background: white;
48
+ background: var(--conduction-color-surface-card);
49
49
  border: 1px solid var(--c-cobalt-200);
50
50
  border-radius: var(--radius-md);
51
51
  padding: ${compact ? '10px 10px 12px' : '14px 14px 16px'};
@@ -57,7 +57,7 @@ class CnSideBox extends HTMLElement {
57
57
  font-size: 10px;
58
58
  letter-spacing: 0.16em;
59
59
  text-transform: uppercase;
60
- color: var(--c-cobalt-400);
60
+ color: var(--conduction-color-text-muted);
61
61
  margin-bottom: ${compact ? '8px' : '12px'};
62
62
  }
63
63
  .chip:empty { display: none; }
@@ -69,7 +69,7 @@ class CnSideBox extends HTMLElement {
69
69
  align-items: center;
70
70
  padding: ${compact ? '4px 0' : '6px 0'};
71
71
  font-size: ${compact ? '12px' : '13px'};
72
- color: var(--c-cobalt-700);
72
+ color: var(--conduction-color-text-body);
73
73
  }
74
74
 
75
75
  ::slotted([slot="footer"]) {
@@ -78,7 +78,7 @@ class CnSideBox extends HTMLElement {
78
78
  border-top: 1px dashed var(--c-cobalt-200);
79
79
  font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
80
80
  font-size: 11px;
81
- color: var(--c-cobalt-400);
81
+ color: var(--conduction-color-text-muted);
82
82
  text-align: center;
83
83
  display: block;
84
84
  }
package/static/lib/canal-footer.css CHANGED
@@ -406,7 +406,7 @@
406
406
  letter-spacing: 0.12em;
407
407
  text-transform: uppercase;
408
408
  background: var(--c-orange-knvb);
409
- color: var(--c-cobalt-900);
409
+ color: var(--conduction-color-text-strong);
410
410
  border: 0;
411
411
  border-radius: 4px;
412
412
  padding: 7px 14px;
package/static/lib/hex-rain.css CHANGED
@@ -58,7 +58,7 @@
58
58
  z-index: 2;
59
59
  pointer-events: none;
60
60
  font-family: var(--conduction-typography-font-family-code);
61
- color: var(--c-cobalt-900);
61
+ color: var(--conduction-color-text-strong);
62
62
  background: rgba(255, 255, 255, 0.94);
63
63
  backdrop-filter: blur(4px);
64
64
  border-radius: var(--radius-lg);
@@ -80,20 +80,20 @@
80
80
  letter-spacing: -0.02em;
81
81
  line-height: 1;
82
82
  font-variant-numeric: tabular-nums;
83
- color: var(--c-cobalt-900);
83
+ color: var(--conduction-color-text-strong);
84
84
  }
85
85
  .hex-rain .rain-hud .hud-label {
86
86
  display: block;
87
87
  font-size: 9px;
88
88
  letter-spacing: 0.16em;
89
89
  text-transform: uppercase;
90
- color: var(--c-cobalt-400);
90
+ color: var(--conduction-color-text-muted);
91
91
  margin-top: 4px;
92
92
  }
93
93
  .hex-rain .rain-hud .hud-block.hud-tick .hud-num { animation: rain-tick 420ms ease; }
94
94
  .hex-rain .rain-hud .hud-block.hud-untick .hud-num { animation: rain-untick 420ms ease; }
95
- @keyframes rain-tick { 0% { transform: scale(1); color: var(--c-cobalt-900); } 35% { transform: scale(1.4); color: var(--c-orange-knvb); } 100% { transform: scale(1); color: var(--c-cobalt-900); } }
96
- @keyframes rain-untick { 0% { transform: scale(1); color: var(--c-cobalt-900); } 35% { transform: scale(0.85); color: #d64633; } 100% { transform: scale(1); color: var(--c-cobalt-900); } }
95
+ @keyframes rain-tick { 0% { transform: scale(1); color: var(--conduction-color-text-strong); } 35% { transform: scale(1.4); color: var(--c-orange-knvb); } 100% { transform: scale(1); color: var(--conduction-color-text-strong); } }
96
+ @keyframes rain-untick { 0% { transform: scale(1); color: var(--conduction-color-text-strong); } 35% { transform: scale(0.85); color: #d64633; } 100% { transform: scale(1); color: var(--conduction-color-text-strong); } }
97
97
  .hex-rain .rain-hud .hud-timer.urgent .hud-num {
98
98
  color: #d64633;
99
99
  animation: rain-pulse 800ms ease infinite;
@@ -105,14 +105,14 @@
105
105
  .hex-rain .rain-hud .hud-icon {
106
106
  width: 22px; height: 26px;
107
107
  clip-path: var(--hex-pointy-top);
108
- background: var(--c-cobalt-100);
108
+ background: var(--conduction-color-surface-sunken);
109
109
  display: inline-flex; align-items: center; justify-content: center;
110
- color: var(--c-cobalt-400);
110
+ color: var(--conduction-color-text-muted);
111
111
  transition: background 220ms, color 220ms;
112
112
  }
113
113
  .hex-rain .rain-hud .hud-icon.collected {
114
114
  background: var(--c-orange-knvb);
115
- color: var(--c-cobalt-900);
115
+ color: var(--conduction-color-text-strong);
116
116
  }
117
117
  .hex-rain .rain-hud .hud-icon.collected.just { animation: rain-icon-pop 380ms ease; }
118
118
  @keyframes rain-icon-pop {
package/static/lib/logo-memory.css CHANGED
@@ -172,7 +172,7 @@
172
172
  height: 36px;
173
173
  border-radius: 50%;
174
174
  border: 1px solid var(--c-cobalt-900, #0A172F);
175
- background: white;
175
+ background: var(--conduction-color-surface-card);
176
176
  color: var(--c-cobalt-900, #0A172F);
177
177
  font-size: 22px;
178
178
  line-height: 1;
package/static/lib/platform-diagram.css CHANGED
@@ -105,7 +105,7 @@ platform-diagram .box-wrap:hover { z-index: 20; }
105
105
 
106
106
  /* ---- List-box ---- */
107
107
  platform-diagram .box {
108
- background: white;
108
+ background: var(--conduction-color-surface-card);
109
109
  border: 1px solid var(--c-cobalt-200);
110
110
  border-radius: var(--radius-md);
111
111
  padding: 18px 20px;
@@ -127,7 +127,7 @@ platform-diagram .row {
127
127
  margin: 0;
128
128
  box-sizing: border-box;
129
129
  padding: 6px 0;
130
- font-size: 13px; color: var(--c-cobalt-700);
130
+ font-size: 13px; color: var(--conduction-color-text-body);
131
131
  cursor: default;
132
132
  flex-wrap: nowrap;
133
133
  position: relative;
@@ -161,10 +161,10 @@ platform-diagram .row .name { font-weight: 500; transition: color 140ms ease; }
161
161
  platform-diagram .row .meta {
162
162
  margin-left: auto;
163
163
  font-family: var(--conduction-typography-font-family-code);
164
- font-size: 10px; color: var(--c-cobalt-400);
164
+ font-size: 10px; color: var(--conduction-color-text-muted);
165
165
  letter-spacing: 0.06em; text-transform: uppercase;
166
166
  }
167
- platform-diagram .row:hover .name { color: var(--c-blue-cobalt); }
167
+ platform-diagram .row:hover .name { color: var(--conduction-color-text-default); }
168
168
 
169
169
  /* App description: absolute-positioned tooltip below the row, so hover
170
170
  doesn't change the box's height (keeps neighbouring components still). */
@@ -415,12 +415,12 @@ platform-diagram .box-wrap.app-builder {
415
415
  set the cluster styles like every other list — OpenBuild is a real app. */
416
416
  platform-diagram .box-wrap.app-builder.has-badge .box {
417
417
  border-style: dashed;
418
- background: var(--c-cobalt-50);
418
+ background: var(--conduction-color-surface-subtle);
419
419
  opacity: 0.92;
420
420
  }
421
- platform-diagram .box-wrap.app-builder.has-badge .row { color: var(--c-cobalt-400); font-style: italic; }
421
+ platform-diagram .box-wrap.app-builder.has-badge .row { color: var(--conduction-color-text-muted); font-style: italic; }
422
422
  platform-diagram .box-wrap.app-builder.has-badge .row .desc { font-style: normal; }
423
- platform-diagram .box-wrap.app-builder.has-badge .row:hover .name { color: var(--c-cobalt-700); }
423
+ platform-diagram .box-wrap.app-builder.has-badge .row:hover .name { color: var(--conduction-color-text-body); }
424
424
 
425
425
  /* Badge (e.g. COMING SOON) — generic, attaches to any .box-wrap */
426
426
  platform-diagram .box-wrap .badge {