@massimo-cassandro/minimo 0.5.7 → 0.6.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.
- package/design-tokens/btn.minimo.tokens.jsonc +1 -1
- package/design-tokens-src/btn.minimo.tokens.mjs +200 -0
- package/package.json +1 -1
- package/src/css/buttons/btn-close.css +1 -0
- package/src/css/buttons/buttons.css +1 -1
- package/src/css/buttons/status-buttons.css +67 -49
- package/src/custom-properties-default.css +1 -1
- package/design-tokens-src/btn.minimo.tokens.jsonc +0 -200
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
btn: {
|
|
3
|
+
|
|
4
|
+
font: {
|
|
5
|
+
style: {
|
|
6
|
+
$value: '{form.control.font.style}',
|
|
7
|
+
$type: 'string'
|
|
8
|
+
},
|
|
9
|
+
weight: {
|
|
10
|
+
$value: '{font.weight.semibold}',
|
|
11
|
+
$type: 'fontWeight'
|
|
12
|
+
},
|
|
13
|
+
size: {
|
|
14
|
+
$value: '{form.control.font.size}',
|
|
15
|
+
$type: 'dimension'
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
border: {
|
|
19
|
+
radius: {
|
|
20
|
+
$value: '{form.control.border.radius}',
|
|
21
|
+
$type: 'dimension'
|
|
22
|
+
},
|
|
23
|
+
width: {
|
|
24
|
+
$value: '{form.control.border.width}',
|
|
25
|
+
$type: 'dimension'
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
|
|
29
|
+
hollow: {
|
|
30
|
+
border: {
|
|
31
|
+
width: {
|
|
32
|
+
$value: '{btn.border.width} * 2',
|
|
33
|
+
$type: 'dimension'
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
disabled: {
|
|
40
|
+
opacity: {
|
|
41
|
+
$value: '{form.control.disabled.opacity}',
|
|
42
|
+
$type: ''
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
|
|
46
|
+
focus: {
|
|
47
|
+
outline: {
|
|
48
|
+
width: {
|
|
49
|
+
$value: '{form.control.focus.outline.width}',
|
|
50
|
+
$type: 'dimension'
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
|
|
55
|
+
padding: {
|
|
56
|
+
inline: {
|
|
57
|
+
$value: '{size.base}',
|
|
58
|
+
$type: 'dimension'
|
|
59
|
+
},
|
|
60
|
+
block: {
|
|
61
|
+
$value: '{size.xs}',
|
|
62
|
+
$type: 'dimension'
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
|
|
66
|
+
xs: {
|
|
67
|
+
font: {
|
|
68
|
+
size: {
|
|
69
|
+
$value: '{font.size.xs}',
|
|
70
|
+
$type: 'dimension'
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
padding: {
|
|
74
|
+
inline: {
|
|
75
|
+
$value: '{size.xxs}',
|
|
76
|
+
$type: 'dimension'
|
|
77
|
+
},
|
|
78
|
+
block: {
|
|
79
|
+
$value: '{size.xxs}',
|
|
80
|
+
$type: 'dimension'
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
focus: {
|
|
84
|
+
outline: {
|
|
85
|
+
width: {
|
|
86
|
+
$value: '1px',
|
|
87
|
+
$type: 'dimension'
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
sm: {
|
|
93
|
+
font: {
|
|
94
|
+
size: {
|
|
95
|
+
$value: '{font.size.sm}',
|
|
96
|
+
$type: 'dimension'
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
padding: {
|
|
100
|
+
inline: {
|
|
101
|
+
$value: '{size.xs}',
|
|
102
|
+
$type: 'dimension'
|
|
103
|
+
},
|
|
104
|
+
block: {
|
|
105
|
+
$value: '{size.xxs}',
|
|
106
|
+
$type: 'dimension'
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
focus: {
|
|
110
|
+
outline: {
|
|
111
|
+
width: {
|
|
112
|
+
$value: '2px',
|
|
113
|
+
$type: 'dimension'
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
md: {
|
|
119
|
+
font: {
|
|
120
|
+
size: {
|
|
121
|
+
$value: '{font.size.md}',
|
|
122
|
+
$type: 'dimension'
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
padding: {
|
|
126
|
+
inline: {
|
|
127
|
+
$value: '{size.sm}',
|
|
128
|
+
$type: 'dimension'
|
|
129
|
+
},
|
|
130
|
+
block: {
|
|
131
|
+
$value: '{size.xs}',
|
|
132
|
+
$type: 'dimension'
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
focus: {
|
|
136
|
+
outline: {
|
|
137
|
+
width: {
|
|
138
|
+
$value: '3px',
|
|
139
|
+
$type: 'dimension'
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
},
|
|
144
|
+
lg: {
|
|
145
|
+
font: {
|
|
146
|
+
size: {
|
|
147
|
+
$value: '{font.size.lg}',
|
|
148
|
+
$type: 'dimension'
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
padding: {
|
|
152
|
+
inline: {
|
|
153
|
+
$value: '{size.md}',
|
|
154
|
+
$type: 'dimension'
|
|
155
|
+
},
|
|
156
|
+
block: {
|
|
157
|
+
$value: '{size.base}',
|
|
158
|
+
$type: 'dimension'
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
focus: {
|
|
162
|
+
outline: {
|
|
163
|
+
width: {
|
|
164
|
+
$value: '4px',
|
|
165
|
+
$type: 'dimension'
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
},
|
|
170
|
+
xl: {
|
|
171
|
+
font: {
|
|
172
|
+
size: {
|
|
173
|
+
$value: '{font.size.xl}',
|
|
174
|
+
$type: 'dimension'
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
padding: {
|
|
178
|
+
inline: {
|
|
179
|
+
$value: '{size.xl}',
|
|
180
|
+
$type: 'dimension'
|
|
181
|
+
},
|
|
182
|
+
block: {
|
|
183
|
+
$value: '{size.md}',
|
|
184
|
+
$type: 'dimension'
|
|
185
|
+
}
|
|
186
|
+
},
|
|
187
|
+
focus: {
|
|
188
|
+
outline: {
|
|
189
|
+
width: {
|
|
190
|
+
$value: '6px',
|
|
191
|
+
$type: 'dimension'
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
} // end btn
|
|
198
|
+
};
|
|
199
|
+
|
|
200
|
+
|
package/package.json
CHANGED
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
height: var(--btn-close-size);
|
|
17
17
|
padding: var(--btn-close-padding);
|
|
18
18
|
color: var(--btn-close-icon-color);
|
|
19
|
+
text-indent: -999em;
|
|
19
20
|
cursor: pointer;
|
|
20
21
|
background-color: var(--btn-close-background-color);
|
|
21
22
|
border: var(--btn-close-border-width) solid var(--btn-close-border-color);
|
|
@@ -1,72 +1,90 @@
|
|
|
1
|
+
/* TODO rivedere tutto */
|
|
2
|
+
|
|
1
3
|
.btn {
|
|
2
4
|
|
|
5
|
+
/*
|
|
6
|
+
--_button-bg-color, --_button-fg-color e --_button-border-color sono definiti in buttons.css
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
3
11
|
&.btn-success {
|
|
4
|
-
--
|
|
5
|
-
--
|
|
6
|
-
--
|
|
7
|
-
--_btn-fg-color: var(--_fg);
|
|
8
|
-
--_btn-border-color: var(--status-success-border-color);
|
|
12
|
+
--_status-bg-color: var(--status-success-color);
|
|
13
|
+
--_status-fg-color: var(--status-success-fg);
|
|
14
|
+
--_status-border-color: var(--status-success-border-color);
|
|
9
15
|
}
|
|
10
16
|
&.btn-info {
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--_btn-fg-color: var(--_fg);
|
|
15
|
-
--_btn-border-color: var(--status-info-border-color);
|
|
17
|
+
--_status-bg-color: var(--status-info-color);
|
|
18
|
+
--_status-fg-color: var(--status-info-fg);
|
|
19
|
+
--_status-border-color: var(--status-info-border-color);
|
|
16
20
|
}
|
|
17
21
|
&.btn-danger, &.btn-error {
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--_btn-fg-color: var(--_fg);
|
|
22
|
-
--_btn-border-color: var(--status-danger-border-color);
|
|
22
|
+
--_status-bg-color: var(--status-danger-color);
|
|
23
|
+
--_status-fg-color: var(--status-danger-fg);
|
|
24
|
+
--_status-border-color: var(--status-danger-border-color);
|
|
23
25
|
}
|
|
24
26
|
|
|
27
|
+
&.btn-success, &.btn-info, &.btn-danger, &.btn-error {
|
|
28
|
+
--_status-hover-bg-color: color-mix(in srgb, var(--_status-bg-color) 30%, transparent);
|
|
29
|
+
--_status-hover-fg-color: var(--_status-bg-color);
|
|
30
|
+
--_status-hover-border-color: var(--_status-bg-color);
|
|
31
|
+
|
|
32
|
+
--_status-focus-outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_button-bg-color) 40%, transparent);
|
|
33
|
+
--_status-active-bg: color-mix(in srgb, var(--_button-bg-color) 10%, transparent);
|
|
34
|
+
|
|
35
|
+
--_hollow-fg: var(--_status-bg-color);
|
|
36
|
+
}
|
|
25
37
|
|
|
26
38
|
&.btn-warning {
|
|
27
|
-
--
|
|
28
|
-
--
|
|
29
|
-
--
|
|
30
|
-
--_btn-fg-color: var(--_fg);
|
|
31
|
-
--_btn-border-color: var(--status-warning-border-color);
|
|
39
|
+
--_status-bg-color: var(--status-warning-color);
|
|
40
|
+
--_status-fg-color: var(--status-warning-fg);
|
|
41
|
+
--_status-border-color: var(--status-warning-border-color);
|
|
32
42
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
--_btn-fg-color: var(--_fg);
|
|
37
|
-
--_btn-border-color: var(--_fg);
|
|
38
|
-
}
|
|
39
|
-
}
|
|
43
|
+
--_status-hover-bg-color: color-mix(in srgb, var(--_status-bg-color) 60%, transparent);
|
|
44
|
+
--_status-hover-fg-color: var(--_status-fg-color);
|
|
45
|
+
--_status-hover-border-color: var(--_status-fg-color);
|
|
40
46
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
47
|
+
--_status-focus-outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_status-bg-color) 60%, transparent);
|
|
48
|
+
--_status-active-bg: color-mix(in srgb, var(--_button-bg-color) 30%, transparent);
|
|
49
|
+
|
|
50
|
+
--_hollow-fg: var(--_status-fg-color);
|
|
44
51
|
|
|
45
|
-
&:active {
|
|
46
|
-
--_btn-bg-color: color-mix(in srgb, var(--_bg) 30%, transparent);
|
|
47
|
-
}
|
|
48
52
|
}
|
|
49
53
|
|
|
54
|
+
&.btn-success, &.btn-info, &.btn-danger, &.btn-error, &.btn-warning {
|
|
55
|
+
|
|
56
|
+
--_button-bg-color: var(--_status-bg-color);
|
|
57
|
+
--_button-fg-color: var(--_status-fg-color);
|
|
58
|
+
--_button-border-color: var(--_status-border-color);
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
&.btn-hollow {
|
|
62
|
+
--_button-bg-color: color-mix(in srgb, var(--_status-bg-color) 10%, transparent);
|
|
63
|
+
--_button-fg-color: var(--_hollow-fg);
|
|
64
|
+
--_button-border-color: var(--_hollow-fg);
|
|
65
|
+
|
|
66
|
+
}
|
|
50
67
|
|
|
51
|
-
&.btn-success, &.btn-info, &.btn-danger {
|
|
52
68
|
|
|
53
69
|
@media (hover: hover) {
|
|
54
70
|
&:hover {
|
|
55
|
-
--
|
|
56
|
-
--
|
|
57
|
-
--
|
|
71
|
+
--_button-bg-color: var(--_status-hover-bg-color);
|
|
72
|
+
--_button-fg-color: var(--_status-hover-fg-color);
|
|
73
|
+
--_button-border-color: var(--_status-hover-border-color);
|
|
58
74
|
}
|
|
59
75
|
}
|
|
60
76
|
|
|
61
77
|
&:focus, &:active {
|
|
62
|
-
outline: var(--
|
|
78
|
+
outline: var(--_status-focus-outline);
|
|
63
79
|
}
|
|
64
80
|
|
|
65
81
|
&:active {
|
|
66
|
-
--
|
|
82
|
+
--_button-bg-color: var(--_status-active-bg);
|
|
67
83
|
}
|
|
68
84
|
}
|
|
69
85
|
|
|
86
|
+
|
|
87
|
+
/*
|
|
70
88
|
@media (prefers-color-scheme: dark) {
|
|
71
89
|
|
|
72
90
|
|
|
@@ -74,9 +92,9 @@
|
|
|
74
92
|
|
|
75
93
|
@media (hover: hover) {
|
|
76
94
|
&:hover {
|
|
77
|
-
--
|
|
78
|
-
--
|
|
79
|
-
--
|
|
95
|
+
--_button-bg-color: color-mix(in srgb, var(--_button-bg-color) 60%, #fff);
|
|
96
|
+
--_button-fg-color: var(--_button-bg-color);
|
|
97
|
+
--_button-border-color: color-mix(in srgb, var(--_button-bg-color) 40%, #fff);
|
|
80
98
|
}
|
|
81
99
|
}
|
|
82
100
|
}
|
|
@@ -85,9 +103,9 @@
|
|
|
85
103
|
|
|
86
104
|
@media (hover: hover) {
|
|
87
105
|
&:hover {
|
|
88
|
-
--
|
|
89
|
-
--
|
|
90
|
-
--
|
|
106
|
+
--_button-bg-color: color-mix(in srgb, var(--_button-bg-color) 60%, #fff);
|
|
107
|
+
--_button-fg-color: var(--_button-fg-color);
|
|
108
|
+
--_button-border-color: var(--_button-fg-color);
|
|
91
109
|
}
|
|
92
110
|
}
|
|
93
111
|
}
|
|
@@ -95,13 +113,13 @@
|
|
|
95
113
|
&.btn-success, &.btn-info, &.btn-danger, &.btn-warning {
|
|
96
114
|
|
|
97
115
|
&:focus, &:active {
|
|
98
|
-
outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--
|
|
116
|
+
outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_button-bg-color) 60%, transparent);
|
|
99
117
|
}
|
|
100
118
|
|
|
101
119
|
&:active {
|
|
102
|
-
--
|
|
103
|
-
--
|
|
120
|
+
--_button-bg-color: color-mix(in srgb, var(--_button-bg-color) 30%, transparent);
|
|
121
|
+
--_button-fg-color: var(--text-color);
|
|
104
122
|
}
|
|
105
123
|
}
|
|
106
|
-
}
|
|
124
|
+
} */
|
|
107
125
|
}
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
--btn-focus-outline-width: var(--form-control-focus-outline-width);
|
|
33
33
|
--btn-font-size: var(--form-control-font-size);
|
|
34
34
|
--btn-font-style: var(--form-control-font-style);
|
|
35
|
-
--btn-font-weight: var(--
|
|
35
|
+
--btn-font-weight: var(--font-weight-semibold);
|
|
36
36
|
--btn-hollow-border-width: calc(var(--btn-border-width) * 2);
|
|
37
37
|
--btn-lg-focus-outline-width: .25rem;
|
|
38
38
|
--btn-lg-font-size: var(--font-size-lg);
|
|
@@ -1,200 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"btn": {
|
|
3
|
-
|
|
4
|
-
"font": {
|
|
5
|
-
"style": {
|
|
6
|
-
"$value": "{form.control.font.style}",
|
|
7
|
-
"$type": "string"
|
|
8
|
-
},
|
|
9
|
-
"weight": {
|
|
10
|
-
"$value": "{form.control.font.weight}",
|
|
11
|
-
"$type": "fontWeight"
|
|
12
|
-
},
|
|
13
|
-
"size": {
|
|
14
|
-
"$value": "{form.control.font.size}",
|
|
15
|
-
"$type": "dimension"
|
|
16
|
-
}
|
|
17
|
-
},
|
|
18
|
-
"border": {
|
|
19
|
-
"radius": {
|
|
20
|
-
"$value": "{form.control.border.radius}",
|
|
21
|
-
"$type": "dimension"
|
|
22
|
-
},
|
|
23
|
-
"width": {
|
|
24
|
-
"$value": "{form.control.border.width}",
|
|
25
|
-
"$type": "dimension"
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
|
|
29
|
-
"hollow": {
|
|
30
|
-
"border": {
|
|
31
|
-
"width": {
|
|
32
|
-
"$value": "{btn.border.width} * 2",
|
|
33
|
-
"$type": "dimension"
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
},
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
"disabled": {
|
|
40
|
-
"opacity": {
|
|
41
|
-
"$value": "{form.control.disabled.opacity}",
|
|
42
|
-
"$type": ""
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
|
|
46
|
-
"focus": {
|
|
47
|
-
"outline": {
|
|
48
|
-
"width": {
|
|
49
|
-
"$value": "{form.control.focus.outline.width}",
|
|
50
|
-
"$type": "dimension"
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
},
|
|
54
|
-
|
|
55
|
-
"padding": {
|
|
56
|
-
"inline": {
|
|
57
|
-
"$value": "{size.base}",
|
|
58
|
-
"$type": "dimension"
|
|
59
|
-
},
|
|
60
|
-
"block": {
|
|
61
|
-
"$value": "{size.xs}",
|
|
62
|
-
"$type": "dimension"
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
|
|
66
|
-
"xs": {
|
|
67
|
-
"font": {
|
|
68
|
-
"size": {
|
|
69
|
-
"$value": "{font.size.xs}",
|
|
70
|
-
"$type": "dimension"
|
|
71
|
-
}
|
|
72
|
-
},
|
|
73
|
-
"padding": {
|
|
74
|
-
"inline": {
|
|
75
|
-
"$value": "{size.xxs}",
|
|
76
|
-
"$type": "dimension"
|
|
77
|
-
},
|
|
78
|
-
"block": {
|
|
79
|
-
"$value": "{size.xxs}",
|
|
80
|
-
"$type": "dimension"
|
|
81
|
-
}
|
|
82
|
-
},
|
|
83
|
-
"focus": {
|
|
84
|
-
"outline": {
|
|
85
|
-
"width": {
|
|
86
|
-
"$value": "1px",
|
|
87
|
-
"$type": "dimension"
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
"sm": {
|
|
93
|
-
"font": {
|
|
94
|
-
"size": {
|
|
95
|
-
"$value": "{font.size.sm}",
|
|
96
|
-
"$type": "dimension"
|
|
97
|
-
}
|
|
98
|
-
},
|
|
99
|
-
"padding": {
|
|
100
|
-
"inline": {
|
|
101
|
-
"$value": "{size.xs}",
|
|
102
|
-
"$type": "dimension"
|
|
103
|
-
},
|
|
104
|
-
"block": {
|
|
105
|
-
"$value": "{size.xxs}",
|
|
106
|
-
"$type": "dimension"
|
|
107
|
-
}
|
|
108
|
-
},
|
|
109
|
-
"focus": {
|
|
110
|
-
"outline": {
|
|
111
|
-
"width": {
|
|
112
|
-
"$value": "2px",
|
|
113
|
-
"$type": "dimension"
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
},
|
|
118
|
-
"md": {
|
|
119
|
-
"font": {
|
|
120
|
-
"size": {
|
|
121
|
-
"$value": "{font.size.md}",
|
|
122
|
-
"$type": "dimension"
|
|
123
|
-
}
|
|
124
|
-
},
|
|
125
|
-
"padding": {
|
|
126
|
-
"inline": {
|
|
127
|
-
"$value": "{size.sm}",
|
|
128
|
-
"$type": "dimension"
|
|
129
|
-
},
|
|
130
|
-
"block": {
|
|
131
|
-
"$value": "{size.xs}",
|
|
132
|
-
"$type": "dimension"
|
|
133
|
-
}
|
|
134
|
-
},
|
|
135
|
-
"focus": {
|
|
136
|
-
"outline": {
|
|
137
|
-
"width": {
|
|
138
|
-
"$value": "3px",
|
|
139
|
-
"$type": "dimension"
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
},
|
|
144
|
-
"lg": {
|
|
145
|
-
"font": {
|
|
146
|
-
"size": {
|
|
147
|
-
"$value": "{font.size.lg}",
|
|
148
|
-
"$type": "dimension"
|
|
149
|
-
}
|
|
150
|
-
},
|
|
151
|
-
"padding": {
|
|
152
|
-
"inline": {
|
|
153
|
-
"$value": "{size.md}",
|
|
154
|
-
"$type": "dimension"
|
|
155
|
-
},
|
|
156
|
-
"block": {
|
|
157
|
-
"$value": "{size.base}",
|
|
158
|
-
"$type": "dimension"
|
|
159
|
-
}
|
|
160
|
-
},
|
|
161
|
-
"focus": {
|
|
162
|
-
"outline": {
|
|
163
|
-
"width": {
|
|
164
|
-
"$value": "4px",
|
|
165
|
-
"$type": "dimension"
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
},
|
|
170
|
-
"xl": {
|
|
171
|
-
"font": {
|
|
172
|
-
"size": {
|
|
173
|
-
"$value": "{font.size.xl}",
|
|
174
|
-
"$type": "dimension"
|
|
175
|
-
}
|
|
176
|
-
},
|
|
177
|
-
"padding": {
|
|
178
|
-
"inline": {
|
|
179
|
-
"$value": "{size.xl}",
|
|
180
|
-
"$type": "dimension"
|
|
181
|
-
},
|
|
182
|
-
"block": {
|
|
183
|
-
"$value": "{size.md}",
|
|
184
|
-
"$type": "dimension"
|
|
185
|
-
}
|
|
186
|
-
},
|
|
187
|
-
"focus": {
|
|
188
|
-
"outline": {
|
|
189
|
-
"width": {
|
|
190
|
-
"$value": "6px",
|
|
191
|
-
"$type": "dimension"
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
} // end btn
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
|