@radicool/throughline 0.21.4 → 0.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -5
- package/adapters/codex/prompts/component-builder.md +12 -7
- package/adapters/codex/prompts/token-sync-layer.md +4 -1
- package/adapters/cursor/.cursor/rules/component-builder.mdc +12 -7
- package/adapters/cursor/.cursor/rules/token-sync-layer.mdc +4 -1
- package/adapters/generic/skills/component-builder/SKILL.md +12 -7
- package/adapters/generic/skills/token-sync-layer/SKILL.md +4 -1
- package/package.json +1 -1
- package/references/figma-checks.md +484 -0
- package/references/figma-component-standards.md +21 -53
- package/references/figma-scripting.md +8 -7
- package/references/state-baseline.md +27 -0
- package/scripts/README.md +5 -1
- package/scripts/build-figma-checks.mjs +98 -0
- package/scripts/build-state-baseline.mjs +71 -0
- package/scripts/install.mjs +9 -4
- package/scripts/lib/component-states.mjs +28 -7
- package/scripts/lib/figma-checks-read.figma.js +120 -0
- package/scripts/lib/figma-checks.mjs +240 -0
- package/scripts/lib/fixtures/figma-checks/avatar-not-in-table.json +43 -0
- package/scripts/lib/fixtures/figma-checks/button-ios-swift-skipped.json +85 -0
- package/scripts/lib/fixtures/figma-checks/button-missing-default.json +71 -0
- package/scripts/lib/fixtures/figma-checks/button-mui-ring.json +92 -0
- package/scripts/lib/fixtures/figma-checks/button-no-focus-variant.json +71 -0
- package/scripts/lib/fixtures/figma-checks/button-plain-frames.json +92 -0
- package/scripts/lib/fixtures/figma-checks/button-ring-child-not-absolute.json +94 -0
- package/scripts/lib/fixtures/figma-checks/button-ring-hidden.json +92 -0
- package/scripts/lib/fixtures/figma-checks/button-ring-unbound-colour.json +98 -0
- package/scripts/lib/fixtures/figma-checks/button-shadcn-filled.json +92 -0
- package/scripts/lib/fixtures/figma-checks/button-sparse.json +134 -0
- package/scripts/lib/fixtures/figma-checks/button-spread-zero.json +92 -0
- package/scripts/lib/fixtures/figma-checks/button-transparent-ring-child.json +94 -0
- package/scripts/lib/fixtures/figma-checks/button-vanilla-inside.json +87 -0
- package/scripts/lib/fixtures/figma-checks/button-vanilla-outside.json +87 -0
- package/scripts/lib/fixtures/figma-checks/button-wrong-combination.json +92 -0
- package/scripts/lib/fixtures/figma-checks/checkbox-checked-axis.real.json +245 -0
- package/scripts/lib/fixtures/figma-checks/checkbox-checked-synonym.json +87 -0
- package/scripts/lib/fixtures/figma-checks/checkbox-missing-selected.json +79 -0
- package/scripts/lib/fixtures/figma-checks/input-control-layer-missing.json +66 -0
- package/scripts/lib/fixtures/figma-checks/input-control-layer-ring-on-wrapper.json +79 -0
- package/scripts/lib/fixtures/figma-checks/input-control-layer.json +79 -0
- package/scripts/lib/fixtures/figma-checks/input-mui-weight-unbound.json +66 -0
- package/scripts/lib/fixtures/figma-checks/input-mui.json +66 -0
- package/scripts/lib/fixtures/figma-checks/sample-button.real.json +1497 -0
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
{
|
|
2
|
+
"covers": "shadow with a raw colour and a variable with no focus segment",
|
|
3
|
+
"expect": {
|
|
4
|
+
"name": "Button",
|
|
5
|
+
"matrix": {
|
|
6
|
+
"variant": [
|
|
7
|
+
"primary"
|
|
8
|
+
],
|
|
9
|
+
"state": [
|
|
10
|
+
"default",
|
|
11
|
+
"hover",
|
|
12
|
+
"focus",
|
|
13
|
+
"active",
|
|
14
|
+
"disabled"
|
|
15
|
+
]
|
|
16
|
+
},
|
|
17
|
+
"uiFramework": "shadcn"
|
|
18
|
+
},
|
|
19
|
+
"snapshot": {
|
|
20
|
+
"type": "COMPONENT_SET",
|
|
21
|
+
"variantGroupProperties": {
|
|
22
|
+
"Variant": {
|
|
23
|
+
"values": [
|
|
24
|
+
"Primary"
|
|
25
|
+
]
|
|
26
|
+
},
|
|
27
|
+
"State": {
|
|
28
|
+
"values": [
|
|
29
|
+
"Default",
|
|
30
|
+
"Hover",
|
|
31
|
+
"Focus",
|
|
32
|
+
"Active",
|
|
33
|
+
"Disabled"
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
"children": [
|
|
38
|
+
{
|
|
39
|
+
"type": "COMPONENT",
|
|
40
|
+
"variantProperties": {
|
|
41
|
+
"Variant": "Primary",
|
|
42
|
+
"State": "Default"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"type": "COMPONENT",
|
|
47
|
+
"variantProperties": {
|
|
48
|
+
"Variant": "Primary",
|
|
49
|
+
"State": "Hover"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"type": "COMPONENT",
|
|
54
|
+
"variantProperties": {
|
|
55
|
+
"Variant": "Primary",
|
|
56
|
+
"State": "Focus"
|
|
57
|
+
},
|
|
58
|
+
"effects": [
|
|
59
|
+
{
|
|
60
|
+
"type": "DROP_SHADOW",
|
|
61
|
+
"visible": true,
|
|
62
|
+
"spread": 3,
|
|
63
|
+
"colorVariable": null
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"type": "DROP_SHADOW",
|
|
67
|
+
"visible": true,
|
|
68
|
+
"spread": 3,
|
|
69
|
+
"colorVariable": "color/focusRing"
|
|
70
|
+
}
|
|
71
|
+
],
|
|
72
|
+
"strokeAlign": "INSIDE",
|
|
73
|
+
"strokeVariables": [],
|
|
74
|
+
"strokeWeightBound": false,
|
|
75
|
+
"children": []
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"type": "COMPONENT",
|
|
79
|
+
"variantProperties": {
|
|
80
|
+
"Variant": "Primary",
|
|
81
|
+
"State": "Active"
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"type": "COMPONENT",
|
|
86
|
+
"variantProperties": {
|
|
87
|
+
"Variant": "Primary",
|
|
88
|
+
"State": "Disabled"
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
]
|
|
92
|
+
},
|
|
93
|
+
"expected": {
|
|
94
|
+
"structural-read-back": "pass",
|
|
95
|
+
"state-baseline": "pass",
|
|
96
|
+
"focus-indicator": "fail"
|
|
97
|
+
}
|
|
98
|
+
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
{
|
|
2
|
+
"covers": "filled control: DROP_SHADOW ring, axis and value case differs from the matrix",
|
|
3
|
+
"expect": {
|
|
4
|
+
"name": "Button",
|
|
5
|
+
"matrix": {
|
|
6
|
+
"variant": [
|
|
7
|
+
"primary"
|
|
8
|
+
],
|
|
9
|
+
"state": [
|
|
10
|
+
"default",
|
|
11
|
+
"hover",
|
|
12
|
+
"focus",
|
|
13
|
+
"active",
|
|
14
|
+
"disabled"
|
|
15
|
+
]
|
|
16
|
+
},
|
|
17
|
+
"uiFramework": "shadcn"
|
|
18
|
+
},
|
|
19
|
+
"snapshot": {
|
|
20
|
+
"type": "COMPONENT_SET",
|
|
21
|
+
"variantGroupProperties": {
|
|
22
|
+
"Variant": {
|
|
23
|
+
"values": [
|
|
24
|
+
"Primary"
|
|
25
|
+
]
|
|
26
|
+
},
|
|
27
|
+
"State": {
|
|
28
|
+
"values": [
|
|
29
|
+
"Default",
|
|
30
|
+
"Hover",
|
|
31
|
+
"Focus",
|
|
32
|
+
"Active",
|
|
33
|
+
"Disabled"
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
"children": [
|
|
38
|
+
{
|
|
39
|
+
"type": "COMPONENT",
|
|
40
|
+
"variantProperties": {
|
|
41
|
+
"Variant": "Primary",
|
|
42
|
+
"State": "Default"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"type": "COMPONENT",
|
|
47
|
+
"variantProperties": {
|
|
48
|
+
"Variant": "Primary",
|
|
49
|
+
"State": "Hover"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"type": "COMPONENT",
|
|
54
|
+
"variantProperties": {
|
|
55
|
+
"Variant": "Primary",
|
|
56
|
+
"State": "Focus"
|
|
57
|
+
},
|
|
58
|
+
"effects": [
|
|
59
|
+
{
|
|
60
|
+
"type": "DROP_SHADOW",
|
|
61
|
+
"visible": true,
|
|
62
|
+
"spread": 3,
|
|
63
|
+
"colorVariable": "Color/Border/Focus"
|
|
64
|
+
}
|
|
65
|
+
],
|
|
66
|
+
"strokeAlign": "INSIDE",
|
|
67
|
+
"strokeVariables": [],
|
|
68
|
+
"strokeWeightBound": false,
|
|
69
|
+
"children": []
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"type": "COMPONENT",
|
|
73
|
+
"variantProperties": {
|
|
74
|
+
"Variant": "Primary",
|
|
75
|
+
"State": "Active"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"type": "COMPONENT",
|
|
80
|
+
"variantProperties": {
|
|
81
|
+
"Variant": "Primary",
|
|
82
|
+
"State": "Disabled"
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
},
|
|
87
|
+
"expected": {
|
|
88
|
+
"structural-read-back": "pass",
|
|
89
|
+
"state-baseline": "pass",
|
|
90
|
+
"focus-indicator": "pass"
|
|
91
|
+
}
|
|
92
|
+
}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
{
|
|
2
|
+
"covers": "deliberately sparse set fails the full cross product",
|
|
3
|
+
"expect": {
|
|
4
|
+
"name": "Button",
|
|
5
|
+
"matrix": {
|
|
6
|
+
"variant": [
|
|
7
|
+
"primary",
|
|
8
|
+
"secondary"
|
|
9
|
+
],
|
|
10
|
+
"state": [
|
|
11
|
+
"default",
|
|
12
|
+
"hover",
|
|
13
|
+
"focus",
|
|
14
|
+
"active",
|
|
15
|
+
"disabled"
|
|
16
|
+
]
|
|
17
|
+
},
|
|
18
|
+
"uiFramework": "shadcn"
|
|
19
|
+
},
|
|
20
|
+
"snapshot": {
|
|
21
|
+
"type": "COMPONENT_SET",
|
|
22
|
+
"variantGroupProperties": {
|
|
23
|
+
"Variant": {
|
|
24
|
+
"values": [
|
|
25
|
+
"Primary",
|
|
26
|
+
"Secondary"
|
|
27
|
+
]
|
|
28
|
+
},
|
|
29
|
+
"State": {
|
|
30
|
+
"values": [
|
|
31
|
+
"Default",
|
|
32
|
+
"Hover",
|
|
33
|
+
"Focus",
|
|
34
|
+
"Active",
|
|
35
|
+
"Disabled"
|
|
36
|
+
]
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
"children": [
|
|
40
|
+
{
|
|
41
|
+
"type": "COMPONENT",
|
|
42
|
+
"variantProperties": {
|
|
43
|
+
"Variant": "Primary",
|
|
44
|
+
"State": "Default"
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"type": "COMPONENT",
|
|
49
|
+
"variantProperties": {
|
|
50
|
+
"Variant": "Primary",
|
|
51
|
+
"State": "Hover"
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"type": "COMPONENT",
|
|
56
|
+
"variantProperties": {
|
|
57
|
+
"Variant": "Primary",
|
|
58
|
+
"State": "Focus"
|
|
59
|
+
},
|
|
60
|
+
"effects": [
|
|
61
|
+
{
|
|
62
|
+
"type": "DROP_SHADOW",
|
|
63
|
+
"visible": true,
|
|
64
|
+
"spread": 3,
|
|
65
|
+
"colorVariable": "Color/Border/Focus"
|
|
66
|
+
}
|
|
67
|
+
],
|
|
68
|
+
"strokeAlign": "INSIDE",
|
|
69
|
+
"strokeVariables": [],
|
|
70
|
+
"strokeWeightBound": false,
|
|
71
|
+
"children": []
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"type": "COMPONENT",
|
|
75
|
+
"variantProperties": {
|
|
76
|
+
"Variant": "Primary",
|
|
77
|
+
"State": "Active"
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"type": "COMPONENT",
|
|
82
|
+
"variantProperties": {
|
|
83
|
+
"Variant": "Primary",
|
|
84
|
+
"State": "Disabled"
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"type": "COMPONENT",
|
|
89
|
+
"variantProperties": {
|
|
90
|
+
"Variant": "Secondary",
|
|
91
|
+
"State": "Default"
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"type": "COMPONENT",
|
|
96
|
+
"variantProperties": {
|
|
97
|
+
"Variant": "Secondary",
|
|
98
|
+
"State": "Hover"
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"type": "COMPONENT",
|
|
103
|
+
"variantProperties": {
|
|
104
|
+
"Variant": "Secondary",
|
|
105
|
+
"State": "Focus"
|
|
106
|
+
},
|
|
107
|
+
"effects": [
|
|
108
|
+
{
|
|
109
|
+
"type": "DROP_SHADOW",
|
|
110
|
+
"visible": true,
|
|
111
|
+
"spread": 3,
|
|
112
|
+
"colorVariable": "Color/Border/Focus"
|
|
113
|
+
}
|
|
114
|
+
],
|
|
115
|
+
"strokeAlign": "INSIDE",
|
|
116
|
+
"strokeVariables": [],
|
|
117
|
+
"strokeWeightBound": false,
|
|
118
|
+
"children": []
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"type": "COMPONENT",
|
|
122
|
+
"variantProperties": {
|
|
123
|
+
"Variant": "Secondary",
|
|
124
|
+
"State": "Disabled"
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
]
|
|
128
|
+
},
|
|
129
|
+
"expected": {
|
|
130
|
+
"structural-read-back": "fail",
|
|
131
|
+
"state-baseline": "pass",
|
|
132
|
+
"focus-indicator": "pass"
|
|
133
|
+
}
|
|
134
|
+
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
{
|
|
2
|
+
"covers": "ring bound but spread is 0 (invisible)",
|
|
3
|
+
"expect": {
|
|
4
|
+
"name": "Button",
|
|
5
|
+
"matrix": {
|
|
6
|
+
"variant": [
|
|
7
|
+
"primary"
|
|
8
|
+
],
|
|
9
|
+
"state": [
|
|
10
|
+
"default",
|
|
11
|
+
"hover",
|
|
12
|
+
"focus",
|
|
13
|
+
"active",
|
|
14
|
+
"disabled"
|
|
15
|
+
]
|
|
16
|
+
},
|
|
17
|
+
"uiFramework": "shadcn"
|
|
18
|
+
},
|
|
19
|
+
"snapshot": {
|
|
20
|
+
"type": "COMPONENT_SET",
|
|
21
|
+
"variantGroupProperties": {
|
|
22
|
+
"Variant": {
|
|
23
|
+
"values": [
|
|
24
|
+
"Primary"
|
|
25
|
+
]
|
|
26
|
+
},
|
|
27
|
+
"State": {
|
|
28
|
+
"values": [
|
|
29
|
+
"Default",
|
|
30
|
+
"Hover",
|
|
31
|
+
"Focus",
|
|
32
|
+
"Active",
|
|
33
|
+
"Disabled"
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
"children": [
|
|
38
|
+
{
|
|
39
|
+
"type": "COMPONENT",
|
|
40
|
+
"variantProperties": {
|
|
41
|
+
"Variant": "Primary",
|
|
42
|
+
"State": "Default"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"type": "COMPONENT",
|
|
47
|
+
"variantProperties": {
|
|
48
|
+
"Variant": "Primary",
|
|
49
|
+
"State": "Hover"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"type": "COMPONENT",
|
|
54
|
+
"variantProperties": {
|
|
55
|
+
"Variant": "Primary",
|
|
56
|
+
"State": "Focus"
|
|
57
|
+
},
|
|
58
|
+
"effects": [
|
|
59
|
+
{
|
|
60
|
+
"type": "DROP_SHADOW",
|
|
61
|
+
"visible": true,
|
|
62
|
+
"spread": 0,
|
|
63
|
+
"colorVariable": "Color/Border/Focus"
|
|
64
|
+
}
|
|
65
|
+
],
|
|
66
|
+
"strokeAlign": "INSIDE",
|
|
67
|
+
"strokeVariables": [],
|
|
68
|
+
"strokeWeightBound": false,
|
|
69
|
+
"children": []
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"type": "COMPONENT",
|
|
73
|
+
"variantProperties": {
|
|
74
|
+
"Variant": "Primary",
|
|
75
|
+
"State": "Active"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"type": "COMPONENT",
|
|
80
|
+
"variantProperties": {
|
|
81
|
+
"Variant": "Primary",
|
|
82
|
+
"State": "Disabled"
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
},
|
|
87
|
+
"expected": {
|
|
88
|
+
"structural-read-back": "pass",
|
|
89
|
+
"state-baseline": "pass",
|
|
90
|
+
"focus-indicator": "fail"
|
|
91
|
+
}
|
|
92
|
+
}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
{
|
|
2
|
+
"covers": "transparent variant: ABSOLUTE OUTSIDE ring child, uiFramework null",
|
|
3
|
+
"expect": {
|
|
4
|
+
"name": "Button",
|
|
5
|
+
"matrix": {
|
|
6
|
+
"variant": [
|
|
7
|
+
"outline"
|
|
8
|
+
],
|
|
9
|
+
"state": [
|
|
10
|
+
"default",
|
|
11
|
+
"hover",
|
|
12
|
+
"focus",
|
|
13
|
+
"active",
|
|
14
|
+
"disabled"
|
|
15
|
+
]
|
|
16
|
+
},
|
|
17
|
+
"uiFramework": null
|
|
18
|
+
},
|
|
19
|
+
"snapshot": {
|
|
20
|
+
"type": "COMPONENT_SET",
|
|
21
|
+
"variantGroupProperties": {
|
|
22
|
+
"Variant": {
|
|
23
|
+
"values": [
|
|
24
|
+
"Outline"
|
|
25
|
+
]
|
|
26
|
+
},
|
|
27
|
+
"State": {
|
|
28
|
+
"values": [
|
|
29
|
+
"Default",
|
|
30
|
+
"Hover",
|
|
31
|
+
"Focus",
|
|
32
|
+
"Active",
|
|
33
|
+
"Disabled"
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
"children": [
|
|
38
|
+
{
|
|
39
|
+
"type": "COMPONENT",
|
|
40
|
+
"variantProperties": {
|
|
41
|
+
"Variant": "Outline",
|
|
42
|
+
"State": "Default"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"type": "COMPONENT",
|
|
47
|
+
"variantProperties": {
|
|
48
|
+
"Variant": "Outline",
|
|
49
|
+
"State": "Hover"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"type": "COMPONENT",
|
|
54
|
+
"variantProperties": {
|
|
55
|
+
"Variant": "Outline",
|
|
56
|
+
"State": "Focus"
|
|
57
|
+
},
|
|
58
|
+
"effects": [],
|
|
59
|
+
"strokeAlign": "INSIDE",
|
|
60
|
+
"strokeVariables": [],
|
|
61
|
+
"strokeWeightBound": false,
|
|
62
|
+
"children": [
|
|
63
|
+
{
|
|
64
|
+
"layoutPositioning": "ABSOLUTE",
|
|
65
|
+
"strokeAlign": "OUTSIDE",
|
|
66
|
+
"strokeVariables": [
|
|
67
|
+
"border/focus"
|
|
68
|
+
],
|
|
69
|
+
"strokeWeightBound": true
|
|
70
|
+
}
|
|
71
|
+
]
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"type": "COMPONENT",
|
|
75
|
+
"variantProperties": {
|
|
76
|
+
"Variant": "Outline",
|
|
77
|
+
"State": "Active"
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"type": "COMPONENT",
|
|
82
|
+
"variantProperties": {
|
|
83
|
+
"Variant": "Outline",
|
|
84
|
+
"State": "Disabled"
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
]
|
|
88
|
+
},
|
|
89
|
+
"expected": {
|
|
90
|
+
"structural-read-back": "pass",
|
|
91
|
+
"state-baseline": "pass",
|
|
92
|
+
"focus-indicator": "pass"
|
|
93
|
+
}
|
|
94
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
{
|
|
2
|
+
"covers": "vanilla: an INSIDE stroke is a fail",
|
|
3
|
+
"expect": {
|
|
4
|
+
"name": "Button",
|
|
5
|
+
"matrix": {
|
|
6
|
+
"variant": [
|
|
7
|
+
"primary"
|
|
8
|
+
],
|
|
9
|
+
"state": [
|
|
10
|
+
"default",
|
|
11
|
+
"hover",
|
|
12
|
+
"focus",
|
|
13
|
+
"active",
|
|
14
|
+
"disabled"
|
|
15
|
+
]
|
|
16
|
+
},
|
|
17
|
+
"uiFramework": "vanilla"
|
|
18
|
+
},
|
|
19
|
+
"snapshot": {
|
|
20
|
+
"type": "COMPONENT_SET",
|
|
21
|
+
"variantGroupProperties": {
|
|
22
|
+
"Variant": {
|
|
23
|
+
"values": [
|
|
24
|
+
"Primary"
|
|
25
|
+
]
|
|
26
|
+
},
|
|
27
|
+
"State": {
|
|
28
|
+
"values": [
|
|
29
|
+
"Default",
|
|
30
|
+
"Hover",
|
|
31
|
+
"Focus",
|
|
32
|
+
"Active",
|
|
33
|
+
"Disabled"
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
"children": [
|
|
38
|
+
{
|
|
39
|
+
"type": "COMPONENT",
|
|
40
|
+
"variantProperties": {
|
|
41
|
+
"Variant": "Primary",
|
|
42
|
+
"State": "Default"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"type": "COMPONENT",
|
|
47
|
+
"variantProperties": {
|
|
48
|
+
"Variant": "Primary",
|
|
49
|
+
"State": "Hover"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"type": "COMPONENT",
|
|
54
|
+
"variantProperties": {
|
|
55
|
+
"Variant": "Primary",
|
|
56
|
+
"State": "Focus"
|
|
57
|
+
},
|
|
58
|
+
"effects": [],
|
|
59
|
+
"strokeAlign": "INSIDE",
|
|
60
|
+
"strokeVariables": [
|
|
61
|
+
"border/focus"
|
|
62
|
+
],
|
|
63
|
+
"strokeWeightBound": false,
|
|
64
|
+
"children": []
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"type": "COMPONENT",
|
|
68
|
+
"variantProperties": {
|
|
69
|
+
"Variant": "Primary",
|
|
70
|
+
"State": "Active"
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"type": "COMPONENT",
|
|
75
|
+
"variantProperties": {
|
|
76
|
+
"Variant": "Primary",
|
|
77
|
+
"State": "Disabled"
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
]
|
|
81
|
+
},
|
|
82
|
+
"expected": {
|
|
83
|
+
"structural-read-back": "pass",
|
|
84
|
+
"state-baseline": "pass",
|
|
85
|
+
"focus-indicator": "fail"
|
|
86
|
+
}
|
|
87
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
{
|
|
2
|
+
"covers": "vanilla-css: OUTSIDE stroke bound to a focus variable on the control",
|
|
3
|
+
"expect": {
|
|
4
|
+
"name": "Button",
|
|
5
|
+
"matrix": {
|
|
6
|
+
"variant": [
|
|
7
|
+
"primary"
|
|
8
|
+
],
|
|
9
|
+
"state": [
|
|
10
|
+
"default",
|
|
11
|
+
"hover",
|
|
12
|
+
"focus",
|
|
13
|
+
"active",
|
|
14
|
+
"disabled"
|
|
15
|
+
]
|
|
16
|
+
},
|
|
17
|
+
"uiFramework": "vanilla-css"
|
|
18
|
+
},
|
|
19
|
+
"snapshot": {
|
|
20
|
+
"type": "COMPONENT_SET",
|
|
21
|
+
"variantGroupProperties": {
|
|
22
|
+
"Variant": {
|
|
23
|
+
"values": [
|
|
24
|
+
"Primary"
|
|
25
|
+
]
|
|
26
|
+
},
|
|
27
|
+
"State": {
|
|
28
|
+
"values": [
|
|
29
|
+
"Default",
|
|
30
|
+
"Hover",
|
|
31
|
+
"Focus",
|
|
32
|
+
"Active",
|
|
33
|
+
"Disabled"
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
"children": [
|
|
38
|
+
{
|
|
39
|
+
"type": "COMPONENT",
|
|
40
|
+
"variantProperties": {
|
|
41
|
+
"Variant": "Primary",
|
|
42
|
+
"State": "Default"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"type": "COMPONENT",
|
|
47
|
+
"variantProperties": {
|
|
48
|
+
"Variant": "Primary",
|
|
49
|
+
"State": "Hover"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"type": "COMPONENT",
|
|
54
|
+
"variantProperties": {
|
|
55
|
+
"Variant": "Primary",
|
|
56
|
+
"State": "Focus"
|
|
57
|
+
},
|
|
58
|
+
"effects": [],
|
|
59
|
+
"strokeAlign": "OUTSIDE",
|
|
60
|
+
"strokeVariables": [
|
|
61
|
+
"color/border/focus"
|
|
62
|
+
],
|
|
63
|
+
"strokeWeightBound": false,
|
|
64
|
+
"children": []
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"type": "COMPONENT",
|
|
68
|
+
"variantProperties": {
|
|
69
|
+
"Variant": "Primary",
|
|
70
|
+
"State": "Active"
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"type": "COMPONENT",
|
|
75
|
+
"variantProperties": {
|
|
76
|
+
"Variant": "Primary",
|
|
77
|
+
"State": "Disabled"
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
]
|
|
81
|
+
},
|
|
82
|
+
"expected": {
|
|
83
|
+
"structural-read-back": "pass",
|
|
84
|
+
"state-baseline": "pass",
|
|
85
|
+
"focus-indicator": "pass"
|
|
86
|
+
}
|
|
87
|
+
}
|