@repobit/dex-system-design 0.23.11 → 0.23.13
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/CHANGELOG.md +15 -0
- package/package.json +5 -2
- package/schemas/README.md +33 -0
- package/schemas/component-manifest.json +695 -0
- package/schemas/page-schema.json +128 -0
- package/src/components/compare/compare.css.js +30 -88
- package/src/components/compare/compare.js +165 -149
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
|
3
|
+
"$id": "https://repobit.github.io/dex-system-design/page-schema.json",
|
|
4
|
+
"title": "Dex System Design Page Schema",
|
|
5
|
+
"description": "Recursive page tree for n8n or other generators that build markup from dex-system-design components.",
|
|
6
|
+
"type": "object",
|
|
7
|
+
"additionalProperties": false,
|
|
8
|
+
"required": ["version", "imports", "components"],
|
|
9
|
+
"properties": {
|
|
10
|
+
"version": {
|
|
11
|
+
"type": "integer",
|
|
12
|
+
"const": 1
|
|
13
|
+
},
|
|
14
|
+
"meta": {
|
|
15
|
+
"type": "object",
|
|
16
|
+
"additionalProperties": false,
|
|
17
|
+
"properties": {
|
|
18
|
+
"title": { "type": "string" },
|
|
19
|
+
"description": { "type": "string" },
|
|
20
|
+
"locale": { "type": "string" },
|
|
21
|
+
"route": { "type": "string" }
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"imports": {
|
|
25
|
+
"type": "array",
|
|
26
|
+
"description": "Package exports that must be imported before rendering the page.",
|
|
27
|
+
"items": {
|
|
28
|
+
"type": "string"
|
|
29
|
+
},
|
|
30
|
+
"uniqueItems": true
|
|
31
|
+
},
|
|
32
|
+
"components": {
|
|
33
|
+
"type": "array",
|
|
34
|
+
"items": {
|
|
35
|
+
"$ref": "#/$defs/node"
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
"$defs": {
|
|
40
|
+
"scalar": {
|
|
41
|
+
"type": ["string", "number", "boolean", "null"]
|
|
42
|
+
},
|
|
43
|
+
"propValue": {
|
|
44
|
+
"oneOf": [
|
|
45
|
+
{ "$ref": "#/$defs/scalar" },
|
|
46
|
+
{
|
|
47
|
+
"type": "array",
|
|
48
|
+
"items": {
|
|
49
|
+
"$ref": "#/$defs/propValue"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"type": "object",
|
|
54
|
+
"additionalProperties": {
|
|
55
|
+
"$ref": "#/$defs/propValue"
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
]
|
|
59
|
+
},
|
|
60
|
+
"node": {
|
|
61
|
+
"type": "object",
|
|
62
|
+
"additionalProperties": false,
|
|
63
|
+
"required": ["type"],
|
|
64
|
+
"properties": {
|
|
65
|
+
"id": {
|
|
66
|
+
"type": "string"
|
|
67
|
+
},
|
|
68
|
+
"type": {
|
|
69
|
+
"type": "string",
|
|
70
|
+
"description": "Component tag from component-manifest.json."
|
|
71
|
+
},
|
|
72
|
+
"props": {
|
|
73
|
+
"type": "object",
|
|
74
|
+
"additionalProperties": {
|
|
75
|
+
"$ref": "#/$defs/propValue"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
"slot": {
|
|
79
|
+
"type": "string"
|
|
80
|
+
},
|
|
81
|
+
"if": {
|
|
82
|
+
"type": "string",
|
|
83
|
+
"description": "Optional expression or upstream key used by a later renderer to decide whether to include the node."
|
|
84
|
+
},
|
|
85
|
+
"children": {
|
|
86
|
+
"type": "array",
|
|
87
|
+
"items": {
|
|
88
|
+
"oneOf": [
|
|
89
|
+
{ "type": "string" },
|
|
90
|
+
{ "$ref": "#/$defs/node" }
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
"examples": [
|
|
98
|
+
{
|
|
99
|
+
"version": 1,
|
|
100
|
+
"imports": ["./heading", "./paragraph", "./button"],
|
|
101
|
+
"components": [
|
|
102
|
+
{
|
|
103
|
+
"type": "bd-h",
|
|
104
|
+
"props": {
|
|
105
|
+
"as": "h1"
|
|
106
|
+
},
|
|
107
|
+
"children": ["Bitdefender Security"]
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"type": "bd-p",
|
|
111
|
+
"props": {
|
|
112
|
+
"kind": "regular"
|
|
113
|
+
},
|
|
114
|
+
"children": ["Advanced protection for devices, privacy, and identity."]
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"type": "bd-button-link",
|
|
118
|
+
"props": {
|
|
119
|
+
"kind": "primary",
|
|
120
|
+
"size": "lg",
|
|
121
|
+
"href": "/buy"
|
|
122
|
+
},
|
|
123
|
+
"children": ["Buy now"]
|
|
124
|
+
}
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
]
|
|
128
|
+
}
|
|
@@ -2,22 +2,17 @@ import { css } from "lit";
|
|
|
2
2
|
|
|
3
3
|
export default css`
|
|
4
4
|
|
|
5
|
-
/* ──────────────────────────────────────────────────────────────
|
|
6
|
-
Compare layout — uses design-system tokens (src/tokens/tokens.js).
|
|
7
|
-
--cs-* are local aliases where themes override bar colors.
|
|
8
|
-
──────────────────────────────────────────────────────────────── */
|
|
9
|
-
|
|
10
5
|
:host(bd-compare-section) {
|
|
11
6
|
display: block;
|
|
12
7
|
|
|
13
|
-
--cs-bar-primary-fg:
|
|
14
|
-
--cs-bar-primary-bg:
|
|
15
|
-
--cs-bar-secondary-bg:
|
|
16
|
-
--cs-bar-track-bg:
|
|
17
|
-
--cs-bar-track-border:
|
|
18
|
-
--cs-bar-height:
|
|
19
|
-
--cs-gap:
|
|
20
|
-
--cs-grid-max:
|
|
8
|
+
--cs-bar-primary-fg: var(--color-neutral-0);
|
|
9
|
+
--cs-bar-primary-bg: var(--color-blue-500);
|
|
10
|
+
--cs-bar-secondary-bg: var(--color-neutral-100);
|
|
11
|
+
--cs-bar-track-bg: transparent;
|
|
12
|
+
--cs-bar-track-border: var(--color-neutral-200);
|
|
13
|
+
--cs-bar-height: var(--dimension-48px);
|
|
14
|
+
--cs-gap: var(--spacing-32);
|
|
15
|
+
--cs-grid-max: 1228px;
|
|
21
16
|
}
|
|
22
17
|
|
|
23
18
|
:host(compare-card) {
|
|
@@ -30,11 +25,6 @@ export default css`
|
|
|
30
25
|
width: 100%;
|
|
31
26
|
}
|
|
32
27
|
|
|
33
|
-
|
|
34
|
-
/* ──────────────────────────────────────────────────────────────
|
|
35
|
-
2. compare-section
|
|
36
|
-
──────────────────────────────────────────────────────────────── */
|
|
37
|
-
|
|
38
28
|
.cs-sr-only {
|
|
39
29
|
position: absolute;
|
|
40
30
|
width: 1px;
|
|
@@ -59,13 +49,8 @@ export default css`
|
|
|
59
49
|
margin: 0 auto var(--spacing-40);
|
|
60
50
|
}
|
|
61
51
|
|
|
62
|
-
.cs-title
|
|
63
|
-
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.cs-subtitle {
|
|
67
|
-
margin: 0;
|
|
68
|
-
}
|
|
52
|
+
.cs-title { margin: 0 0 var(--spacing-8); }
|
|
53
|
+
.cs-subtitle { margin: 0; }
|
|
69
54
|
|
|
70
55
|
.cs-grid {
|
|
71
56
|
display: grid;
|
|
@@ -83,20 +68,16 @@ export default css`
|
|
|
83
68
|
}
|
|
84
69
|
}
|
|
85
70
|
|
|
86
|
-
|
|
87
|
-
/* ──────────────────────────────────────────────────────────────
|
|
88
|
-
3. compare-card
|
|
89
|
-
──────────────────────────────────────────────────────────────── */
|
|
90
|
-
|
|
91
71
|
.card {
|
|
92
|
-
background:
|
|
93
|
-
border-radius:
|
|
94
|
-
padding:
|
|
95
|
-
display:
|
|
96
|
-
flex-direction:
|
|
97
|
-
gap:
|
|
98
|
-
box-sizing:
|
|
99
|
-
height:
|
|
72
|
+
background: var(--color-neutral-25);
|
|
73
|
+
border-radius: var(--radius-3xl);
|
|
74
|
+
padding: var(--spacing-32);
|
|
75
|
+
display: flex;
|
|
76
|
+
flex-direction: column;
|
|
77
|
+
gap: var(--spacing-24);
|
|
78
|
+
box-sizing: border-box;
|
|
79
|
+
height: 100%;
|
|
80
|
+
justify-content: flex-start;
|
|
100
81
|
}
|
|
101
82
|
|
|
102
83
|
.card-header {
|
|
@@ -104,13 +85,13 @@ export default css`
|
|
|
104
85
|
flex-direction: column;
|
|
105
86
|
align-items: flex-start;
|
|
106
87
|
gap: var(--spacing-8);
|
|
107
|
-
flex:
|
|
88
|
+
flex: 0 0 auto;
|
|
108
89
|
}
|
|
109
90
|
|
|
110
91
|
.card-icon-wrap {
|
|
111
92
|
flex-shrink: 0;
|
|
112
|
-
width: var(--icon-2xl-size);
|
|
113
|
-
height: var(--icon-2xl-size);
|
|
93
|
+
width: var(--icon-2xl-size, 48px);
|
|
94
|
+
height: var(--icon-2xl-size, 48px);
|
|
114
95
|
}
|
|
115
96
|
|
|
116
97
|
.card-icon-wrap bd-img {
|
|
@@ -126,13 +107,8 @@ export default css`
|
|
|
126
107
|
align-self: stretch;
|
|
127
108
|
}
|
|
128
109
|
|
|
129
|
-
.card-title
|
|
130
|
-
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
.card-description {
|
|
134
|
-
margin: 0;
|
|
135
|
-
}
|
|
110
|
+
.card-title { margin: 0; }
|
|
111
|
+
.card-description { margin: 0; }
|
|
136
112
|
|
|
137
113
|
.card-bars {
|
|
138
114
|
display: flex;
|
|
@@ -148,11 +124,6 @@ export default css`
|
|
|
148
124
|
flex: 0 0 auto;
|
|
149
125
|
}
|
|
150
126
|
|
|
151
|
-
|
|
152
|
-
/* ──────────────────────────────────────────────────────────────
|
|
153
|
-
4. compare-bar
|
|
154
|
-
──────────────────────────────────────────────────────────────── */
|
|
155
|
-
|
|
156
127
|
.bar-track {
|
|
157
128
|
position: relative;
|
|
158
129
|
height: var(--cs-bar-height);
|
|
@@ -180,14 +151,10 @@ export default css`
|
|
|
180
151
|
min-width: 0;
|
|
181
152
|
}
|
|
182
153
|
|
|
183
|
-
:host(compare-bar.compare-no-motion) .bar-fill {
|
|
184
|
-
transition: none;
|
|
185
|
-
}
|
|
154
|
+
:host(compare-bar.compare-no-motion) .bar-fill { transition: none; }
|
|
186
155
|
|
|
187
156
|
@media (prefers-reduced-motion: reduce) {
|
|
188
|
-
.bar-fill {
|
|
189
|
-
transition: none;
|
|
190
|
-
}
|
|
157
|
+
.bar-fill { transition: none; }
|
|
191
158
|
}
|
|
192
159
|
|
|
193
160
|
.bar-label {
|
|
@@ -198,9 +165,7 @@ export default css`
|
|
|
198
165
|
white-space: nowrap;
|
|
199
166
|
}
|
|
200
167
|
|
|
201
|
-
.bar-score {
|
|
202
|
-
flex: 0 0 auto;
|
|
203
|
-
}
|
|
168
|
+
.bar-score { flex: 0 0 auto; }
|
|
204
169
|
|
|
205
170
|
.bar-label,
|
|
206
171
|
.bar-score {
|
|
@@ -210,11 +175,8 @@ export default css`
|
|
|
210
175
|
letter-spacing: var(--typography-body-regular-letterSpacing);
|
|
211
176
|
}
|
|
212
177
|
|
|
213
|
-
.bar-score {
|
|
214
|
-
font-variant-numeric: tabular-nums;
|
|
215
|
-
}
|
|
178
|
+
.bar-score { font-variant-numeric: tabular-nums; }
|
|
216
179
|
|
|
217
|
-
/* ── primary (Bitdefender) ── */
|
|
218
180
|
:host(compare-bar[variant="primary"]) .bar-fill {
|
|
219
181
|
background: var(--cs-bar-primary-bg);
|
|
220
182
|
}
|
|
@@ -224,7 +186,6 @@ export default css`
|
|
|
224
186
|
font-weight: var(--typography-fontWeight-semibold);
|
|
225
187
|
}
|
|
226
188
|
|
|
227
|
-
/* ── secondary ── */
|
|
228
189
|
:host(compare-bar[variant="secondary"]) .bar-fill,
|
|
229
190
|
:host(compare-bar:not([variant])) .bar-fill {
|
|
230
191
|
background: var(--cs-bar-secondary-bg);
|
|
@@ -237,32 +198,24 @@ export default css`
|
|
|
237
198
|
font-weight: var(--typography-body-regular-fontWeight);
|
|
238
199
|
}
|
|
239
200
|
|
|
240
|
-
|
|
241
|
-
/* ══════════════════════════════════════════════════════════════
|
|
242
|
-
5. THEME OVERRIDES (DS palette)
|
|
243
|
-
══════════════════════════════════════════════════════════════ */
|
|
244
|
-
|
|
245
201
|
:host(bd-compare-section.theme-green) {
|
|
246
202
|
--cs-bar-primary-bg: var(--color-green-500);
|
|
247
203
|
--cs-bar-primary-fg: var(--color-neutral-0);
|
|
248
204
|
--cs-icon-color: var(--color-green-500);
|
|
249
205
|
--cs-icon-filter: invert(35%) sepia(72%) saturate(500%) hue-rotate(100deg) brightness(95%) contrast(95%);
|
|
250
206
|
}
|
|
251
|
-
|
|
252
207
|
:host(bd-compare-section.theme-red) {
|
|
253
208
|
--cs-bar-primary-bg: var(--color-red-500);
|
|
254
209
|
--cs-bar-primary-fg: var(--color-neutral-0);
|
|
255
210
|
--cs-icon-color: var(--color-red-500);
|
|
256
211
|
--cs-icon-filter: invert(22%) sepia(90%) saturate(700%) hue-rotate(345deg) brightness(95%) contrast(95%);
|
|
257
212
|
}
|
|
258
|
-
|
|
259
213
|
:host(bd-compare-section.theme-purple) {
|
|
260
214
|
--cs-bar-primary-bg: #7c3aed;
|
|
261
215
|
--cs-bar-primary-fg: var(--color-neutral-0);
|
|
262
216
|
--cs-icon-color: #7c3aed;
|
|
263
217
|
--cs-icon-filter: invert(25%) sepia(80%) saturate(800%) hue-rotate(255deg) brightness(90%) contrast(95%);
|
|
264
218
|
}
|
|
265
|
-
|
|
266
219
|
:host(bd-compare-section.theme-dark) {
|
|
267
220
|
--cs-bar-primary-bg: var(--color-blue-400);
|
|
268
221
|
--cs-bar-primary-fg: var(--color-neutral-0);
|
|
@@ -270,17 +223,6 @@ export default css`
|
|
|
270
223
|
--cs-icon-filter: invert(65%) sepia(50%) saturate(500%) hue-rotate(195deg) brightness(105%) contrast(95%);
|
|
271
224
|
}
|
|
272
225
|
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
6. BAR SIZE VARIANTS
|
|
276
|
-
══════════════════════════════════════════════════════════════ */
|
|
277
|
-
|
|
278
|
-
:host(bd-compare-section.bars-tall) {
|
|
279
|
-
--cs-bar-height: var(--dimension-55px);
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
:host(bd-compare-section.bars-compact) {
|
|
283
|
-
--cs-bar-height: var(--dimension-40px);
|
|
284
|
-
--cs-gap: var(--spacing-24);
|
|
285
|
-
}
|
|
226
|
+
:host(bd-compare-section.bars-tall) { --cs-bar-height: var(--dimension-55px); }
|
|
227
|
+
:host(bd-compare-section.bars-compact) { --cs-bar-height: var(--dimension-40px); --cs-gap: var(--spacing-24); }
|
|
286
228
|
`;
|