1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
{
"default export": ["image", "geometry"],
"controls": [
{
"name": "Button",
"copy": ":/Button.qml",
"component set": "ButtonTemplate",
"atoms": [
{"atom": "background", "figmaPath": "background"},
{"atom": "contentItem", "figmaPath": "contentItem", "export": "layout"}
],
"states": [
{"state": "normal", "figmaState": "normal"},
{"state": "disabled", "figmaState": "disabled"},
{"state": "hovered", "figmaState": "hovered"},
{"state": "pressed", "figmaState": "pressed"},
{"state": "checked", "figmaState": "checked"},
{"state": "checked-pressed", "figmaState": "checkedPressed"},
{"state": "checked-hovered", "figmaState": "checkedHovered"}
]
},
{
"name": "CheckBox",
"copy": ":/CheckBox.qml",
"component set": "CheckBoxTemplate",
"contents": ["indicator", "label"],
"atoms": [
{"atom": "background", "figmaPath": "CheckBoxBackground, background"},
{"atom": "label", "figmaPath": "ContentItem, Label", "export": "geometry"},
{"atom": "contentItem", "figmaPath": "ContentItem", "export": "layout"},
{"atom": "indicator", "figmaPath": "CheckBoxIndicator, indicator"},
{"atom": "indicator-background", "figmaPath": "CheckBoxIndicator, indicatorBackground"}
],
"states": [
{"state": "normal", "figmaState": "normal"},
{"state": "disabled", "figmaState": "disabled"},
{"state": "pressed", "figmaState": "pressed"},
{"state": "hovered", "figmaState": "hovered"},
{"state": "checked", "figmaState": "checked"},
{"state": "checked-disabled", "figmaState": "checkedDisabled"},
{"state": "checked-hovered", "figmaState": "checkedHovered"},
{"state": "checked-pressed", "figmaState": "checkedPressed"},
{"state": "partially-checked", "figmaState": "partiallyChecked"},
{"state": "partially-checked-disabled", "figmaState": "partiallyCheckedDisabled"},
{"state": "partially-checked-pressed", "figmaState": "partiallyCheckedPressed"},
{"state": "partially-checked-hovered", "figmaState": "partiallyCheckedHovered"}
]
},
{
"name": "Switch",
"copy": ":/Switch.qml",
"component set": "SwitchTemplate",
"contents": ["handle-background", "label"],
"atoms": [
{"atom": "background", "figmaPath": "SwitchBackground, background"},
{"atom": "contentItem", "figmaPath": "ContentItem", "export": "layout"},
{"atom": "handle", "figmaPath": "ContentItem, SwitchHandle"},
{"atom": "handle-background", "figmaPath": "ContentItem, HandleBackground, background"},
{"atom": "handle-contentItem", "figmaPath": "ContentItem, HandleTemplate, ContentItem", "export": "layout"},
{"atom": "label", "figmaPath": "ContentItem, Label", "export": "geometry"}
],
"states": [
{"state": "normal", "figmaState": "normal"},
{"state": "disabled", "figmaState": "disabled"},
{"state": "pressed", "figmaState": "pressed"},
{"state": "hovered", "figmaState": "hovered"},
{"state": "checked", "figmaState": "checked"},
{"state": "checked-disabled", "figmaState": "checkedDisabled"},
{"state": "checked-pressed", "figmaState": "checkedPressed"},
{"state": "checked-hovered", "figmaState": "checkedHovered"}
]
},
{
"name": "TextField",
"copy": ":/TextField.qml",
"component set": "TextFieldTemplate",
"atoms": [
{"atom": "background", "figmaPath": "TextFieldBackground"},
{"atom": "contentItem", "figmaPath": "contentItem", "export": "layout"}
],
"states": [
{"state": "normal", "figmaState": "normal"},
{"state": "disabled", "figmaState": "disabled"},
{"state": "hovered", "figmaState": "hovered"},
{"state": "focused", "figmaState": "focused"},
{"state": "focused-hovered", "figmaState": "hoveredFocused"}
]
}
]
}
|
