@phun-ky/speccer 9.6.1 → 10.0.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.
Files changed (9) hide show
  1. package/README.md +190 -135
  2. package/dist/speccer.css +471 -472
  3. package/dist/speccer.d.ts +10 -10
  4. package/dist/speccer.esm.js +2 -2
  5. package/dist/speccer.esm.js.map +1 -1
  6. package/dist/speccer.js +2 -2
  7. package/dist/speccer.js.map +1 -1
  8. package/dist/speccer.min.css +1 -1
  9. package/package.json +1 -1
package/dist/speccer.css CHANGED
@@ -1,34 +1,48 @@
1
1
  .ph-speccer.speccer {
2
- --ph-speccer-color-padding: rgba(219,111,255,0.4);
3
- --ph-speccer-color-padding-hover: #db6fff;
4
- --ph-speccer-color-margin: rgba(255,247,111,0.4);
5
- --ph-speccer-color-margin-hover: #fff76f;
6
- --ph-speccer-color-text-light: #fff;
7
- --ph-speccer-color-text-dark: #333;
8
- --ph-speccer-color-contrast: #ff3aa8;
9
- --ph-speccer-mark-background-color: rgba(255,58,168,0.2);
10
- --ph-speccer-mark-border-color: #ff3aa8;
11
- --ph-speccer-spacing-color: var(--ph-speccer-color-contrast);
12
- --ph-speccer-measure-color: #f00;
13
- --ph-speccer-pin-color: var(--ph-speccer-color-contrast);
14
- --ph-speccer-typography-background-color: #fff;
15
- --ph-speccer-typography-color-property: #0074e8;
16
- --ph-speccer-typography-color-text: #ff3aa8;
17
- --ph-speccer-typography-color-value: var(--ph-speccer-color-contrast);
18
- --ph-speccer-depth-opacity-400: 0.4;
19
- --ph-speccer-font-family: "Menlo for Powerline", "Menlo Regular for Powerline", "DejaVu Sans Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
20
- --ph-speccer-font-size: 12px;
21
- --ph-speccer-line-height: 12px;
2
+ --ph-speccer-color-artificialStrawberry: #ff3aa8;
3
+ --ph-speccer-color-venusSlipperOrchid: #db6fff;
4
+ --ph-speccer-color-superBanana: #fff76f;
5
+ --ph-speccer-color-white: #fff;
6
+ --ph-speccer-color-carbon: #333;
7
+ --ph-speccer-color-red: #f00;
8
+ --ph-speccer-color-niuZaiSeDenim: #0074e8;
9
+ --ph-speccer-color-beautifulBlue: #1868b2;
10
+ --ph-speccer-color-fuchsiaBlue: #7e60c5;
11
+ }
12
+
13
+ .ph-speccer.speccer{
14
+ --ph-speccer-base-color: var(--ph-speccer-color-artificialStrawberry);
15
+ --ph-speccer-spacing-color: var(--ph-speccer-base-color);
16
+ --ph-speccer-spacing-color-padding: rgb(from var(--ph-speccer-color-venusSlipperOrchid) r g b / var(--ph-speccer-opacity-40));
17
+ --ph-speccer-spacing-color-padding-hover: var(--ph-speccer-color-venusSlipperOrchid);
18
+ --ph-speccer-spacing-color-margin: rgb(from var(--ph-speccer-color-superBanana) r g b / var(--ph-speccer-opacity-40));
19
+ --ph-speccer-spacing-color-margin-hover: var(--ph-speccer-color-superBanana);
20
+ --ph-speccer-typography-background-color: var(--ph-speccer-color-white);
21
+ --ph-speccer-typography-color-property: var(--ph-speccer-color-niuZaiSeDenim);
22
+ --ph-speccer-typography-color-text: var(--ph-speccer-base-color);
23
+ --ph-speccer-typography-color-value: var(--ph-speccer-base-color);
24
+ --ph-speccer-mark-background-color: rgb(from var(--ph-speccer-base-color) r g b / var(--ph-speccer-opacity-20));
25
+ --ph-speccer-mark-border-color: var(--ph-speccer-base-color);
26
+ --ph-speccer-mark-border-width: 1px;
27
+ --ph-speccer-mark-border-style: solid;
28
+ --ph-speccer-measure-color: var(--ph-speccer-color-red);
29
+ --ph-speccer-measure-size: 8px;
30
+ --ph-speccer-a11y-color-bakground: var(--ph-speccer-color-beautifulBlue);
31
+ --ph-speccer-a11y-landmark-color-background: var(--ph-speccer-color-fuchsiaBlue);
32
+ --ph-speccer-color-text-light: var(--ph-speccer-color-white);
33
+ --ph-speccer-color-text-dark: var(--ph-speccer-color-carbon);
34
+ --ph-speccer-pin-color: var(--ph-speccer-base-color);
22
35
  --ph-speccer-pin-size: 24px;
23
36
  --ph-speccer-pin-space: 48px;
37
+ --ph-speccer-line-height: 12px;
24
38
  --ph-speccer-line-width: 1px;
25
39
  --ph-speccer-line-width-negative: -1px;
26
- --ph-speccer-measure-size: 8px;
27
- --ph-speccer-a11y-color-background: #1868b2;
28
- --ph-speccer-a11y-landmark-color-background: #7e60c5;
40
+ --ph-speccer-opacity-20: 0.2;
41
+ --ph-speccer-opacity-40: 0.4;
42
+ --ph-speccer-font-family: "Menlo for Powerline", "Menlo Regular for Powerline", "DejaVu Sans Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
43
+ --ph-speccer-font-size: 12px;
29
44
  --ph-speccer-transition-default: all 2s cubic-bezier(0.4, 0, 0.2, 1);
30
45
  }
31
- svg.ph-speccer,
32
46
  .ph-speccer.speccer,
33
47
  .ph-speccer.speccer::after,
34
48
  .ph-speccer.speccer::before {
@@ -50,6 +64,13 @@ svg.ph-speccer,
50
64
  font-size: 12px;
51
65
  line-height: 12px;
52
66
  }
67
+ svg.ph-speccer {
68
+ pointer-events: none;
69
+ user-select: none;
70
+ box-sizing: border-box;
71
+ margin: 0;
72
+ padding: 0;
73
+ }
53
74
  #ph-speccer-svg {
54
75
  position: absolute;
55
76
  top: 0;
@@ -61,9 +82,12 @@ svg.ph-speccer,
61
82
  }
62
83
  svg.ph-speccer .ph-speccer.path,
63
84
  svg.ph-speccer .ph-speccer.circle {
64
- color: var(--ph-speccer-color-contrast, #ff3aa8);
85
+ color: var(--ph-speccer-base-color, #ff3aa8);
86
+ }
87
+ [data-speccer="pin-area"] {
88
+ counter-reset: type;
65
89
  }
66
- .ph-speccer.speccer.dissection {
90
+ .ph-speccer.speccer.pin {
67
91
  font-family: sans-serif;
68
92
  height: var(--ph-speccer-pin-size);
69
93
  width: var(--ph-speccer-pin-size);
@@ -79,7 +103,7 @@ svg.ph-speccer .ph-speccer.circle {
79
103
  font-size: 16px;
80
104
  z-index: 100000;
81
105
  }
82
- .ph-speccer.speccer.dissection::after {
106
+ .ph-speccer.speccer.pin::after {
83
107
  content: "";
84
108
  position: absolute;
85
109
  height: var(--ph-speccer-pin-space);
@@ -88,255 +112,230 @@ svg.ph-speccer .ph-speccer.circle {
88
112
  background-color: var(--ph-speccer-pin-color);
89
113
  z-index: 99999;
90
114
  }
91
- .ph-speccer.speccer.dissection.svg::after,
92
- .ph-speccer.speccer.dissection.curly::after {
115
+ .ph-speccer.speccer.pin.svg::after,
116
+ .ph-speccer.speccer.pin.curly::after {
93
117
  content: none !important;
94
118
  }
95
- .ph-speccer.speccer.dissection.outline::after,
96
- .ph-speccer.speccer.dissection.outline.top::after {
119
+ .ph-speccer.speccer.pin::after,
120
+ .ph-speccer.speccer.pin.top::after {
97
121
  height: var(--ph-speccer-pin-space);
98
122
  width: var(--ph-speccer-line-width);
99
123
  top: 100%;
100
124
  right: 50%;
101
125
  }
102
- .ph-speccer.speccer.dissection.outline.left::after {
126
+ .ph-speccer.speccer.pin.left::after {
103
127
  height: var(--ph-speccer-line-width);
104
128
  width: var(--ph-speccer-pin-space);
105
129
  top: 50%;
106
130
  left: 100%;
107
131
  right: auto;
108
132
  }
109
- .ph-speccer.speccer.dissection.outline.right::after {
133
+ .ph-speccer.speccer.pin.right::after {
110
134
  height: var(--ph-speccer-line-width);
111
135
  width: var(--ph-speccer-pin-space);
112
136
  top: 50%;
113
137
  left: auto;
114
138
  right: 100%;
115
139
  }
116
- .ph-speccer.speccer.dissection.outline.bottom::after {
140
+ .ph-speccer.speccer.pin.bottom::after {
117
141
  height: var(--ph-speccer-pin-space);
118
142
  width: var(--ph-speccer-line-width);
119
143
  top: calc(-100% - (var(--ph-speccer-pin-space) / 2));
120
144
  right: 50%;
121
145
  }
122
- .ph-speccer.speccer.dissection::after {
123
- content: "";
124
- position: absolute;
125
- height: var(--ph-speccer-pin-space);
126
- top: 100%;
127
- width: var(--ph-speccer-line-width);
128
- background-color: var(--ph-speccer-pin-color);
129
- z-index: 99999;
130
- }
131
- .ph-speccer.speccer.dissection.outline.left::after {
146
+ .ph-speccer.speccer.pin.left::after {
132
147
  height: var(--ph-speccer-line-width);
133
148
  width: var(--ph-speccer-pin-space);
134
149
  top: 50%;
135
150
  left: 100%;
136
151
  }
137
- .ph-speccer.speccer.dissection.outline.right::after {
152
+ .ph-speccer.speccer.pin.right::after {
138
153
  height: var(--ph-speccer-line-width);
139
154
  width: var(--ph-speccer-pin-space);
140
155
  top: 50%;
141
156
  right: 100%;
142
157
  }
143
- .ph-speccer.speccer.dissection.outline.enclose {
158
+ .ph-speccer.speccer.pin.enclose {
144
159
  border-radius: 0;
145
160
  background-color: transparent;
146
161
  color: var(--ph-speccer-measure-color);
147
162
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
148
163
  }
149
- .ph-speccer.speccer.dissection.outline.enclose::after {
164
+ .ph-speccer.speccer.pin.enclose::after {
150
165
  top: calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));
151
166
  bottom: auto;
152
167
  }
153
- .ph-speccer.speccer.dissection.outline.enclose::before {
168
+ .ph-speccer.speccer.pin.enclose::before {
154
169
  bottom: 100%;
155
170
  top: auto;
156
171
  }
157
- .ph-speccer.speccer.dissection.outline.enclose.right::after {
172
+ .ph-speccer.speccer.pin.enclose.right::after {
158
173
  left: calc(100% + calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width)));
159
174
  right: auto;
160
175
  }
161
- .ph-speccer.speccer.dissection.outline.enclose.right::before {
176
+ .ph-speccer.speccer.pin.enclose.right::before {
162
177
  left: 100%;
163
178
  right: auto;
164
179
  }
165
- .ph-speccer.speccer.dissection.outline.enclose.left::after {
180
+ .ph-speccer.speccer.pin.enclose.left::after {
166
181
  left: calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));
167
182
  right: auto;
168
183
  }
169
- .ph-speccer.speccer.dissection.outline.enclose.left::before {
184
+ .ph-speccer.speccer.pin.enclose.left::before {
170
185
  right: 100%;
171
186
  left: auto;
172
187
  }
173
- .ph-speccer.speccer.dissection.outline.enclose.top::after {
188
+ .ph-speccer.speccer.pin.enclose.top::after {
174
189
  top: calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));
175
190
  bottom: auto;
176
191
  }
177
- .ph-speccer.speccer.dissection.outline.enclose.top::before {
192
+ .ph-speccer.speccer.pin.enclose.top::before {
178
193
  bottom: 100%;
179
194
  top: auto;
180
195
  }
181
- .ph-speccer.speccer.dissection.outline.enclose.bottom::after {
196
+ .ph-speccer.speccer.pin.enclose.bottom::after {
182
197
  top: calc(100% + calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width)));
183
198
  bottom: auto;
184
199
  }
185
- .ph-speccer.speccer.dissection.outline.enclose.bottom::before {
200
+ .ph-speccer.speccer.pin.enclose.bottom::before {
186
201
  top: 100%;
187
202
  bottom: auto;
188
203
  }
189
- .ph-speccer.speccer.dissection.outline.full:not(.curly) {
204
+ .ph-speccer.speccer.pin.enclose.right,
205
+ .ph-speccer.speccer.pin.enclose.left {
206
+ width: 8px;
207
+ }
208
+ .ph-speccer.speccer.pin.enclose,
209
+ .ph-speccer.speccer.pin.enclose.top,
210
+ .ph-speccer.speccer.pin.enclose.bottom {
211
+ height: 8px;
212
+ }
213
+ .ph-speccer.speccer.pin.enclose::after,
214
+ .ph-speccer.speccer.pin.enclose.right::after,
215
+ .ph-speccer.speccer.pin.enclose.left::after,
216
+ .ph-speccer.speccer.pin.enclose.top::after,
217
+ .ph-speccer.speccer.pin.enclose.bottom::after {
218
+ content: attr(data-pin-counter);
219
+ height: var(--ph-speccer-pin-size);
220
+ width: var(--ph-speccer-pin-size);
221
+ display: flex;
222
+ position: absolute;
223
+ border-radius: 100%;
224
+ background-color: var(--ph-speccer-pin-color);
225
+ color: var(--ph-speccer-color-text-light);
226
+ align-items: center;
227
+ justify-content: center;
228
+ line-height: 150%;
229
+ font-size: 16px;
230
+ z-index: 100000;
231
+ }
232
+ .ph-speccer.speccer.pin.enclose.right::after,
233
+ .ph-speccer.speccer.pin.enclose.left::after {
234
+ top: 50%;
235
+ transform: translateY(-50%);
236
+ }
237
+ .ph-speccer.speccer.pin.enclose::after,
238
+ .ph-speccer.speccer.pin.enclose.top::after,
239
+ .ph-speccer.speccer.pin.enclose.bottom::after {
240
+ left: 50%;
241
+ transform: translateX(-50%);
242
+ }
243
+ .ph-speccer.speccer.pin.enclose::before,
244
+ .ph-speccer.speccer.pin.enclose.right::before,
245
+ .ph-speccer.speccer.pin.enclose.left::before,
246
+ .ph-speccer.speccer.pin.enclose.top::before,
247
+ .ph-speccer.speccer.pin.enclose.bottom::before {
248
+ content: "";
249
+ position: absolute;
250
+ background-color: var(--ph-speccer-pin-color);
251
+ z-index: 100000;
252
+ display: block;
253
+ }
254
+ .ph-speccer.speccer.pin.enclose.right::before,
255
+ .ph-speccer.speccer.pin.enclose.left::before {
256
+ top: 50%;
257
+ transform: translateY(-50%);
258
+ height: var(--ph-speccer-line-width);
259
+ width: calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));
260
+ }
261
+ .ph-speccer.speccer.pin.enclose::before,
262
+ .ph-speccer.speccer.pin.enclose.top::before,
263
+ .ph-speccer.speccer.pin.enclose.bottom::before {
264
+ left: 50%;
265
+ transform: translateX(-50%);
266
+ width: var(--ph-speccer-line-width);
267
+ height: calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));
268
+ }
269
+ .ph-speccer.speccer.pin.bracket:not(.curly) {
190
270
  border-radius: 0;
191
271
  background-color: transparent;
192
272
  color: var(--ph-speccer-measure-color);
193
273
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
194
274
  border-bottom: none;
195
275
  }
196
- .ph-speccer.speccer.dissection.outline.full:not(.curly)::after {
276
+ .ph-speccer.speccer.pin.bracket:not(.curly)::after {
197
277
  top: calc(-8px - var(--ph-speccer-pin-space));
198
278
  }
199
- .ph-speccer.speccer.dissection.outline.full:not(.curly)::before {
279
+ .ph-speccer.speccer.pin.bracket:not(.curly)::before {
200
280
  bottom: 100%;
201
281
  }
202
- .ph-speccer.speccer.dissection.outline.full:not(.curly).right {
282
+ .ph-speccer.speccer.pin.bracket:not(.curly).right {
203
283
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
204
284
  border-left: none;
205
285
  }
206
- .ph-speccer.speccer.dissection.outline.full:not(.curly).right::after {
286
+ .ph-speccer.speccer.pin.bracket:not(.curly).right::after {
207
287
  left: calc(8px + var(--ph-speccer-pin-space));
208
288
  }
209
- .ph-speccer.speccer.dissection.outline.full:not(.curly).right::before {
289
+ .ph-speccer.speccer.pin.bracket:not(.curly).right::before {
210
290
  left: 100%;
211
291
  right: auto;
212
292
  }
213
- .ph-speccer.speccer.dissection.outline.full:not(.curly).left {
293
+ .ph-speccer.speccer.pin.bracket:not(.curly).left {
214
294
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
215
295
  border-right: none;
216
296
  }
217
- .ph-speccer.speccer.dissection.outline.full:not(.curly).left::after {
297
+ .ph-speccer.speccer.pin.bracket:not(.curly).left::after {
218
298
  left: calc(-8px - var(--ph-speccer-pin-space));
219
299
  }
220
- .ph-speccer.speccer.dissection.outline.full:not(.curly).left::before {
300
+ .ph-speccer.speccer.pin.bracket:not(.curly).left::before {
221
301
  right: 100%;
222
302
  left: auto;
223
303
  }
224
- .ph-speccer.speccer.dissection.outline.full:not(.curly).top {
304
+ .ph-speccer.speccer.pin.bracket:not(.curly).top {
225
305
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
226
306
  border-bottom: none;
227
307
  }
228
- .ph-speccer.speccer.dissection.outline.full:not(.curly).top::after {
308
+ .ph-speccer.speccer.pin.bracket:not(.curly).top::after {
229
309
  top: calc(-8px - var(--ph-speccer-pin-space));
230
310
  }
231
- .ph-speccer.speccer.dissection.outline.full:not(.curly).top::before {
311
+ .ph-speccer.speccer.pin.bracket:not(.curly).top::before {
232
312
  bottom: 100%;
233
313
  }
234
- .ph-speccer.speccer.dissection.outline.full:not(.curly).bottom {
314
+ .ph-speccer.speccer.pin.bracket:not(.curly).bottom {
235
315
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
236
316
  border-top: none;
237
317
  }
238
- .ph-speccer.speccer.dissection.outline.full:not(.curly).bottom::after {
318
+ .ph-speccer.speccer.pin.bracket:not(.curly).bottom::after {
239
319
  top: calc(8px + var(--ph-speccer-pin-space));
240
320
  }
241
- .ph-speccer.speccer.dissection.outline.full:not(.curly).bottom::before {
242
- top: 100%;
243
- }
244
- .ph-speccer.speccer.dissection.outline.bottom::after {
245
- height: var(--ph-speccer-pin-space);
246
- width: var(--ph-speccer-line-width);
247
- top: calc(-100% - (var(--ph-speccer-pin-space) / 2));
248
- right: 50%;
249
- }
250
- .ph-speccer.speccer.dissection.outline.top::after,
251
- .ph-speccer.speccer.dissection.outline::after {
252
- height: var(--ph-speccer-pin-space);
253
- width: var(--ph-speccer-line-width);
321
+ .ph-speccer.speccer.pin.bracket:not(.curly).bottom::before {
254
322
  top: 100%;
255
- right: 50%;
256
- }
257
- [data-anatomy-section] {
258
- counter-reset: type;
259
- }
260
- .ph-speccer.speccer.dissection.outline.full.right:not(.curly),
261
- .ph-speccer.speccer.dissection.outline.full.left:not(.curly) {
262
- width: 8px;
263
- }
264
- .ph-speccer.speccer.dissection.outline.full:not(.curly),
265
- .ph-speccer.speccer.dissection.outline.full.top:not(.curly),
266
- .ph-speccer.speccer.dissection.outline.full.bottom:not(.curly) {
267
- height: 8px;
268
- }
269
- .ph-speccer.speccer.dissection.outline.full:not(.curly)::after,
270
- .ph-speccer.speccer.dissection.outline.full.right:not(.curly)::after,
271
- .ph-speccer.speccer.dissection.outline.full.left:not(.curly)::after,
272
- .ph-speccer.speccer.dissection.outline.full.top:not(.curly)::after,
273
- .ph-speccer.speccer.dissection.outline.full.bottom:not(.curly)::after {
274
- content: attr(data-dissection-counter);
275
- height: var(--ph-speccer-pin-size);
276
- width: var(--ph-speccer-pin-size);
277
- display: flex;
278
- position: absolute;
279
- border-radius: 100%;
280
- background-color: var(--ph-speccer-pin-color);
281
- color: var(--ph-speccer-color-text-light);
282
- align-items: center;
283
- justify-content: center;
284
- line-height: 150%;
285
- font-size: 16px;
286
- z-index: 100000;
287
- }
288
- .ph-speccer.speccer.dissection.outline.full.right:not(.curly)::after,
289
- .ph-speccer.speccer.dissection.outline.full.left:not(.curly)::after {
290
- top: 50%;
291
- transform: translateY(-50%);
292
- }
293
- .ph-speccer.speccer.dissection.outline.full:not(.curly)::after,
294
- .ph-speccer.speccer.dissection.outline.full.top:not(.curly)::after,
295
- .ph-speccer.speccer.dissection.outline.full.bottom:not(.curly)::after {
296
- left: 50%;
297
- transform: translateX(-50%);
298
- }
299
- .ph-speccer.speccer.dissection.outline.full:not(.curly)::before,
300
- .ph-speccer.speccer.dissection.outline.full.right:not(.curly)::before,
301
- .ph-speccer.speccer.dissection.outline.full.left:not(.curly)::before,
302
- .ph-speccer.speccer.dissection.outline.full.top:not(.curly)::before,
303
- .ph-speccer.speccer.dissection.outline.full.bottom:not(.curly)::before {
304
- content: "";
305
- position: absolute;
306
- background-color: var(--ph-speccer-pin-color);
307
- z-index: 100000;
308
- display: block;
309
- }
310
- .ph-speccer.speccer.dissection.outline.full.right:not(.curly)::before,
311
- .ph-speccer.speccer.dissection.outline.full.left:not(.curly)::before {
312
- top: 50%;
313
- transform: translateY(-50%);
314
- height: var(--ph-speccer-line-width);
315
- width: calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));
316
- }
317
- .ph-speccer.speccer.dissection.outline.full:not(.curly)::before,
318
- .ph-speccer.speccer.dissection.outline.full.top:not(.curly)::before,
319
- .ph-speccer.speccer.dissection.outline.full.bottom:not(.curly)::before {
320
- left: 50%;
321
- transform: translateX(-50%);
322
- width: var(--ph-speccer-line-width);
323
- height: calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));
324
323
  }
325
- .ph-speccer.speccer.dissection.outline.enclose.right,
326
- .ph-speccer.speccer.dissection.outline.enclose.left {
324
+ .ph-speccer.speccer.pin.bracket.right:not(.curly),
325
+ .ph-speccer.speccer.pin.bracket.left:not(.curly) {
327
326
  width: 8px;
328
327
  }
329
- .ph-speccer.speccer.dissection.outline.enclose,
330
- .ph-speccer.speccer.dissection.outline.enclose.top,
331
- .ph-speccer.speccer.dissection.outline.enclose.bottom {
328
+ .ph-speccer.speccer.pin.bracket:not(.curly),
329
+ .ph-speccer.speccer.pin.bracket.top:not(.curly),
330
+ .ph-speccer.speccer.pin.bracket.bottom:not(.curly) {
332
331
  height: 8px;
333
332
  }
334
- .ph-speccer.speccer.dissection.outline.enclose::after,
335
- .ph-speccer.speccer.dissection.outline.enclose.right::after,
336
- .ph-speccer.speccer.dissection.outline.enclose.left::after,
337
- .ph-speccer.speccer.dissection.outline.enclose.top::after,
338
- .ph-speccer.speccer.dissection.outline.enclose.bottom::after {
339
- content: attr(data-dissection-counter);
333
+ .ph-speccer.speccer.pin.bracket:not(.curly)::after,
334
+ .ph-speccer.speccer.pin.bracket.right:not(.curly)::after,
335
+ .ph-speccer.speccer.pin.bracket.left:not(.curly)::after,
336
+ .ph-speccer.speccer.pin.bracket.top:not(.curly)::after,
337
+ .ph-speccer.speccer.pin.bracket.bottom:not(.curly)::after {
338
+ content: attr(data-pin-counter);
340
339
  height: var(--ph-speccer-pin-size);
341
340
  width: var(--ph-speccer-pin-size);
342
341
  display: flex;
@@ -350,228 +349,237 @@ svg.ph-speccer .ph-speccer.circle {
350
349
  font-size: 16px;
351
350
  z-index: 100000;
352
351
  }
353
- .ph-speccer.speccer.dissection.outline.enclose.right::after,
354
- .ph-speccer.speccer.dissection.outline.enclose.left::after {
352
+ .ph-speccer.speccer.pin.bracket.right:not(.curly)::after,
353
+ .ph-speccer.speccer.pin.bracket.left:not(.curly)::after {
355
354
  top: 50%;
356
355
  transform: translateY(-50%);
357
356
  }
358
- .ph-speccer.speccer.dissection.outline.enclose::after,
359
- .ph-speccer.speccer.dissection.outline.enclose.top::after,
360
- .ph-speccer.speccer.dissection.outline.enclose.bottom::after {
357
+ .ph-speccer.speccer.pin.bracket:not(.curly)::after,
358
+ .ph-speccer.speccer.pin.bracket.top:not(.curly)::after,
359
+ .ph-speccer.speccer.pin.bracket.bottom:not(.curly)::after {
361
360
  left: 50%;
362
361
  transform: translateX(-50%);
363
362
  }
364
- .ph-speccer.speccer.dissection.outline.enclose::before,
365
- .ph-speccer.speccer.dissection.outline.enclose.right::before,
366
- .ph-speccer.speccer.dissection.outline.enclose.left::before,
367
- .ph-speccer.speccer.dissection.outline.enclose.top::before,
368
- .ph-speccer.speccer.dissection.outline.enclose.bottom::before {
363
+ .ph-speccer.speccer.pin.bracket:not(.curly)::before,
364
+ .ph-speccer.speccer.pin.bracket.right:not(.curly)::before,
365
+ .ph-speccer.speccer.pin.bracket.left:not(.curly)::before,
366
+ .ph-speccer.speccer.pin.bracket.top:not(.curly)::before,
367
+ .ph-speccer.speccer.pin.bracket.bottom:not(.curly)::before {
369
368
  content: "";
370
369
  position: absolute;
371
370
  background-color: var(--ph-speccer-pin-color);
372
371
  z-index: 100000;
373
372
  display: block;
374
373
  }
375
- .ph-speccer.speccer.dissection.outline.enclose.right::before,
376
- .ph-speccer.speccer.dissection.outline.enclose.left::before {
374
+ .ph-speccer.speccer.pin.bracket.right:not(.curly)::before,
375
+ .ph-speccer.speccer.pin.bracket.left:not(.curly)::before {
377
376
  top: 50%;
378
377
  transform: translateY(-50%);
379
378
  height: var(--ph-speccer-line-width);
380
379
  width: calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));
381
380
  }
382
- .ph-speccer.speccer.dissection.outline.enclose::before,
383
- .ph-speccer.speccer.dissection.outline.enclose.top::before,
384
- .ph-speccer.speccer.dissection.outline.enclose.bottom::before {
381
+ .ph-speccer.speccer.pin.bracket:not(.curly)::before,
382
+ .ph-speccer.speccer.pin.bracket.top:not(.curly)::before,
383
+ .ph-speccer.speccer.pin.bracket.bottom:not(.curly)::before {
385
384
  left: 50%;
386
385
  transform: translateX(-50%);
387
386
  width: var(--ph-speccer-line-width);
388
387
  height: calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));
389
388
  }
390
- .ph-speccer.speccer.dissection.outline.subtle {
389
+ .ph-speccer.speccer.pin.subtle {
391
390
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
392
391
  background-color: var(--ph-speccer-color-text-light);
393
392
  color: var(--ph-speccer-pin-color);
394
393
  }
395
- .ph-speccer.speccer.dissection.outline.subtle.top::after,
396
- .ph-speccer.speccer.dissection.outline.subtle.bottom::after {
394
+ .ph-speccer.speccer.pin.subtle.top::after,
395
+ .ph-speccer.speccer.pin.subtle.bottom::after {
397
396
  width: 0;
398
397
  background-color: transparent;
399
398
  border-right: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
400
399
  }
401
- .ph-speccer.speccer.dissection.outline.subtle.right::after,
402
- .ph-speccer.speccer.dissection.outline.subtle.left::after {
400
+ .ph-speccer.speccer.pin.subtle.right::after,
401
+ .ph-speccer.speccer.pin.subtle.left::after {
403
402
  height: 0;
404
403
  background-color: transparent;
405
404
  border-top: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
406
405
  }
407
- .ph-speccer.speccer.dissection.outline.enclose.subtle {
406
+ .ph-speccer.speccer.pin.enclose.subtle {
408
407
  background-color: transparent;
409
408
  }
410
- .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly) {
409
+ .ph-speccer.speccer.pin.bracket.subtle:not(.curly) {
411
410
  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
412
411
  background-color: transparent;
413
412
  border-bottom: none;
414
413
  }
415
- .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly).top {
414
+ .ph-speccer.speccer.pin.bracket.subtle:not(.curly).top {
416
415
  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
417
416
  border-bottom: none;
418
417
  }
419
- .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly).bottom {
418
+ .ph-speccer.speccer.pin.bracket.subtle:not(.curly).bottom {
420
419
  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
421
420
  border-top: none;
422
421
  }
423
- .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly).right {
422
+ .ph-speccer.speccer.pin.bracket.subtle:not(.curly).right {
424
423
  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
425
424
  border-left: none;
426
425
  }
427
- .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly).left {
426
+ .ph-speccer.speccer.pin.bracket.subtle:not(.curly).left {
428
427
  border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
429
428
  border-right: none;
430
429
  }
431
- .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly)::after {
430
+ .ph-speccer.speccer.pin.bracket.subtle:not(.curly)::after {
432
431
  height: var(--ph-speccer-pin-size);
433
432
  width: var(--ph-speccer-pin-size);
434
433
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
435
434
  background-color: var(--ph-speccer-color-text-light);
436
435
  color: var(--ph-speccer-pin-color);
437
436
  }
438
- .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly).top::before,
439
- .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly).bottom::before {
437
+ .ph-speccer.speccer.pin.bracket.subtle:not(.curly).top::before,
438
+ .ph-speccer.speccer.pin.bracket.subtle:not(.curly).bottom::before {
440
439
  width: 0;
441
440
  background-color: transparent;
442
441
  border-right: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
443
442
  }
444
- .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly).right::before,
445
- .ph-speccer.speccer.dissection.outline.full.subtle:not(.curly).left::before {
443
+ .ph-speccer.speccer.pin.bracket.subtle:not(.curly).right::before,
444
+ .ph-speccer.speccer.pin.bracket.subtle:not(.curly).left::before {
446
445
  height: 0;
447
446
  background-color: transparent;
448
447
  border-top: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
449
448
  }
450
- .ph-speccer.speccer.dissection.outline.enclose.subtle {
449
+ .ph-speccer.speccer.pin.enclose.subtle {
451
450
  border-style: dashed;
452
451
  }
453
- .ph-speccer.speccer.dissection.outline.enclose.subtle::after {
452
+ .ph-speccer.speccer.pin.enclose.subtle::after {
454
453
  height: var(--ph-speccer-pin-size);
455
454
  width: var(--ph-speccer-pin-size);
456
455
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
457
456
  background-color: var(--ph-speccer-color-text-light);
458
457
  color: var(--ph-speccer-pin-color);
459
458
  }
460
- .ph-speccer.speccer.dissection.outline.enclose.subtle.top::before,
461
- .ph-speccer.speccer.dissection.outline.enclose.subtle.bottom::before {
459
+ .ph-speccer.speccer.pin.enclose.subtle.top::before,
460
+ .ph-speccer.speccer.pin.enclose.subtle.bottom::before {
462
461
  width: 0;
463
462
  background-color: transparent;
464
463
  border-right: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
465
464
  }
466
- .ph-speccer.speccer.dissection.outline.enclose.subtle.right::before,
467
- .ph-speccer.speccer.dissection.outline.enclose.subtle.left::before {
465
+ .ph-speccer.speccer.pin.enclose.subtle.right::before,
466
+ .ph-speccer.speccer.pin.enclose.subtle.left::before {
468
467
  height: 0;
469
468
  background-color: transparent;
470
469
  border-top: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
471
470
  }
472
- .ph-speccer.speccer.spacing {
471
+ .ph-speccer.speccer.a11y.landmark {
472
+ position: absolute;
473
+ height: 48px;
474
+ width: 48px;
475
+ background-color: var(--ph-speccer-a11y-landmark-color-background);
476
+ border-radius: 0.5rem;
477
+ color: var(--ph-speccer-color-text-light);
478
+ font-family: var(--ph-speccer-font-family);
479
+ border: 3px solid var(--ph-speccer-a11y-landmark-color-background);
480
+ box-shadow: inset 0 0 0 2px var(--ph-speccer-color-text-light);
481
+ justify-content: center;
482
+ font-size: 1rem;
483
+ line-height: 100%;
484
+ align-items: center;
485
+ padding: 0.5rem;
473
486
  pointer-events: auto;
474
- transition: none;
475
- border: var(--ph-speccer-line-width) solid transparent;
476
- }
477
- .ph-speccer.speccer.spacing:hover {
478
- border: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
479
- }
480
- .ph-speccer.speccer.spacing.margin {
481
- background-color: var(--ph-speccer-color-margin);
482
- color: var(--ph-speccer-color-text-dark);
483
- }
484
- .ph-speccer.speccer.spacing.padding {
485
- background-color: var(--ph-speccer-color-padding);
486
- color: var(--ph-speccer-spacing-color);
487
487
  }
488
- .ph-speccer.speccer.spacing.margin.bottom::after,
489
- .ph-speccer.speccer.spacing.margin.top::after {
490
- transition: none;
488
+ .ph-speccer.speccer.a11y.landmark::after {
489
+ top: 100%;
490
+ left: 50%;
491
+ border: solid transparent;
491
492
  content: "";
493
+ height: 0;
494
+ width: 0;
492
495
  position: absolute;
493
- height: 100%;
494
- border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
495
- border-bottom: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
496
- width: 9px;
497
- left: 40%;
496
+ pointer-events: none;
497
+ border-color: rgba(126,96,197,0);
498
+ border-top-color: var(--ph-speccer-a11y-landmark-color-background);
499
+ border-width: 12px;
500
+ margin-left: -12px;
498
501
  }
499
- .ph-speccer.speccer.spacing.margin.bottom::before,
500
- .ph-speccer.speccer.spacing.margin.top::before {
501
- transition: none;
502
- content: "";
502
+ .ph-speccer.speccer.a11y.region {
503
503
  position: absolute;
504
- height: 100%;
505
- border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
506
- margin-left: 4px;
507
- width: 0;
508
- left: 40%;
504
+ outline: 2px solid var(--ph-speccer-a11y-landmark-color-background);
505
+ outline-offset: 2px;
509
506
  }
510
- .ph-speccer.speccer.spacing.margin.left::after,
511
- .ph-speccer.speccer.spacing.margin.right::after {
512
- transition: none;
513
- content: "";
514
- position: absolute;
515
- height: 9px;
516
- border-right: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
517
- border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
518
- width: 100%;
519
- top: 10%;
507
+ [data-speccer*="a11y"] {
508
+ counter-reset: speccer-a11y-tabstops;
520
509
  }
521
- .ph-speccer.speccer.spacing.margin.left::before,
522
- .ph-speccer.speccer.spacing.margin.right::before {
523
- transition: none;
524
- content: "";
510
+ .ph-speccer.speccer.a11y.tabstops {
525
511
  position: absolute;
526
- height: 0;
527
- border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
528
- margin-top: 4px;
529
- width: 100%;
530
- top: 10%;
512
+ height: 48px;
513
+ width: 48px;
514
+ background-color: var(--ph-speccer-a11y-color-background);
515
+ border-radius: 0.5rem;
516
+ color: var(--ph-speccer-color-text-light);
517
+ font-family: var(--ph-speccer-font-family);
518
+ counter-increment: speccer-a11y-tabstops;
519
+ border: 3px solid var(--ph-speccer-a11y-color-background);
531
520
  }
532
- .ph-speccer.speccer.spacing.padding.bottom::after,
533
- .ph-speccer.speccer.spacing.padding.top::after {
534
- transition: none;
535
- content: "";
521
+ .ph-speccer.speccer.a11y.tabstops::before {
536
522
  position: absolute;
537
- height: 100%;
538
- border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
539
- border-bottom: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
540
- width: 9px;
541
- left: 40%;
523
+ top: calc(0.5rem - 2px);
524
+ left: calc(0.5rem - 2px);
525
+ content: counter(speccer-a11y-tabstops);
526
+ font-size: 12px;
527
+ text-align: left;
542
528
  }
543
- .ph-speccer.speccer.spacing.padding.bottom::before,
544
- .ph-speccer.speccer.spacing.padding.top::before {
545
- transition: none;
546
- content: "";
529
+ .ph-speccer.speccer.a11y.tabstops::after {
530
+ display: flex;
531
+ justify-content: flex-end;
532
+ align-items: flex-end;
547
533
  position: absolute;
548
- height: 100%;
549
- border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
550
- margin-left: 4px;
551
- width: 0;
552
- left: 40%;
534
+ left: 0.5rem;
535
+ right: 0.5rem;
536
+ bottom: 0.5rem;
537
+ height: 2rem;
538
+ content: "⇥";
539
+ font-size: 2rem;
540
+ color: var(--ph-speccer-color-text-light);
541
+ font-family: var(--ph-speccer-font-family);
553
542
  }
554
- .ph-speccer.speccer.spacing.padding.left::after,
555
- .ph-speccer.speccer.spacing.padding.right::after {
556
- transition: none;
557
- content: "";
543
+ .ph-speccer.speccer.a11y.shortcut-holder {
558
544
  position: absolute;
559
- height: 9px;
560
- border-right: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
561
- border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
562
- width: 100%;
563
- top: 10%;
545
+ height: 48px;
546
+ min-width: 120px;
547
+ display: flex;
548
+ flex-direction: row;
549
+ justify-content: flex-start;
550
+ align-items: center;
551
+ grid-gap: 0.5rem;
564
552
  }
565
- .ph-speccer.speccer.spacing.padding.left::before,
566
- .ph-speccer.speccer.spacing.padding.right::before {
567
- transition: none;
568
- content: "";
569
- position: absolute;
570
- height: 0;
571
- border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
572
- margin-top: 4px;
573
- width: 100%;
574
- top: 10%;
553
+ .ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut {
554
+ flex-shrink: 0;
555
+ position: relative;
556
+ background-color: var(--ph-speccer-a11y-color-background);
557
+ border-radius: 0.5rem;
558
+ color: var(--ph-speccer-color-text-light);
559
+ font-family: var(--ph-speccer-font-family);
560
+ display: inline-flex;
561
+ text-transform: uppercase;
562
+ height: 48px;
563
+ border: 3px solid var(--ph-speccer-a11y-color-background);
564
+ min-width: 48px;
565
+ font-size: 1.5rem;
566
+ justify-content: center;
567
+ align-items: center;
568
+ }
569
+ .ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut.modifier {
570
+ justify-content: flex-start;
571
+ align-items: flex-end;
572
+ padding: 0.25rem;
573
+ font-size: 1rem;
574
+ width: 80px;
575
+ text-transform: lowercase;
576
+ }
577
+ .ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut.physical {
578
+ justify-content: flex-start;
579
+ align-items: flex-end;
580
+ padding: 0.25rem;
581
+ font-size: 1rem;
582
+ text-transform: lowercase;
575
583
  }
576
584
  .ph-speccer.speccer.typography {
577
585
  background-color: var(--ph-speccer-typography-background-color);
@@ -588,7 +596,7 @@ svg.ph-speccer .ph-speccer.circle {
588
596
  .ph-speccer.speccer.typography:hover {
589
597
  border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
590
598
  }
591
- .ph-speccer.speccer.typography:after {
599
+ .ph-speccer.speccer.typography::after {
592
600
  content: "";
593
601
  position: absolute;
594
602
  display: block;
@@ -599,14 +607,14 @@ svg.ph-speccer .ph-speccer.circle {
599
607
  height: var(--ph-speccer-line-width);
600
608
  width: var(--ph-speccer-pin-space);
601
609
  }
602
- .ph-speccer.speccer.typography.left:after {
610
+ .ph-speccer.speccer.typography.left::after {
603
611
  left: 100%;
604
612
  top: 50%;
605
613
  transform: translateY(-50%);
606
614
  height: var(--ph-speccer-line-width);
607
615
  width: var(--ph-speccer-pin-space);
608
616
  }
609
- .ph-speccer.speccer.typography.right:after {
617
+ .ph-speccer.speccer.typography.right::after {
610
618
  left: auto;
611
619
  right: 100%;
612
620
  top: 50%;
@@ -614,7 +622,7 @@ svg.ph-speccer .ph-speccer.circle {
614
622
  height: var(--ph-speccer-line-width);
615
623
  width: var(--ph-speccer-pin-space);
616
624
  }
617
- .ph-speccer.speccer.typography.top:after {
625
+ .ph-speccer.speccer.typography.top::after {
618
626
  left: 50%;
619
627
  right: auto;
620
628
  top: 100%;
@@ -622,7 +630,7 @@ svg.ph-speccer .ph-speccer.circle {
622
630
  height: var(--ph-speccer-pin-space);
623
631
  width: var(--ph-speccer-line-width);
624
632
  }
625
- .ph-speccer.speccer.typography.bottom:after {
633
+ .ph-speccer.speccer.typography.bottom::after {
626
634
  left: 50%;
627
635
  right: auto;
628
636
  top: auto;
@@ -731,84 +739,6 @@ svg.ph-speccer .ph-speccer.circle {
731
739
  .ph-speccer.speccer.typography.syntax .token.debug {
732
740
  color: var(--ph-speccer-color-code-color-8);
733
741
  }
734
- .ph-speccer.speccer.measure {
735
- display: flex;
736
- }
737
- .ph-speccer.speccer.measure.width {
738
- color: var(--ph-speccer-measure-color);
739
- border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
740
- border-bottom: none;
741
- height: var(--ph-speccer-measure-size);
742
- }
743
- .ph-speccer.speccer.measure.width::after {
744
- content: attr(data-measure);
745
- position: absolute;
746
- top: calc(-100% - 10px);
747
- }
748
- .ph-speccer.speccer.measure.width.bottom {
749
- color: var(--ph-speccer-measure-color);
750
- border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
751
- border-top: none;
752
- }
753
- .ph-speccer.speccer.measure.width.bottom::after {
754
- content: attr(data-measure);
755
- position: absolute;
756
- top: calc(100% + 5px);
757
- }
758
- .ph-speccer.speccer.measure.width.top {
759
- color: var(--ph-speccer-measure-color);
760
- border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
761
- border-bottom: none;
762
- }
763
- .ph-speccer.speccer.measure.width.top::after {
764
- content: attr(data-measure);
765
- position: absolute;
766
- bottom: calc(100% + 5px);
767
- }
768
- .ph-speccer.speccer.measure.height.left {
769
- color: var(--ph-speccer-measure-color);
770
- border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
771
- border-right: none;
772
- width: var(--ph-speccer-measure-size);
773
- }
774
- .ph-speccer.speccer.measure.height.left::after {
775
- content: attr(data-measure);
776
- position: absolute;
777
- top: 50%;
778
- left: calc(-100% - 20px - var(--ph-speccer-line-width));
779
- transform: translateY(-50%) rotate(-90deg);
780
- }
781
- .ph-speccer.speccer.measure.height.right {
782
- color: var(--ph-speccer-measure-color);
783
- border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
784
- border-left: none;
785
- width: var(--ph-speccer-measure-size);
786
- }
787
- .ph-speccer.speccer.measure.height.right::after {
788
- content: attr(data-measure);
789
- position: absolute;
790
- top: 50%;
791
- left: calc(100% - var(--ph-speccer-measure-size));
792
- transform: translateY(-50%) rotate(90deg);
793
- }
794
- .ph-speccer.speccer.measure.subtle.width.top,
795
- .ph-speccer.speccer.measure.subtle.width.bottom,
796
- .ph-speccer.speccer.measure.subtle.height.right,
797
- .ph-speccer.speccer.measure.subtle.height.left {
798
- border-style: dashed;
799
- }
800
- .ph-speccer.speccer.measure.subtle.width.top {
801
- border-bottom: none;
802
- }
803
- .ph-speccer.speccer.measure.subtle.width.bottom {
804
- border-top: none;
805
- }
806
- .ph-speccer.speccer.measure.subtle.height.right {
807
- border-left: none;
808
- }
809
- .ph-speccer.speccer.measure.subtle.height.left {
810
- border-right: none;
811
- }
812
742
  .ph-speccer.speccer.speccer-grid-container {
813
743
  counter-reset: column-gap;
814
744
  justify-content: initial;
@@ -819,8 +749,8 @@ svg.ph-speccer .ph-speccer.circle {
819
749
  }
820
750
  .ph-speccer.speccer.speccer-grid-item {
821
751
  transition: var(--ph-speccer-transition-default);
822
- border-left: 1px solid var(--ph-speccer-color-contrast);
823
- border-right: 1px solid var(--ph-speccer-color-contrast);
752
+ border-left: 1px solid var(--ph-speccer-base-color);
753
+ border-right: 1px solid var(--ph-speccer-base-color);
824
754
  position: relative;
825
755
  height: 100%;
826
756
  }
@@ -833,7 +763,7 @@ svg.ph-speccer .ph-speccer.circle {
833
763
  position: absolute;
834
764
  top: -32px;
835
765
  left: 100%;
836
- background-color: var(--ph-speccer-color-contrast);
766
+ background-color: var(--ph-speccer-base-color);
837
767
  height: 32px;
838
768
  width: calc(var(--ph-speccer-grid-gap) + 2px);
839
769
  display: flex;
@@ -852,7 +782,7 @@ svg.ph-speccer .ph-speccer.circle {
852
782
  position: absolute;
853
783
  top: -32px;
854
784
  left: 100%;
855
- background-color: var(--ph-speccer-color-contrast);
785
+ background-color: var(--ph-speccer-base-color);
856
786
  height: 32px;
857
787
  width: calc(var(--ph-speccer-grid-gap) + 2px);
858
788
  display: flex;
@@ -878,123 +808,192 @@ svg.ph-speccer .ph-speccer.circle {
878
808
  left: auto;
879
809
  right: calc((var(--ph-speccer-grid-gap) + 2px) / 2 * -1);
880
810
  }
881
- .ph-speccer.speccer.mark {
882
- background-color: var(--ph-speccer-mark-background-color);
883
- border-color: var(--ph-speccer-mark-border-color);
884
- border-width: 1px;
885
- border-style: solid;
811
+ .ph-speccer.speccer.spacing {
812
+ pointer-events: auto;
813
+ transition: none;
814
+ border: var(--ph-speccer-line-width) solid transparent;
815
+ }
816
+ .ph-speccer.speccer.spacing:hover {
817
+ border: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
818
+ }
819
+ .ph-speccer.speccer.spacing.margin {
820
+ background-color: var(--ph-speccer-spacing-color-margin);
821
+ color: var(--ph-speccer-color-text-dark);
822
+ }
823
+ .ph-speccer.speccer.spacing.padding {
824
+ background-color: var(--ph-speccer-spacing-color-padding);
825
+ color: var(--ph-speccer-spacing-color);
826
+ }
827
+ .ph-speccer.speccer.spacing.margin.bottom::after,
828
+ .ph-speccer.speccer.spacing.margin.top::after {
829
+ transition: none;
830
+ content: "";
886
831
  position: absolute;
832
+ height: 100%;
833
+ border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
834
+ border-bottom: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
835
+ width: 9px;
836
+ left: 40%;
887
837
  }
888
- [data-speccer-a11y] {
889
- counter-reset: speccer-a11y-tabstops;
838
+ .ph-speccer.speccer.spacing.margin.bottom::before,
839
+ .ph-speccer.speccer.spacing.margin.top::before {
840
+ transition: none;
841
+ content: "";
842
+ position: absolute;
843
+ height: 100%;
844
+ border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
845
+ margin-left: 4px;
846
+ width: 0;
847
+ left: 40%;
890
848
  }
891
- .ph-speccer.speccer.a11y.tabstops {
849
+ .ph-speccer.speccer.spacing.margin.left::after,
850
+ .ph-speccer.speccer.spacing.margin.right::after {
851
+ transition: none;
852
+ content: "";
892
853
  position: absolute;
893
- height: 48px;
894
- width: 48px;
895
- background-color: var(--ph-speccer-a11y-color-background);
896
- border-radius: 0.5rem;
897
- color: var(--ph-speccer-color-text-light);
898
- font-family: var(--ph-speccer-font-family);
899
- counter-increment: speccer-a11y-tabstops;
900
- border: 3px solid var(--ph-speccer-a11y-color-background);
854
+ height: 9px;
855
+ border-right: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
856
+ border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
857
+ width: 100%;
858
+ top: 10%;
901
859
  }
902
- .ph-speccer.speccer.a11y.tabstops::before {
860
+ .ph-speccer.speccer.spacing.margin.left::before,
861
+ .ph-speccer.speccer.spacing.margin.right::before {
862
+ transition: none;
863
+ content: "";
903
864
  position: absolute;
904
- top: calc(0.5rem - 2px);
905
- left: calc(0.5rem - 2px);
906
- content: counter(speccer-a11y-tabstops);
907
- font-size: 12px;
908
- text-align: left;
865
+ height: 0;
866
+ border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);
867
+ margin-top: 4px;
868
+ width: 100%;
869
+ top: 10%;
909
870
  }
910
- .ph-speccer.speccer.a11y.tabstops::after {
911
- display: flex;
912
- justify-content: flex-end;
913
- align-items: flex-end;
871
+ .ph-speccer.speccer.spacing.padding.bottom::after,
872
+ .ph-speccer.speccer.spacing.padding.top::after {
873
+ transition: none;
874
+ content: "";
914
875
  position: absolute;
915
- left: 0.5rem;
916
- right: 0.5rem;
917
- bottom: 0.5rem;
918
- height: 2rem;
919
- content: "⇥";
920
- font-size: 2rem;
921
- color: var(--ph-speccer-color-text-light);
922
- font-family: var(--ph-speccer-font-family);
876
+ height: 100%;
877
+ border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
878
+ border-bottom: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
879
+ width: 9px;
880
+ left: 40%;
923
881
  }
924
- .ph-speccer.speccer.a11y.landmark {
882
+ .ph-speccer.speccer.spacing.padding.bottom::before,
883
+ .ph-speccer.speccer.spacing.padding.top::before {
884
+ transition: none;
885
+ content: "";
925
886
  position: absolute;
926
- height: 48px;
927
- width: 48px;
928
- background-color: var(--ph-speccer-a11y-landmark-color-background);
929
- border-radius: 0.5rem;
930
- color: var(--ph-speccer-color-text-light);
931
- font-family: var(--ph-speccer-font-family);
932
- border: 3px solid var(--ph-speccer-a11y-landmark-color-background);
933
- box-shadow: inset 0 0 0 2px var(--ph-speccer-color-text-light);
934
- justify-content: center;
935
- font-size: 1rem;
936
- line-height: 100%;
937
- align-items: center;
938
- padding: 0.5rem;
939
- pointer-events: auto;
887
+ height: 100%;
888
+ border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
889
+ margin-left: 4px;
890
+ width: 0;
891
+ left: 40%;
940
892
  }
941
- .ph-speccer.speccer.a11y.landmark::after {
942
- top: 100%;
943
- left: 50%;
944
- border: solid transparent;
893
+ .ph-speccer.speccer.spacing.padding.left::after,
894
+ .ph-speccer.speccer.spacing.padding.right::after {
895
+ transition: none;
896
+ content: "";
897
+ position: absolute;
898
+ height: 9px;
899
+ border-right: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
900
+ border-left: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
901
+ width: 100%;
902
+ top: 10%;
903
+ }
904
+ .ph-speccer.speccer.spacing.padding.left::before,
905
+ .ph-speccer.speccer.spacing.padding.right::before {
906
+ transition: none;
945
907
  content: "";
908
+ position: absolute;
946
909
  height: 0;
947
- width: 0;
910
+ border-top: var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);
911
+ margin-top: 4px;
912
+ width: 100%;
913
+ top: 10%;
914
+ }
915
+ .ph-speccer.speccer.measure {
916
+ display: flex;
917
+ }
918
+ .ph-speccer.speccer.measure.width {
919
+ color: var(--ph-speccer-measure-color);
920
+ border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
921
+ border-bottom: none;
922
+ height: var(--ph-speccer-measure-size);
923
+ }
924
+ .ph-speccer.speccer.measure.width::after {
925
+ content: attr(data-measure);
948
926
  position: absolute;
949
- pointer-events: none;
950
- border-color: rgba(126,96,197,0);
951
- border-top-color: var(--ph-speccer-a11y-landmark-color-background);
952
- border-width: 12px;
953
- margin-left: -12px;
927
+ top: calc(-100% - 10px);
954
928
  }
955
- .ph-speccer.speccer.a11y.region {
929
+ .ph-speccer.speccer.measure.width.bottom {
930
+ color: var(--ph-speccer-measure-color);
931
+ border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
932
+ border-top: none;
933
+ }
934
+ .ph-speccer.speccer.measure.width.bottom::after {
935
+ content: attr(data-measure);
956
936
  position: absolute;
957
- outline: 2px solid var(--ph-speccer-a11y-landmark-color-background);
958
- outline-offset: 2px;
937
+ top: calc(100% + 5px);
959
938
  }
960
- .ph-speccer.speccer.a11y.shortcut-holder {
939
+ .ph-speccer.speccer.measure.width.top {
940
+ color: var(--ph-speccer-measure-color);
941
+ border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
942
+ border-bottom: none;
943
+ }
944
+ .ph-speccer.speccer.measure.width.top::after {
945
+ content: attr(data-measure);
961
946
  position: absolute;
962
- height: 48px;
963
- min-width: 120px;
964
- display: flex;
965
- flex-direction: row;
966
- justify-content: flex-start;
967
- align-items: center;
968
- grid-gap: 0.5rem;
947
+ bottom: calc(100% + 5px);
969
948
  }
970
- .ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut {
971
- flex-shrink: 0;
972
- position: relative;
973
- background-color: var(--ph-speccer-a11y-color-background);
974
- border-radius: 0.5rem;
975
- color: var(--ph-speccer-color-text-light);
976
- font-family: var(--ph-speccer-font-family);
977
- display: inline-flex;
978
- text-transform: uppercase;
979
- height: 48px;
980
- border: 3px solid var(--ph-speccer-a11y-color-background);
981
- min-width: 48px;
982
- font-size: 1.5rem;
983
- justify-content: center;
984
- align-items: center;
949
+ .ph-speccer.speccer.measure.height.left {
950
+ color: var(--ph-speccer-measure-color);
951
+ border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
952
+ border-right: none;
953
+ width: var(--ph-speccer-measure-size);
985
954
  }
986
- .ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut.modifier {
987
- justify-content: flex-start;
988
- align-items: flex-end;
989
- padding: 0.25rem;
990
- font-size: 1rem;
991
- width: 80px;
992
- text-transform: lowercase;
955
+ .ph-speccer.speccer.measure.height.left::after {
956
+ content: attr(data-measure);
957
+ position: absolute;
958
+ top: 50%;
959
+ left: calc(-100% - 20px - var(--ph-speccer-line-width));
960
+ transform: translateY(-50%) rotate(-90deg);
993
961
  }
994
- .ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut.physical {
995
- justify-content: flex-start;
996
- align-items: flex-end;
997
- padding: 0.25rem;
998
- font-size: 1rem;
999
- text-transform: lowercase;
962
+ .ph-speccer.speccer.measure.height.right {
963
+ color: var(--ph-speccer-measure-color);
964
+ border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
965
+ border-left: none;
966
+ width: var(--ph-speccer-measure-size);
967
+ }
968
+ .ph-speccer.speccer.measure.height.right::after {
969
+ content: attr(data-measure);
970
+ position: absolute;
971
+ top: 50%;
972
+ left: calc(100% - var(--ph-speccer-measure-size));
973
+ transform: translateY(-50%) rotate(90deg);
974
+ }
975
+ .ph-speccer.speccer.measure.subtle.width.top,
976
+ .ph-speccer.speccer.measure.subtle.width.bottom,
977
+ .ph-speccer.speccer.measure.subtle.height.right,
978
+ .ph-speccer.speccer.measure.subtle.height.left {
979
+ border-style: dashed;
980
+ }
981
+ .ph-speccer.speccer.measure.subtle.width.top {
982
+ border-bottom: none;
983
+ }
984
+ .ph-speccer.speccer.measure.subtle.width.bottom {
985
+ border-top: none;
986
+ }
987
+ .ph-speccer.speccer.measure.subtle.height.right {
988
+ border-left: none;
989
+ }
990
+ .ph-speccer.speccer.measure.subtle.height.left {
991
+ border-right: none;
992
+ }
993
+ .ph-speccer.speccer.mark {
994
+ background-color: var(--ph-speccer-mark-background-color);
995
+ border-color: var(--ph-speccer-mark-border-color);
996
+ border-width: var(--ph-speccer-mark-border-width);
997
+ border-style: var(--ph-speccer-mark-border-style);
998
+ position: absolute;
1000
999
  }