@phun-ky/speccer 9.6.2 → 10.0.1

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