nuxtseo-layer-devtools 5.1.4 → 5.2.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.
- package/app.config.ts +1 -1
- package/assets/css/global.css +62 -19
- package/components/DevtoolsPanel.vue +1 -5
- package/components/DevtoolsSection.vue +3 -1
- package/package.json +10 -2
package/app.config.ts
CHANGED
package/assets/css/global.css
CHANGED
|
@@ -21,23 +21,39 @@
|
|
|
21
21
|
--font-sans: 'Hubot Sans', ui-sans-serif, system-ui, sans-serif;
|
|
22
22
|
--font-mono: 'Fira Code', ui-monospace, monospace;
|
|
23
23
|
|
|
24
|
-
/* Neutral
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
--color-neutral-
|
|
28
|
-
--color-neutral-
|
|
29
|
-
--color-neutral-
|
|
30
|
-
--color-neutral-
|
|
31
|
-
--color-neutral-
|
|
32
|
-
--color-neutral-
|
|
33
|
-
--color-neutral-
|
|
34
|
-
--color-neutral-
|
|
35
|
-
--color-neutral-
|
|
24
|
+
/* Neutral — slate realigned to the violet primary hue (292), chroma lifted so
|
|
25
|
+
a subtle violet warmth bleeds through every surface (matches DESIGN.md /
|
|
26
|
+
layers/design-system). Reads as a violet-tinted grey, not a cold blue-grey. */
|
|
27
|
+
--color-neutral-50: oklch(98.4% 0.005 292);
|
|
28
|
+
--color-neutral-100: oklch(96.8% 0.009 292);
|
|
29
|
+
--color-neutral-200: oklch(92.9% 0.020 292);
|
|
30
|
+
--color-neutral-300: oklch(86.9% 0.033 292);
|
|
31
|
+
--color-neutral-400: oklch(70.4% 0.052 292);
|
|
32
|
+
--color-neutral-500: oklch(55.4% 0.058 292);
|
|
33
|
+
--color-neutral-600: oklch(44.6% 0.056 292);
|
|
34
|
+
--color-neutral-700: oklch(32% 0.050 292);
|
|
35
|
+
--color-neutral-800: oklch(22% 0.044 292);
|
|
36
|
+
--color-neutral-900: oklch(16% 0.036 292);
|
|
37
|
+
--color-neutral-950: oklch(11% 0.029 292);
|
|
38
|
+
|
|
39
|
+
/* Primary — deep, rich violet (hue 292). Drives @nuxt/ui `primary: violet`. */
|
|
40
|
+
--color-violet-50: oklch(97.0% 0.037 292);
|
|
41
|
+
--color-violet-100: oklch(94.4% 0.065 292);
|
|
42
|
+
--color-violet-200: oklch(89.5% 0.110 292);
|
|
43
|
+
--color-violet-300: oklch(76.0% 0.150 292);
|
|
44
|
+
--color-violet-400: oklch(63.0% 0.180 292);
|
|
45
|
+
--color-violet-500: oklch(54.0% 0.225 292);
|
|
46
|
+
--color-violet-600: oklch(48.0% 0.240 292);
|
|
47
|
+
--color-violet-700: oklch(43.0% 0.230 292);
|
|
48
|
+
--color-violet-800: oklch(38.0% 0.200 292);
|
|
49
|
+
--color-violet-900: oklch(33.0% 0.165 292);
|
|
50
|
+
--color-violet-950: oklch(24.0% 0.120 292);
|
|
36
51
|
}
|
|
37
52
|
|
|
38
53
|
:root {
|
|
39
|
-
/* Brand
|
|
40
|
-
|
|
54
|
+
/* Brand accent — violet primary (was Nuxt SEO green). Kept as --seo-green for
|
|
55
|
+
component compatibility; all 30+ usages now read as brand violet. */
|
|
56
|
+
--seo-green: var(--color-violet-500);
|
|
41
57
|
|
|
42
58
|
/* Semantic colors */
|
|
43
59
|
--color-surface: var(--color-neutral-50);
|
|
@@ -49,20 +65,47 @@
|
|
|
49
65
|
--color-text-muted: var(--color-neutral-500);
|
|
50
66
|
--color-text-subtle: var(--color-neutral-400);
|
|
51
67
|
|
|
68
|
+
/* Radius — aligned to DESIGN.md (sm 6 / md 8 / lg 12 / xl 16). */
|
|
52
69
|
--radius-sm: 6px;
|
|
53
|
-
--radius-md:
|
|
54
|
-
--radius-lg:
|
|
70
|
+
--radius-md: 8px;
|
|
71
|
+
--radius-lg: 12px;
|
|
72
|
+
--radius-xl: 16px;
|
|
73
|
+
|
|
74
|
+
/* Focus ring — violet, matches design-system --shadow-focus. */
|
|
75
|
+
--shadow-focus: 0 0 0 3px color-mix(in oklab, var(--color-violet-500) 30%, transparent);
|
|
76
|
+
|
|
77
|
+
/* Depth & elevation ladder (from layers/design-system). Tier A ingredients
|
|
78
|
+
compose into Tier B presets — components reference only the presets:
|
|
79
|
+
inset carved edge, no lift flat hairline ring, zero lift
|
|
80
|
+
raised resting drop + bevel overlay atmospheric + bevel (modals)
|
|
81
|
+
popover atmospheric + brand bevel (tooltip/dropdown) */
|
|
82
|
+
--_depth-ambient-low: 0 1px 2px rgb(0 0 0 / 0.03), 0 1px 5px rgb(0 0 0 / 0.035);
|
|
83
|
+
--_depth-ambient-high: 0 1px 1px 0 rgb(0 0 0 / 0.04), 0 2px 6px -2px rgb(0 0 0 / 0.06), 0 8px 16px -6px rgb(0 0 0 / 0.08);
|
|
84
|
+
--_depth-bevel: inset 0 1px 0 0 rgb(255 255 255 / 0.06), inset 0 -1px 0 0 rgb(0 0 0 / 0.04);
|
|
85
|
+
--_depth-bevel-brand: inset 0 1.5px 0 0 color-mix(in srgb, var(--color-violet-400) 26%, transparent), inset 0 -1px 0 0 rgb(0 0 0 / 0.04);
|
|
86
|
+
--_depth-ring: inset 0 0 0 1px var(--color-border);
|
|
87
|
+
--elevation-inset: var(--_depth-bevel);
|
|
88
|
+
--elevation-flat: var(--_depth-ring);
|
|
89
|
+
--elevation-raised: var(--_depth-ambient-low), var(--_depth-bevel);
|
|
90
|
+
--elevation-overlay: var(--_depth-ambient-high), var(--_depth-bevel);
|
|
91
|
+
--elevation-popover: var(--_depth-ambient-high), var(--_depth-bevel-brand);
|
|
55
92
|
}
|
|
56
93
|
|
|
57
94
|
.dark {
|
|
58
95
|
--color-surface: var(--color-neutral-950);
|
|
59
96
|
--color-surface-elevated: var(--color-neutral-900);
|
|
60
|
-
--color-surface-sunken: oklch(7% 0.
|
|
61
|
-
--color-border: oklch(25% 0.
|
|
62
|
-
--color-border-subtle: oklch(20% 0.
|
|
97
|
+
--color-surface-sunken: oklch(7% 0.018 292);
|
|
98
|
+
--color-border: oklch(25% 0.040 292);
|
|
99
|
+
--color-border-subtle: oklch(20% 0.034 292);
|
|
63
100
|
--color-text: var(--color-neutral-100);
|
|
64
101
|
--color-text-muted: var(--color-neutral-400);
|
|
65
102
|
--color-text-subtle: var(--color-neutral-500);
|
|
103
|
+
|
|
104
|
+
/* Dark redefines the depth ingredients; presets inherit via var(). */
|
|
105
|
+
--_depth-ambient-low: 0 1px 2px rgb(0 0 0 / 0.35), 0 1px 5px rgb(0 0 0 / 0.22);
|
|
106
|
+
--_depth-ambient-high: 0 1px 1px 0 rgb(0 0 0 / 0.4), 0 2px 6px -2px rgb(0 0 0 / 0.35), 0 8px 16px -6px rgb(0 0 0 / 0.4);
|
|
107
|
+
--_depth-bevel: inset 0 1px 0 0 rgb(255 255 255 / 0.08), inset 0 -1px 0 0 rgb(0 0 0 / 0.2);
|
|
108
|
+
--_depth-bevel-brand: inset 0 1.5px 0 0 color-mix(in srgb, var(--color-violet-400) 40%, transparent), inset 0 -1px 0 0 rgb(0 0 0 / 0.2);
|
|
66
109
|
}
|
|
67
110
|
|
|
68
111
|
/* Base styles */
|
|
@@ -48,14 +48,10 @@ defineEmits<{
|
|
|
48
48
|
border-radius: var(--radius-lg);
|
|
49
49
|
border: 1px solid var(--color-border);
|
|
50
50
|
background: var(--color-surface-elevated);
|
|
51
|
-
box-shadow:
|
|
51
|
+
box-shadow: var(--elevation-overlay);
|
|
52
52
|
overflow: hidden;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
.dark .devtools-panel {
|
|
56
|
-
box-shadow: 0 8px 32px oklch(0% 0 0 / 0.4);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
55
|
.devtools-panel-header {
|
|
60
56
|
display: flex;
|
|
61
57
|
align-items: center;
|
|
@@ -61,11 +61,13 @@ function onToggle(e: any) {
|
|
|
61
61
|
border-radius: var(--radius-lg);
|
|
62
62
|
overflow: hidden;
|
|
63
63
|
background: var(--color-surface-elevated);
|
|
64
|
-
|
|
64
|
+
box-shadow: var(--elevation-flat);
|
|
65
|
+
transition: border-color 200ms ease, box-shadow 200ms ease;
|
|
65
66
|
}
|
|
66
67
|
|
|
67
68
|
.section-block:hover {
|
|
68
69
|
border-color: var(--color-neutral-300);
|
|
70
|
+
box-shadow: var(--elevation-raised);
|
|
69
71
|
}
|
|
70
72
|
|
|
71
73
|
.dark .section-block:hover {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nuxtseo-layer-devtools",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "5.
|
|
4
|
+
"version": "5.2.0",
|
|
5
5
|
"description": "Shared Nuxt layer for Nuxt SEO devtools clients.",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "Harlan Wilton",
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
"exports": {
|
|
23
23
|
".": "./nuxt.config.ts",
|
|
24
24
|
"./composables/shiki": "./composables/shiki.ts",
|
|
25
|
+
"./composables/host": "./composables/host.ts",
|
|
25
26
|
"./composables/rpc": "./composables/rpc.ts",
|
|
26
27
|
"./composables/state": "./composables/state.ts"
|
|
27
28
|
},
|
|
@@ -38,6 +39,7 @@
|
|
|
38
39
|
"skills"
|
|
39
40
|
],
|
|
40
41
|
"dependencies": {
|
|
42
|
+
"@iconify-json/carbon": "^1.2.0",
|
|
41
43
|
"@nuxt/devtools-kit": "4.0.0-alpha.3",
|
|
42
44
|
"@nuxt/kit": "^4.4.7",
|
|
43
45
|
"@nuxt/ui": "^4.8.2",
|
|
@@ -47,11 +49,17 @@
|
|
|
47
49
|
"@vueuse/nuxt": "^14.3.0",
|
|
48
50
|
"ofetch": "^1.5.1",
|
|
49
51
|
"shiki": "^4.2.0",
|
|
52
|
+
"tailwindcss": "^4.0.0",
|
|
50
53
|
"ufo": "^1.6.4",
|
|
51
|
-
"nuxtseo-shared": "5.
|
|
54
|
+
"nuxtseo-shared": "5.2.0"
|
|
52
55
|
},
|
|
53
56
|
"devDependencies": {
|
|
54
57
|
"nuxt": "^4.4.7",
|
|
58
|
+
"vitest": "^4.1.8",
|
|
55
59
|
"vue": "^3.5.35"
|
|
60
|
+
},
|
|
61
|
+
"scripts": {
|
|
62
|
+
"test": "vitest",
|
|
63
|
+
"test:run": "vitest run"
|
|
56
64
|
}
|
|
57
65
|
}
|