@conduction/docusaurus-preset 3.44.2 → 3.44.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 (86) hide show
  1. package/package.json +1 -1
  2. package/src/components/AgentTrace/AgentTrace.module.css +1 -1
  3. package/src/components/AiDisclosure/AiDisclosure.module.css +2 -2
  4. package/src/components/AppCrossLinks/AppCrossLinks.module.css +9 -9
  5. package/src/components/AppMock/AppMock.module.css +46 -46
  6. package/src/components/AppsGrid/AppsGrid.module.css +4 -4
  7. package/src/components/AppsPreview/AppsPreview.module.css +7 -7
  8. package/src/components/AtomZones/AtomZones.module.css +19 -19
  9. package/src/components/BlueprintRush/BlueprintRush.module.css +13 -13
  10. package/src/components/BuildMock/BuildMock.module.css +11 -11
  11. package/src/components/Clients/Clients.module.css +4 -4
  12. package/src/components/ContentCard/ContentCard.module.css +13 -13
  13. package/src/components/ContentDetailHero/ContentDetailHero.module.css +6 -6
  14. package/src/components/ContentTypeFilter/ContentTypeFilter.module.css +5 -5
  15. package/src/components/CtaBanner/CtaBanner.module.css +1 -1
  16. package/src/components/DeadlineDefender/DeadlineDefender.module.css +14 -14
  17. package/src/components/DetailHero/DetailHero.module.css +11 -11
  18. package/src/components/DiceDuel/DiceDuel.module.css +16 -16
  19. package/src/components/DownloadPanel/DownloadPanel.module.css +4 -4
  20. package/src/components/EmployeeCard/EmployeeCard.module.css +19 -19
  21. package/src/components/ExternalAppShelf/ExternalAppShelf.module.css +5 -5
  22. package/src/components/FAQ/FAQ.module.css +4 -4
  23. package/src/components/FacetedFilters/FacetedFilters.module.css +10 -10
  24. package/src/components/FeatureGrid/FeatureGrid.module.css +8 -8
  25. package/src/components/FeatureList/FeatureList.module.css +4 -4
  26. package/src/components/FeaturedCard/FeaturedCard.module.css +3 -3
  27. package/src/components/FlowMock/FlowMock.module.css +2 -2
  28. package/src/components/GameModal/GameModal.module.css +32 -32
  29. package/src/components/Hero/Hero.module.css +4 -4
  30. package/src/components/HexBackground/HexBackground.module.css +3 -3
  31. package/src/components/HexCard/HexCard.module.css +4 -4
  32. package/src/components/HexNetwork/HexNetwork.module.css +6 -6
  33. package/src/components/HiddenGame/HiddenGame.module.css +2 -2
  34. package/src/components/HowSteps/HowSteps.module.css +3 -3
  35. package/src/components/IntegrationIcon/IntegrationIcon.module.css +1 -1
  36. package/src/components/KanbanMock/KanbanMock.module.css +8 -8
  37. package/src/components/LeafCard/LeafCard.module.css +15 -15
  38. package/src/components/LeafMock/LeafMock.module.css +8 -8
  39. package/src/components/LockPick/LockPick.module.css +14 -14
  40. package/src/components/ManagedCommonGround/ManagedCommonGround.module.css +1 -1
  41. package/src/components/McpToolShelf/McpToolShelf.module.css +8 -8
  42. package/src/components/MockScene/MockScene.module.css +1 -1
  43. package/src/components/ModuleCard/ModuleCard.module.css +11 -11
  44. package/src/components/ModulePage/ModulePage.module.css +9 -9
  45. package/src/components/MonsterRun/MonsterRun.module.css +12 -12
  46. package/src/components/NewsletterCta/NewsletterCta.module.css +9 -9
  47. package/src/components/NextSteps/NextSteps.module.css +9 -9
  48. package/src/components/Outcomes/Outcomes.module.css +5 -5
  49. package/src/components/PaintByTokens/PaintByTokens.module.css +15 -15
  50. package/src/components/PairCard/PairCard.module.css +3 -3
  51. package/src/components/PartnerCard/PartnerCard.module.css +21 -21
  52. package/src/components/PartnerDirectory/PartnerDirectory.module.css +1 -1
  53. package/src/components/PartnerSidecard/PartnerSidecard.module.css +9 -9
  54. package/src/components/PipeFit/PipeFit.module.css +10 -10
  55. package/src/components/Pipeline/Pipeline.module.css +7 -7
  56. package/src/components/PlatformOverview/PlatformOverview.module.css +4 -4
  57. package/src/components/Prerequisites/Prerequisites.module.css +5 -5
  58. package/src/components/PullQuote/PullQuote.module.css +5 -5
  59. package/src/components/Reconcile/Reconcile.module.css +15 -15
  60. package/src/components/RecordRun/RecordRun.module.css +16 -16
  61. package/src/components/Redaction/Redaction.module.css +13 -13
  62. package/src/components/ReferenceCard/ReferenceCard.module.css +7 -7
  63. package/src/components/RelatedPosts/RelatedPosts.module.css +1 -1
  64. package/src/components/RotatingCards/RotatingCards.module.css +8 -8
  65. package/src/components/SetupSteps/SetupSteps.module.css +6 -6
  66. package/src/components/Showcase/Showcase.module.css +12 -12
  67. package/src/components/SidebarMock/SidebarMock.module.css +2 -2
  68. package/src/components/SolutionCard/SolutionCard.module.css +5 -5
  69. package/src/components/StampRush/StampRush.module.css +12 -12
  70. package/src/components/StatsStrip/StatsStrip.module.css +3 -3
  71. package/src/components/ThemeSeamMock/ThemeSeamMock.module.css +1 -1
  72. package/src/components/Troubleshooting/Troubleshooting.module.css +7 -7
  73. package/src/components/WidgetMock/WidgetMock.module.css +1 -1
  74. package/src/components/WidgetShelf/WidgetShelf.module.css +11 -11
  75. package/src/components/primitives/AuthorByline.module.css +5 -5
  76. package/src/components/primitives/Button.module.css +8 -8
  77. package/src/components/primitives/Card.module.css +3 -3
  78. package/src/components/primitives/Eyebrow.module.css +1 -1
  79. package/src/components/primitives/HexThumbnail.module.css +1 -1
  80. package/src/components/primitives/Pill.module.css +2 -2
  81. package/src/components/primitives/Section.module.css +2 -2
  82. package/src/components/primitives/SectionHead.module.css +2 -2
  83. package/src/css/brand.css +17 -17
  84. package/src/css/tokens.css +60 -0
  85. package/src/theme/ErrorPageContent/styles.module.css +9 -9
  86. package/src/theme/Navbar/styles.module.css +17 -17
@@ -65,10 +65,10 @@
65
65
  font-size: 12px;
66
66
  letter-spacing: 0.04em;
67
67
  text-transform: uppercase;
68
- color: var(--c-cobalt-400);
68
+ color: var(--conduction-color-text-muted);
69
69
  margin-bottom: 24px;
70
70
  }
71
- .crumb a { color: var(--c-cobalt-400); text-decoration: none; }
71
+ .crumb a { color: var(--conduction-color-text-muted); text-decoration: none; }
72
72
  .crumb a:hover { color: var(--c-orange-knvb); }
73
73
  .sep { margin: 0 8px; color: var(--c-cobalt-200); }
74
74
 
@@ -110,16 +110,16 @@
110
110
  font-size: 11px;
111
111
  letter-spacing: 0.08em;
112
112
  text-transform: uppercase;
113
- color: var(--c-cobalt-700);
113
+ color: var(--conduction-color-text-body);
114
114
  }
115
- .versionBadge { color: var(--c-cobalt-400); }
115
+ .versionBadge { color: var(--conduction-color-text-muted); }
116
116
 
117
117
  /* Meta-row chip. Shared by the downloads counter and the "View on
118
118
  GitHub" link; both are usually <a> elements pointing at the app's
119
119
  repository, so the chip carries link resets + a hover state. */
120
120
  .downloadsBadge {
121
- color: var(--c-blue-cobalt);
122
- background: var(--c-cobalt-50);
121
+ color: var(--conduction-color-text-default);
122
+ background: var(--conduction-color-surface-subtle);
123
123
  border: 1px solid var(--c-cobalt-100);
124
124
  border-radius: var(--radius-sm);
125
125
  padding: 4px 10px;
@@ -128,8 +128,8 @@
128
128
  transition: background 120ms ease, border-color 120ms ease;
129
129
  }
130
130
  a.downloadsBadge:hover {
131
- color: var(--c-blue-cobalt);
132
- background: var(--c-cobalt-100);
131
+ color: var(--conduction-color-text-default);
132
+ background: var(--conduction-color-surface-sunken);
133
133
  border-color: var(--c-cobalt-200);
134
134
  }
135
135
  .downloadIcon {
@@ -153,7 +153,7 @@ a.downloadsBadge:hover {
153
153
  letter-spacing: -0.025em;
154
154
  line-height: 1.05;
155
155
  margin: 0 0 20px;
156
- color: var(--c-cobalt-900);
156
+ color: var(--conduction-color-text-strong);
157
157
  display: flex;
158
158
  align-items: center;
159
159
  gap: 22px;
@@ -199,7 +199,7 @@ a.downloadsBadge:hover {
199
199
  .tagline {
200
200
  font-size: 22px;
201
201
  line-height: 1.5;
202
- color: var(--c-cobalt-700);
202
+ color: var(--conduction-color-text-body);
203
203
  max-width: 60ch;
204
204
  margin: 0 0 32px;
205
205
  }
@@ -211,7 +211,7 @@ a.downloadsBadge:hover {
211
211
  .intro {
212
212
  font-size: 17px;
213
213
  line-height: 1.6;
214
- color: var(--c-cobalt-700);
214
+ color: var(--conduction-color-text-body);
215
215
  max-width: 70ch;
216
216
  margin: 0 0 32px;
217
217
  }
@@ -8,7 +8,7 @@
8
8
  .dd {
9
9
  border: 1px solid var(--c-cobalt-100);
10
10
  border-radius: var(--radius-lg);
11
- background: white;
11
+ background: var(--conduction-color-surface-card);
12
12
  padding: clamp(16px, 3vw, 28px);
13
13
  font-family: var(--conduction-typography-font-family-body);
14
14
  }
@@ -35,7 +35,7 @@
35
35
  margin: 0 0 6px;
36
36
  font-size: 20px;
37
37
  font-weight: 700;
38
- color: var(--c-cobalt-900);
38
+ color: var(--conduction-color-text-strong);
39
39
  }
40
40
 
41
41
  .lede {
@@ -43,7 +43,7 @@
43
43
  max-width: 58ch;
44
44
  font-size: 14px;
45
45
  line-height: 1.5;
46
- color: var(--c-cobalt-700);
46
+ color: var(--conduction-color-text-body);
47
47
  }
48
48
 
49
49
  .hud {
@@ -57,22 +57,22 @@
57
57
  .hudPill {
58
58
  padding: 6px 10px;
59
59
  border-radius: var(--radius-pill);
60
- background: var(--c-cobalt-50);
61
- color: var(--c-cobalt-900);
60
+ background: var(--conduction-color-surface-subtle);
61
+ color: var(--conduction-color-text-strong);
62
62
  white-space: nowrap;
63
63
  }
64
64
 
65
65
  .field {
66
66
  padding: 16px;
67
67
  border-radius: var(--radius-md);
68
- background: var(--c-cobalt-50);
68
+ background: var(--conduction-color-surface-subtle);
69
69
  max-width: 560px;
70
70
  }
71
71
 
72
72
  .monster {
73
73
  margin: 0 0 8px;
74
74
  font-size: 15px;
75
- color: var(--c-cobalt-900);
75
+ color: var(--conduction-color-text-strong);
76
76
  }
77
77
 
78
78
  .wounds {
@@ -101,11 +101,11 @@
101
101
  height: 52px;
102
102
  border: 2px solid var(--c-cobalt-200);
103
103
  border-radius: var(--radius-md);
104
- background: white;
104
+ background: var(--conduction-color-surface-card);
105
105
  font-family: var(--conduction-typography-font-family-code);
106
106
  font-size: 20px;
107
107
  font-weight: 700;
108
- color: var(--c-cobalt-900);
108
+ color: var(--conduction-color-text-strong);
109
109
  cursor: pointer;
110
110
  transition: border-color 120ms ease, transform 120ms ease;
111
111
  }
@@ -124,7 +124,7 @@
124
124
  margin: 12px 0 0;
125
125
  font-family: var(--conduction-typography-font-family-code);
126
126
  font-size: 12px;
127
- color: var(--c-cobalt-700);
127
+ color: var(--conduction-color-text-body);
128
128
  min-height: 1.2em;
129
129
  }
130
130
 
@@ -153,8 +153,8 @@
153
153
  .strike:focus-visible { outline: 2px solid var(--c-cobalt-900); outline-offset: 2px; }
154
154
 
155
155
  .push {
156
- background: white;
157
- color: var(--c-cobalt-700);
156
+ background: var(--conduction-color-surface-card);
157
+ color: var(--conduction-color-text-body);
158
158
  border: 1px solid var(--c-cobalt-200);
159
159
  padding: 10px 18px;
160
160
  border-radius: var(--radius-md);
@@ -169,8 +169,8 @@
169
169
  .push:focus-visible { outline: 2px solid var(--c-blue-cobalt); outline-offset: 2px; }
170
170
 
171
171
  .start {
172
- background: white;
173
- color: var(--c-cobalt-700);
172
+ background: var(--conduction-color-surface-card);
173
+ color: var(--conduction-color-text-body);
174
174
  border: 1px solid var(--c-cobalt-200);
175
175
  padding: 10px 18px;
176
176
  border-radius: var(--radius-md);
@@ -179,13 +179,13 @@
179
179
  font-size: 14px;
180
180
  cursor: pointer;
181
181
  }
182
- .start:hover { border-color: var(--c-blue-cobalt); color: var(--c-blue-cobalt); }
182
+ .start:hover { border-color: var(--c-blue-cobalt); color: var(--conduction-color-text-default); }
183
183
  .start:focus-visible { outline: 2px solid var(--c-blue-cobalt); outline-offset: 2px; }
184
184
 
185
185
  .hint {
186
186
  margin: 0;
187
187
  flex-basis: 100%;
188
188
  font-size: 12px;
189
- color: var(--c-cobalt-400);
189
+ color: var(--conduction-color-text-muted);
190
190
  min-height: 1.4em;
191
191
  }
@@ -26,7 +26,7 @@
26
26
  the panel's own 56px internal padding and grid layout are
27
27
  untouched. */
28
28
  .section {
29
- background: var(--c-cobalt-50);
29
+ background: var(--conduction-color-surface-subtle);
30
30
  border-top: 1px solid var(--c-cobalt-100);
31
31
  border-bottom: 1px solid var(--c-cobalt-100);
32
32
  margin-top: -200px;
@@ -99,7 +99,7 @@
99
99
  }
100
100
 
101
101
  .card {
102
- background: white;
102
+ background: var(--conduction-color-surface-card);
103
103
  color: var(--conduction-color-text-default);
104
104
  border-radius: var(--radius-lg);
105
105
  padding: 36px;
@@ -114,14 +114,14 @@
114
114
  font-size: 20px;
115
115
  font-weight: 600;
116
116
  margin: 0;
117
- color: var(--c-blue-cobalt);
117
+ color: var(--conduction-color-text-default);
118
118
  letter-spacing: -0.005em;
119
119
  }
120
120
 
121
121
  .cardBody {
122
122
  font-size: 14px;
123
123
  line-height: 1.55;
124
- color: var(--c-cobalt-700);
124
+ color: var(--conduction-color-text-body);
125
125
  margin: 0;
126
126
  }
127
127
 
@@ -28,7 +28,7 @@
28
28
 
29
29
  /* Compact variant */
30
30
  .cardCompact {
31
- background: white;
31
+ background: var(--conduction-color-surface-card);
32
32
  border: 1px solid var(--c-cobalt-100);
33
33
  border-radius: var(--radius-lg);
34
34
  padding: 20px;
@@ -48,14 +48,14 @@
48
48
  color: inherit;
49
49
  }
50
50
  .info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
51
- .name { font-size: 15px; font-weight: 600; color: var(--c-blue-cobalt); line-height: 1.2; }
52
- .role { font-family: var(--conduction-typography-font-family-code); font-size: 11px; color: var(--c-cobalt-400); letter-spacing: 0.05em; }
51
+ .name { font-size: 15px; font-weight: 600; color: var(--conduction-color-text-default); line-height: 1.2; }
52
+ .role { font-family: var(--conduction-typography-font-family-code); font-size: 11px; color: var(--conduction-color-text-muted); letter-spacing: 0.05em; }
53
53
  .linksRow { display: flex; gap: 8px; flex-shrink: 0; }
54
54
  .linksRow a {
55
55
  width: 26px; height: 26px;
56
56
  border-radius: var(--radius-sm);
57
- background: var(--c-cobalt-50);
58
- color: var(--c-cobalt-700);
57
+ background: var(--conduction-color-surface-subtle);
58
+ color: var(--conduction-color-text-body);
59
59
  display: inline-flex; align-items: center; justify-content: center;
60
60
  transition: all 140ms ease;
61
61
  }
@@ -64,7 +64,7 @@
64
64
 
65
65
  /* Photo variant */
66
66
  .cardPhoto {
67
- background: white;
67
+ background: var(--conduction-color-surface-card);
68
68
  border: 1px solid var(--c-cobalt-100);
69
69
  border-radius: var(--radius-lg);
70
70
  padding: 28px 24px;
@@ -76,16 +76,16 @@
76
76
  box-shadow: var(--shadow-1);
77
77
  font-family: var(--conduction-typography-font-family-body);
78
78
  }
79
- .cardPhoto .name { font-size: 19px; font-weight: 700; color: var(--c-cobalt-900); }
80
- .cardPhoto .role { font-size: 13px; color: var(--c-cobalt-700); font-family: var(--conduction-typography-font-family-body); letter-spacing: 0; max-width: 28ch; }
81
- .bio { font-size: 14px; color: var(--c-cobalt-700); line-height: 1.6; margin: 8px 0 0; max-width: 36ch; }
79
+ .cardPhoto .name { font-size: 19px; font-weight: 700; color: var(--conduction-color-text-strong); }
80
+ .cardPhoto .role { font-size: 13px; color: var(--conduction-color-text-body); font-family: var(--conduction-typography-font-family-body); letter-spacing: 0; max-width: 28ch; }
81
+ .bio { font-size: 14px; color: var(--conduction-color-text-body); line-height: 1.6; margin: 8px 0 0; max-width: 36ch; }
82
82
 
83
83
  .contacts { display: flex; gap: 10px; margin-top: 10px; }
84
84
  .contacts a {
85
85
  width: 32px; height: 32px;
86
86
  border-radius: var(--radius-sm);
87
- background: var(--c-cobalt-50);
88
- color: var(--c-cobalt-700);
87
+ background: var(--conduction-color-surface-subtle);
88
+ color: var(--conduction-color-text-body);
89
89
  display: inline-flex; align-items: center; justify-content: center;
90
90
  transition: all 140ms ease;
91
91
  }
@@ -94,7 +94,7 @@
94
94
 
95
95
  /* Detail variant */
96
96
  .cardDetail {
97
- background: white;
97
+ background: var(--conduction-color-surface-card);
98
98
  border: 1px solid var(--c-cobalt-100);
99
99
  border-radius: var(--radius-lg);
100
100
  padding: 32px;
@@ -112,23 +112,23 @@
112
112
  top: 0; right: 0;
113
113
  width: 140px; height: 160px;
114
114
  clip-path: var(--hex-pointy-top);
115
- background: var(--c-cobalt-50);
115
+ background: var(--conduction-color-surface-subtle);
116
116
  transform: translate(40px, -50px);
117
117
  z-index: 0;
118
118
  }
119
119
  .cardDetail > * { position: relative; z-index: 1; }
120
- .cardDetail .name { font-size: 20px; font-weight: 700; color: var(--c-cobalt-900); }
120
+ .cardDetail .name { font-size: 20px; font-weight: 700; color: var(--conduction-color-text-strong); }
121
121
  .cardDetail .role { font-size: 13px; }
122
122
  .appsLabel {
123
123
  font-family: var(--conduction-typography-font-family-code);
124
124
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
125
- color: var(--c-cobalt-400);
125
+ color: var(--conduction-color-text-muted);
126
126
  margin-bottom: 8px;
127
127
  }
128
128
  .appsList { display: flex; gap: 6px; flex-wrap: wrap; }
129
129
  .appPill {
130
- background: var(--c-cobalt-50);
131
- color: var(--c-cobalt-700);
130
+ background: var(--conduction-color-surface-subtle);
131
+ color: var(--conduction-color-text-body);
132
132
  padding: 4px 10px;
133
133
  border-radius: var(--radius-pill);
134
134
  font-size: 12px;
@@ -137,10 +137,10 @@
137
137
  .contactsInline { display: flex; flex-wrap: wrap; gap: 16px; }
138
138
  .contactsInline a {
139
139
  display: inline-flex; align-items: center; gap: 6px;
140
- font-size: 13px; color: var(--c-cobalt-700);
140
+ font-size: 13px; color: var(--conduction-color-text-body);
141
141
  text-decoration: none;
142
142
  }
143
- .contactsInline a:hover { color: var(--c-blue-cobalt); }
143
+ .contactsInline a:hover { color: var(--conduction-color-text-default); }
144
144
  .contactsInline svg { width: 14px; height: 14px; fill: #000000; stroke: none; }
145
145
 
146
146
  /* ============================================================
@@ -13,7 +13,7 @@
13
13
  }
14
14
 
15
15
  .card {
16
- background: white;
16
+ background: var(--conduction-color-surface-card);
17
17
  border: 1px solid var(--c-cobalt-100);
18
18
  border-radius: var(--radius-lg);
19
19
  padding: var(--space-4) var(--space-5);
@@ -60,7 +60,7 @@
60
60
  font-size: 16px;
61
61
  font-weight: 600;
62
62
  letter-spacing: -0.005em;
63
- color: var(--c-cobalt-900);
63
+ color: var(--conduction-color-text-strong);
64
64
  margin: 0;
65
65
  }
66
66
  .meta {
@@ -68,17 +68,17 @@
68
68
  font-size: 11px;
69
69
  letter-spacing: 0.06em;
70
70
  text-transform: uppercase;
71
- color: var(--c-cobalt-400);
71
+ color: var(--conduction-color-text-muted);
72
72
  }
73
73
  .desc {
74
74
  font-size: 14px;
75
75
  line-height: 1.5;
76
- color: var(--c-cobalt-700);
76
+ color: var(--conduction-color-text-body);
77
77
  margin: 4px 0 0;
78
78
  }
79
79
 
80
80
  .arrow {
81
- color: var(--c-cobalt-400);
81
+ color: var(--conduction-color-text-muted);
82
82
  font-size: 14px;
83
83
  margin-left: auto;
84
84
  transition: color 160ms, transform 160ms;
@@ -9,7 +9,7 @@
9
9
  font-weight: 700;
10
10
  letter-spacing: -0.02em;
11
11
  margin: 0 0 32px;
12
- color: var(--c-cobalt-900);
12
+ color: var(--conduction-color-text-strong);
13
13
  }
14
14
 
15
15
  .item {
@@ -25,7 +25,7 @@
25
25
  display: flex;
26
26
  justify-content: space-between;
27
27
  align-items: center;
28
- color: var(--c-cobalt-900);
28
+ color: var(--conduction-color-text-strong);
29
29
  gap: var(--space-4);
30
30
  }
31
31
 
@@ -36,7 +36,7 @@
36
36
  .summary::after {
37
37
  content: "+";
38
38
  font-size: 22px;
39
- color: var(--c-cobalt-400);
39
+ color: var(--conduction-color-text-muted);
40
40
  font-weight: 400;
41
41
  transition: transform 200ms ease;
42
42
  flex-shrink: 0;
@@ -49,7 +49,7 @@
49
49
 
50
50
  .body {
51
51
  font-size: 15px;
52
- color: var(--c-cobalt-700);
52
+ color: var(--conduction-color-text-body);
53
53
  line-height: 1.6;
54
54
  margin: 12px 0 0;
55
55
  max-width: 64ch;
@@ -20,7 +20,7 @@
20
20
  font-size: 11px;
21
21
  letter-spacing: 0.14em;
22
22
  text-transform: uppercase;
23
- color: var(--c-cobalt-400);
23
+ color: var(--conduction-color-text-muted);
24
24
  font-weight: 500;
25
25
  margin: 0 0 10px;
26
26
  }
@@ -40,10 +40,10 @@
40
40
  gap: 10px;
41
41
  align-items: center;
42
42
  font-size: 14px;
43
- color: var(--c-cobalt-700);
43
+ color: var(--conduction-color-text-body);
44
44
  padding: 4px 0;
45
45
  }
46
- .facetList li:hover { color: var(--c-blue-cobalt); }
46
+ .facetList li:hover { color: var(--conduction-color-text-default); }
47
47
 
48
48
  .facetList input[type="checkbox"] {
49
49
  appearance: none;
@@ -53,7 +53,7 @@
53
53
  border-radius: 3px;
54
54
  cursor: pointer;
55
55
  position: relative;
56
- background: white;
56
+ background: var(--conduction-color-surface-card);
57
57
  transition: all 120ms;
58
58
  }
59
59
  .facetList input[type="checkbox"]:hover { border-color: var(--c-blue-cobalt); }
@@ -80,7 +80,7 @@
80
80
  .count {
81
81
  font-family: var(--conduction-typography-font-family-code);
82
82
  font-size: 11px;
83
- color: var(--c-cobalt-400);
83
+ color: var(--conduction-color-text-muted);
84
84
  }
85
85
 
86
86
  .clearAll {
@@ -88,7 +88,7 @@
88
88
  align-items: center;
89
89
  gap: 6px;
90
90
  font-size: 13px;
91
- color: var(--c-cobalt-400);
91
+ color: var(--conduction-color-text-muted);
92
92
  text-decoration: none;
93
93
  margin-top: 8px;
94
94
  border: none;
@@ -105,8 +105,8 @@
105
105
  align-items: center;
106
106
  gap: 6px;
107
107
  padding: 5px 8px 5px 12px;
108
- background: var(--c-cobalt-50);
109
- color: var(--c-cobalt-900);
108
+ background: var(--conduction-color-surface-subtle);
109
+ color: var(--conduction-color-text-strong);
110
110
  font-size: 13px;
111
111
  font-family: var(--conduction-typography-font-family-code);
112
112
  border-radius: var(--radius-pill);
@@ -119,8 +119,8 @@
119
119
  width: 18px;
120
120
  height: 18px;
121
121
  border: none;
122
- background: var(--c-cobalt-100);
123
- color: var(--c-cobalt-700);
122
+ background: var(--conduction-color-surface-sunken);
123
+ color: var(--conduction-color-text-body);
124
124
  border-radius: 50%;
125
125
  cursor: pointer;
126
126
  font-size: 14px;
@@ -16,7 +16,7 @@
16
16
  font-size: 11px;
17
17
  letter-spacing: 0.1em;
18
18
  text-transform: uppercase;
19
- color: var(--c-cobalt-400);
19
+ color: var(--conduction-color-text-muted);
20
20
  margin: 24px 0 8px;
21
21
  padding-bottom: 8px;
22
22
  border-bottom: 1px solid var(--c-cobalt-100);
@@ -31,7 +31,7 @@
31
31
  gap: 12px;
32
32
  padding: 8px 0;
33
33
  font-size: 14px;
34
- color: var(--c-cobalt-800);
34
+ color: var(--conduction-color-text-strong);
35
35
  cursor: help;
36
36
  outline: none;
37
37
  border-radius: var(--radius-sm);
@@ -39,7 +39,7 @@
39
39
  }
40
40
  .item:hover,
41
41
  .item:focus-visible {
42
- background: var(--c-cobalt-50);
42
+ background: var(--conduction-color-surface-subtle);
43
43
  padding-left: 8px;
44
44
  padding-right: 8px;
45
45
  margin-left: -8px;
@@ -53,7 +53,7 @@
53
53
  }
54
54
  .itemLink:hover,
55
55
  .itemLink:focus-visible {
56
- color: var(--c-cobalt-900);
56
+ color: var(--conduction-color-text-strong);
57
57
  text-decoration: none;
58
58
  }
59
59
  .itemLink:hover .label,
@@ -95,12 +95,12 @@
95
95
  cursor: default;
96
96
  border: 1px solid var(--c-cobalt-100);
97
97
  border-radius: var(--radius-md);
98
- background: white;
98
+ background: var(--conduction-color-surface-card);
99
99
  }
100
100
  .itemCard.itemLink { cursor: pointer; }
101
101
  .itemCard:hover,
102
102
  .itemCard:focus-visible {
103
- background: var(--c-cobalt-50);
103
+ background: var(--conduction-color-surface-subtle);
104
104
  border-color: var(--c-cobalt-200);
105
105
  padding: 14px 16px;
106
106
  margin: 0;
@@ -113,7 +113,7 @@
113
113
  .desc {
114
114
  font-size: 13px;
115
115
  line-height: 1.55;
116
- color: var(--c-cobalt-700);
116
+ color: var(--conduction-color-text-body);
117
117
  margin-left: 22px;
118
118
  }
119
119
 
@@ -161,7 +161,7 @@
161
161
  font-size: 11px;
162
162
  letter-spacing: 0.06em;
163
163
  text-transform: uppercase;
164
- color: var(--c-cobalt-400);
164
+ color: var(--conduction-color-text-muted);
165
165
  }
166
166
  .legendItem {
167
167
  display: inline-flex;
@@ -19,8 +19,8 @@
19
19
  width: 56px;
20
20
  height: 64px;
21
21
  clip-path: var(--hex-pointy-top);
22
- background: var(--c-cobalt-50);
23
- color: var(--c-blue-cobalt);
22
+ background: var(--conduction-color-surface-subtle);
23
+ color: var(--conduction-color-text-default);
24
24
  display: flex;
25
25
  align-items: center;
26
26
  justify-content: center;
@@ -39,13 +39,13 @@
39
39
  font-weight: 700;
40
40
  letter-spacing: -0.01em;
41
41
  margin: 0 0 8px;
42
- color: var(--c-cobalt-900);
42
+ color: var(--conduction-color-text-strong);
43
43
  }
44
44
  .title :global(.next-blue) { color: var(--c-nextcloud-blue); }
45
45
 
46
46
  .body {
47
47
  font-size: 15px;
48
- color: var(--c-cobalt-700);
48
+ color: var(--conduction-color-text-body);
49
49
  line-height: 1.6;
50
50
  margin: 0;
51
51
  }
@@ -96,15 +96,15 @@
96
96
  align-items: center;
97
97
  gap: 8px;
98
98
  padding: 12px 22px;
99
- background: white;
100
- color: var(--c-cobalt-900);
99
+ background: var(--conduction-color-surface-card);
100
+ color: var(--conduction-color-text-strong);
101
101
  font-weight: 600;
102
102
  font-size: 14px;
103
103
  border-radius: var(--radius-pill);
104
104
  text-decoration: none;
105
105
  transition: background 120ms ease;
106
106
  }
107
- .card:hover .cta { background: var(--c-cobalt-50); }
107
+ .card:hover .cta { background: var(--conduction-color-surface-subtle); }
108
108
 
109
109
  .visual {
110
110
  display: flex;
@@ -30,7 +30,7 @@
30
30
  width: 100%;
31
31
  max-width: 720px;
32
32
  aspect-ratio: 16 / 10;
33
- background: white;
33
+ background: var(--conduction-color-surface-card);
34
34
  border: 1px solid var(--c-cobalt-100);
35
35
  border-radius: var(--radius-lg);
36
36
  box-shadow: var(--shadow-3);
@@ -46,7 +46,7 @@
46
46
  font-family: var(--conduction-typography-font-family-code);
47
47
  font-size: 11px;
48
48
  letter-spacing: 0.06em;
49
- color: var(--c-cobalt-400);
49
+ color: var(--conduction-color-text-muted);
50
50
  text-transform: uppercase;
51
51
  text-align: center;
52
52
  }