@commonpub/layer 0.4.1 → 0.4.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.
- package/components/SiteLogo.vue +39 -25
- package/package.json +7 -7
- package/theme/agora-dark.css +7 -1
- package/theme/agora.css +7 -1
package/components/SiteLogo.vue
CHANGED
|
@@ -1,30 +1,27 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
const { themeId } = useTheme();
|
|
3
|
-
const isAgora = computed(() => themeId.value === 'agora' || themeId.value === 'agora-dark');
|
|
4
|
-
</script>
|
|
5
|
-
|
|
6
1
|
<template>
|
|
7
2
|
<span class="cpub-site-logo">
|
|
8
|
-
|
|
9
|
-
|
|
3
|
+
<!-- Classic logo: shown by default, hidden when Agora active -->
|
|
4
|
+
<span class="cpub-logo-classic">
|
|
5
|
+
<span class="cpub-logo-bracket">[</span>C<span class="cpub-logo-bracket">]</span>
|
|
6
|
+
<span class="cpub-logo-name">CommonPub</span>
|
|
7
|
+
</span>
|
|
8
|
+
|
|
9
|
+
<!-- Agora logo: hidden by default, shown when Agora active via CSS -->
|
|
10
|
+
<span class="cpub-logo-agora">
|
|
11
|
+
<!-- Town Square mark: 4 blocks with content lines + green center -->
|
|
10
12
|
<svg class="cpub-logo-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="22" height="22" aria-hidden="true">
|
|
11
13
|
<rect x="18" y="18" width="72" height="72" fill="none" stroke="currentColor" stroke-width="7" stroke-linejoin="round"/>
|
|
12
14
|
<rect x="110" y="18" width="72" height="72" fill="none" stroke="currentColor" stroke-width="7" stroke-linejoin="round"/>
|
|
13
15
|
<rect x="18" y="110" width="72" height="72" fill="none" stroke="currentColor" stroke-width="7" stroke-linejoin="round"/>
|
|
14
16
|
<rect x="110" y="110" width="72" height="72" fill="none" stroke="currentColor" stroke-width="7" stroke-linejoin="round"/>
|
|
15
17
|
<rect x="88" y="88" width="24" height="24" fill="var(--accent, #3d8b5e)"/>
|
|
16
|
-
<!-- Content lines: 1 green accent per block -->
|
|
17
18
|
<line x1="34" y1="54" x2="72" y2="54" stroke="var(--accent, #3d8b5e)" stroke-width="3.5" stroke-linecap="round" opacity="0.7"/>
|
|
18
19
|
<line x1="128" y1="46" x2="166" y2="46" stroke="var(--accent, #3d8b5e)" stroke-width="3.5" stroke-linecap="round" opacity="0.7"/>
|
|
19
20
|
<line x1="34" y1="148" x2="68" y2="148" stroke="var(--accent, #3d8b5e)" stroke-width="3.5" stroke-linecap="round" opacity="0.7"/>
|
|
20
21
|
<line x1="128" y1="142" x2="162" y2="142" stroke="var(--accent, #3d8b5e)" stroke-width="3.5" stroke-linecap="round" opacity="0.7"/>
|
|
21
22
|
</svg>
|
|
22
|
-
<span class="cpub-logo-
|
|
23
|
-
</
|
|
24
|
-
<template v-else>
|
|
25
|
-
<span class="cpub-logo-bracket">[</span>C<span class="cpub-logo-bracket">]</span>
|
|
26
|
-
<span class="cpub-logo-name">CommonPub</span>
|
|
27
|
-
</template>
|
|
23
|
+
<span class="cpub-logo-wordmark">Common<span class="cpub-logo-pub">Pub</span></span>
|
|
24
|
+
</span>
|
|
28
25
|
</span>
|
|
29
26
|
</template>
|
|
30
27
|
|
|
@@ -32,29 +29,46 @@ const isAgora = computed(() => themeId.value === 'agora' || themeId.value === 'a
|
|
|
32
29
|
.cpub-site-logo {
|
|
33
30
|
display: flex;
|
|
34
31
|
align-items: center;
|
|
35
|
-
gap: 2px;
|
|
36
|
-
font-size: 13px;
|
|
37
32
|
font-weight: 700;
|
|
38
|
-
font-family: var(--font-mono);
|
|
39
33
|
color: var(--text);
|
|
40
34
|
white-space: nowrap;
|
|
41
35
|
}
|
|
36
|
+
|
|
37
|
+
/* Classic logo */
|
|
38
|
+
.cpub-logo-classic {
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
gap: 2px;
|
|
42
|
+
font-size: 13px;
|
|
43
|
+
font-family: var(--font-mono);
|
|
44
|
+
}
|
|
42
45
|
.cpub-logo-bracket { color: var(--accent); font-size: 15px; }
|
|
43
46
|
.cpub-logo-name { margin-left: 2px; }
|
|
44
47
|
|
|
45
|
-
/* Agora
|
|
46
|
-
.cpub-logo-
|
|
47
|
-
|
|
48
|
-
|
|
48
|
+
/* Agora logo — hidden by default */
|
|
49
|
+
.cpub-logo-agora {
|
|
50
|
+
display: none;
|
|
51
|
+
align-items: center;
|
|
52
|
+
gap: 6px;
|
|
49
53
|
}
|
|
50
|
-
.cpub-logo-
|
|
54
|
+
.cpub-logo-mark { flex-shrink: 0; }
|
|
55
|
+
.cpub-logo-wordmark {
|
|
51
56
|
font-family: var(--font-display, var(--font-heading));
|
|
52
57
|
font-weight: 700;
|
|
53
58
|
font-size: 16px;
|
|
54
59
|
letter-spacing: -0.02em;
|
|
55
|
-
margin-left: 0;
|
|
56
60
|
}
|
|
57
|
-
.cpub-logo-pub {
|
|
58
|
-
|
|
61
|
+
.cpub-logo-pub { color: var(--accent); }
|
|
62
|
+
</style>
|
|
63
|
+
|
|
64
|
+
<style>
|
|
65
|
+
/* Switch logos based on data-theme — pure CSS, no JS hydration needed */
|
|
66
|
+
[data-theme="agora"] .cpub-logo-classic,
|
|
67
|
+
[data-theme="agora-dark"] .cpub-logo-classic {
|
|
68
|
+
display: none !important;
|
|
69
|
+
}
|
|
70
|
+
[data-theme="agora"] .cpub-logo-agora,
|
|
71
|
+
[data-theme="agora-dark"] .cpub-logo-agora {
|
|
72
|
+
display: flex !important;
|
|
59
73
|
}
|
|
60
74
|
</style>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commonpub/layer",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./nuxt.config.ts",
|
|
6
6
|
"files": [
|
|
@@ -50,15 +50,15 @@
|
|
|
50
50
|
"vue": "^3.4.0",
|
|
51
51
|
"vue-router": "^4.3.0",
|
|
52
52
|
"zod": "^4.3.6",
|
|
53
|
-
"@commonpub/auth": "0.5.0",
|
|
54
53
|
"@commonpub/config": "0.8.0",
|
|
55
|
-
"@commonpub/editor": "0.5.0",
|
|
56
|
-
"@commonpub/protocol": "0.9.5",
|
|
57
54
|
"@commonpub/docs": "0.5.2",
|
|
55
|
+
"@commonpub/auth": "0.5.0",
|
|
56
|
+
"@commonpub/editor": "0.5.0",
|
|
58
57
|
"@commonpub/server": "2.22.0",
|
|
59
|
-
"@commonpub/
|
|
60
|
-
"@commonpub/
|
|
61
|
-
"@commonpub/
|
|
58
|
+
"@commonpub/protocol": "0.9.5",
|
|
59
|
+
"@commonpub/learning": "0.5.0",
|
|
60
|
+
"@commonpub/ui": "0.8.2",
|
|
61
|
+
"@commonpub/schema": "0.8.13"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"@testing-library/jest-dom": "^6.9.1",
|
package/theme/agora-dark.css
CHANGED
|
@@ -155,6 +155,13 @@
|
|
|
155
155
|
|
|
156
156
|
color-scheme: dark;
|
|
157
157
|
}
|
|
158
|
+
} /* end @layer commonpub — token overrides only */
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
/* ═══════════════════════════════════════════
|
|
162
|
+
COMPONENT OVERRIDES (outside @layer so they
|
|
163
|
+
beat Vue scoped styles)
|
|
164
|
+
═══════════════════════════════════════════ */
|
|
158
165
|
|
|
159
166
|
|
|
160
167
|
/* ═══════════════════════════════════════════
|
|
@@ -350,4 +357,3 @@
|
|
|
350
357
|
[data-theme="agora-dark"] [data-content-type="explainer"] { --badge-color: #3dbcab; --badge-bg: rgba(61, 188, 171, 0.12); }
|
|
351
358
|
[data-theme="agora-dark"] [data-content-type="video"] { --badge-color: #d85e55; --badge-bg: rgba(216, 94, 85, 0.12); }
|
|
352
359
|
[data-theme="agora-dark"] [data-content-type="tutorial"] { --badge-color: #daa040; --badge-bg: rgba(218, 160, 64, 0.12); }
|
|
353
|
-
}
|
package/theme/agora.css
CHANGED
|
@@ -157,6 +157,13 @@
|
|
|
157
157
|
/* === FOCUS (glow instead of outline) === */
|
|
158
158
|
--focus-ring: 0 0 0 3px rgba(61, 139, 94, 0.2);
|
|
159
159
|
}
|
|
160
|
+
} /* end @layer commonpub — token overrides only */
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
/* ═══════════════════════════════════════════
|
|
164
|
+
COMPONENT OVERRIDES (outside @layer so they
|
|
165
|
+
beat Vue scoped styles)
|
|
166
|
+
═══════════════════════════════════════════ */
|
|
160
167
|
|
|
161
168
|
|
|
162
169
|
/* ═══════════════════════════════════════════
|
|
@@ -453,4 +460,3 @@
|
|
|
453
460
|
[data-theme="agora"] [data-content-type="explainer"] { --badge-color: #2a9d8f; --badge-bg: rgba(42, 157, 143, 0.08); }
|
|
454
461
|
[data-theme="agora"] [data-content-type="video"] { --badge-color: #c4443a; --badge-bg: rgba(196, 68, 58, 0.08); }
|
|
455
462
|
[data-theme="agora"] [data-content-type="tutorial"] { --badge-color: #c4882a; --badge-bg: rgba(196, 136, 42, 0.08); }
|
|
456
|
-
}
|