@massimo-cassandro/minimo 0.7.2 → 0.8.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-color-themes.minimo.tokens.jsonc +182 -0
- package/design-tokens/btn-primary.minimo.tokens.jsonc +86 -0
- package/design-tokens-src/btn-color-themes.minimo.tokens.mjs +106 -0
- package/package.json +1 -1
- package/src/css/buttons/btn-close.css +3 -3
- package/src/css/buttons/buttons-primary.css +44 -0
- package/src/css/buttons/buttons-secondary.css +44 -0
- package/src/css/buttons/buttons.css +0 -106
- package/src/css/forms/forms.css +4 -3
- package/src/custom-properties-default.css +14 -0
- package/src/index-template.css +2 -0
- package/design-tokens-src/btn-primary.minimo.tokens.jsonc +0 -100
- package/design-tokens-src/btn-secondary.minimo.tokens.mjs +0 -34
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
// -----------------------------------------------------------------------
|
|
2
|
+
// Generated file — do not edit manually.
|
|
3
|
+
// This file is produced by the design-token build pipeline.
|
|
4
|
+
// Source of truth: the token files in the project source directory.
|
|
5
|
+
// Re-generate with: node build-tokens.mjs --config <path/to/config>
|
|
6
|
+
// -----------------------------------------------------------------------
|
|
7
|
+
{
|
|
8
|
+
"btn": {
|
|
9
|
+
"primary": {
|
|
10
|
+
"background": {
|
|
11
|
+
"color": {
|
|
12
|
+
"$type": "color",
|
|
13
|
+
"$value": "{primary.100}"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"color": {
|
|
17
|
+
"$type": "color",
|
|
18
|
+
"$value": "{primary.100-fg}"
|
|
19
|
+
},
|
|
20
|
+
"border": {
|
|
21
|
+
"color": {
|
|
22
|
+
"$type": "color",
|
|
23
|
+
"$value": "{btn.primary.background.color}"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"focus": {
|
|
27
|
+
"outline": {
|
|
28
|
+
"color": {
|
|
29
|
+
"$type": "color",
|
|
30
|
+
"$value": "color-mix(in srgb, #083865 60%, transparent);"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"hover": {
|
|
35
|
+
"background": {
|
|
36
|
+
"color": {
|
|
37
|
+
"$type": "color",
|
|
38
|
+
"$value": "{btn.primary.color}"
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
"color": {
|
|
42
|
+
"$type": "color",
|
|
43
|
+
"$value": "{btn.primary.background.color}"
|
|
44
|
+
},
|
|
45
|
+
"border": {
|
|
46
|
+
"color": {
|
|
47
|
+
"$type": "color",
|
|
48
|
+
"$value": "{btn.primary.hover.color}"
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
"active": {
|
|
53
|
+
"background": {
|
|
54
|
+
"color": {
|
|
55
|
+
"$type": "color",
|
|
56
|
+
"$value": "color-mix(in srgb, #083865 60%, #000);"
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
"color": {
|
|
60
|
+
"$type": "color",
|
|
61
|
+
"$value": "{btn.primary.color}"
|
|
62
|
+
},
|
|
63
|
+
"border": {
|
|
64
|
+
"color": {
|
|
65
|
+
"$type": "color",
|
|
66
|
+
"$value": "{btn.primary.active.background.color}"
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
"hollow": {
|
|
71
|
+
"background": {
|
|
72
|
+
"color": {
|
|
73
|
+
"$type": "color",
|
|
74
|
+
"$value": "{btn.primary.color}"
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
"color": {
|
|
78
|
+
"$type": "color",
|
|
79
|
+
"$value": "{btn.primary.background.color}"
|
|
80
|
+
},
|
|
81
|
+
"hover": {
|
|
82
|
+
"background": {
|
|
83
|
+
"color": {
|
|
84
|
+
"$type": "color",
|
|
85
|
+
"$value": "color-mix(in srgb, #083865 20%, transparent);"
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
"color": {
|
|
89
|
+
"$type": "color",
|
|
90
|
+
"$value": "{btn.primary.hollow.color}"
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
"secondary": {
|
|
96
|
+
"background": {
|
|
97
|
+
"color": {
|
|
98
|
+
"$type": "color",
|
|
99
|
+
"$value": "{secondary.100}"
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
"color": {
|
|
103
|
+
"$type": "color",
|
|
104
|
+
"$value": "{secondary.100-fg}"
|
|
105
|
+
},
|
|
106
|
+
"border": {
|
|
107
|
+
"color": {
|
|
108
|
+
"$type": "color",
|
|
109
|
+
"$value": "{btn.secondary.background.color}"
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
"focus": {
|
|
113
|
+
"outline": {
|
|
114
|
+
"color": {
|
|
115
|
+
"$type": "color",
|
|
116
|
+
"$value": "color-mix(in srgb, #650853 60%, transparent);"
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
"hover": {
|
|
121
|
+
"background": {
|
|
122
|
+
"color": {
|
|
123
|
+
"$type": "color",
|
|
124
|
+
"$value": "{btn.secondary.color}"
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
"color": {
|
|
128
|
+
"$type": "color",
|
|
129
|
+
"$value": "{btn.secondary.background.color}"
|
|
130
|
+
},
|
|
131
|
+
"border": {
|
|
132
|
+
"color": {
|
|
133
|
+
"$type": "color",
|
|
134
|
+
"$value": "{btn.secondary.hover.color}"
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
"active": {
|
|
139
|
+
"background": {
|
|
140
|
+
"color": {
|
|
141
|
+
"$type": "color",
|
|
142
|
+
"$value": "color-mix(in srgb, #650853 60%, #000);"
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
"color": {
|
|
146
|
+
"$type": "color",
|
|
147
|
+
"$value": "{btn.secondary.color}"
|
|
148
|
+
},
|
|
149
|
+
"border": {
|
|
150
|
+
"color": {
|
|
151
|
+
"$type": "color",
|
|
152
|
+
"$value": "{btn.secondary.active.background.color}"
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
"hollow": {
|
|
157
|
+
"background": {
|
|
158
|
+
"color": {
|
|
159
|
+
"$type": "color",
|
|
160
|
+
"$value": "{btn.secondary.color}"
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
"color": {
|
|
164
|
+
"$type": "color",
|
|
165
|
+
"$value": "{btn.secondary.background.color}"
|
|
166
|
+
},
|
|
167
|
+
"hover": {
|
|
168
|
+
"background": {
|
|
169
|
+
"color": {
|
|
170
|
+
"$type": "color",
|
|
171
|
+
"$value": "color-mix(in srgb, #650853 20%, transparent);"
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
"color": {
|
|
175
|
+
"$type": "color",
|
|
176
|
+
"$value": "{btn.secondary.hollow.color}"
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
@@ -91,6 +91,92 @@
|
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
|
+
},
|
|
95
|
+
"secondary": {
|
|
96
|
+
"background": {
|
|
97
|
+
"color": {
|
|
98
|
+
"$type": "color",
|
|
99
|
+
"$value": "{secondary.100}"
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
"color": {
|
|
103
|
+
"$type": "color",
|
|
104
|
+
"$value": "{secondary.100-fg}"
|
|
105
|
+
},
|
|
106
|
+
"border": {
|
|
107
|
+
"color": {
|
|
108
|
+
"$type": "color",
|
|
109
|
+
"$value": "{btn.secondary.background.color}"
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
"focus": {
|
|
113
|
+
"outline": {
|
|
114
|
+
"color": {
|
|
115
|
+
"$type": "color",
|
|
116
|
+
"$value": "color-mix(in srgb, #650853 60%, transparent);"
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
"hover": {
|
|
121
|
+
"background": {
|
|
122
|
+
"color": {
|
|
123
|
+
"$type": "color",
|
|
124
|
+
"$value": "{btn.secondary.color}"
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
"color": {
|
|
128
|
+
"$type": "color",
|
|
129
|
+
"$value": "{btn.secondary.background.color}"
|
|
130
|
+
},
|
|
131
|
+
"border": {
|
|
132
|
+
"color": {
|
|
133
|
+
"$type": "color",
|
|
134
|
+
"$value": "{btn.secondary.hover.color}"
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
"active": {
|
|
139
|
+
"background": {
|
|
140
|
+
"color": {
|
|
141
|
+
"$type": "color",
|
|
142
|
+
"$value": "color-mix(in srgb, #650853 60%, #000);"
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
"color": {
|
|
146
|
+
"$type": "color",
|
|
147
|
+
"$value": "{btn.secondary.color}"
|
|
148
|
+
},
|
|
149
|
+
"border": {
|
|
150
|
+
"color": {
|
|
151
|
+
"$type": "color",
|
|
152
|
+
"$value": "{btn.secondary.active.background.color}"
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
"hollow": {
|
|
157
|
+
"background": {
|
|
158
|
+
"color": {
|
|
159
|
+
"$type": "color",
|
|
160
|
+
"$value": "{btn.secondary.color}"
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
"color": {
|
|
164
|
+
"$type": "color",
|
|
165
|
+
"$value": "{btn.secondary.background.color}"
|
|
166
|
+
},
|
|
167
|
+
"hover": {
|
|
168
|
+
"background": {
|
|
169
|
+
"color": {
|
|
170
|
+
"$type": "color",
|
|
171
|
+
"$value": "color-mix(in srgb, #650853 20%, transparent);"
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
"color": {
|
|
175
|
+
"$type": "color",
|
|
176
|
+
"$value": "{btn.secondary.hollow.color}"
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
94
180
|
}
|
|
95
181
|
}
|
|
96
182
|
}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
const makeBtnObj = theme => {
|
|
2
|
+
|
|
3
|
+
return {
|
|
4
|
+
background: {
|
|
5
|
+
color: {
|
|
6
|
+
$value: `{${theme}.100}`,
|
|
7
|
+
$type: 'color'
|
|
8
|
+
}
|
|
9
|
+
},
|
|
10
|
+
color: {
|
|
11
|
+
$value: `{${theme}.100-fg}`,
|
|
12
|
+
$type: 'color'
|
|
13
|
+
},
|
|
14
|
+
|
|
15
|
+
border: {
|
|
16
|
+
color: {
|
|
17
|
+
$value: `{btn.${theme}.background.color}`,
|
|
18
|
+
$type: 'color'
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
|
|
22
|
+
focus: {
|
|
23
|
+
outline: {
|
|
24
|
+
color: {
|
|
25
|
+
$value: `color-mix(in srgb, {btn.${theme}.background.color} 60%, transparent);`,
|
|
26
|
+
$type: 'color'
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
|
|
31
|
+
hover: {
|
|
32
|
+
background: {
|
|
33
|
+
color: {
|
|
34
|
+
$value: `{btn.${theme}.color}`,
|
|
35
|
+
$type: 'color'
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
color: {
|
|
39
|
+
$value: `{btn.${theme}.background.color}`,
|
|
40
|
+
$type: 'color'
|
|
41
|
+
},
|
|
42
|
+
|
|
43
|
+
border: {
|
|
44
|
+
color: {
|
|
45
|
+
$value: `{btn.${theme}.hover.color}`,
|
|
46
|
+
$type: 'color'
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
|
|
51
|
+
active: {
|
|
52
|
+
background: {
|
|
53
|
+
color: {
|
|
54
|
+
$value: `color-mix(in srgb, {btn.${theme}.background.color} 60%, #000);`,
|
|
55
|
+
$type: 'color'
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
color: {
|
|
59
|
+
$value: `{btn.${theme}.color}`,
|
|
60
|
+
$type: 'color'
|
|
61
|
+
},
|
|
62
|
+
|
|
63
|
+
border: {
|
|
64
|
+
color: {
|
|
65
|
+
$value: `{btn.${theme}.active.background.color}`,
|
|
66
|
+
$type: 'color'
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
|
|
71
|
+
hollow: {
|
|
72
|
+
background: {
|
|
73
|
+
color: {
|
|
74
|
+
$value: `{btn.${theme}.color}`,
|
|
75
|
+
$type: 'color'
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
color: {
|
|
79
|
+
$value: `{btn.${theme}.background.color}`,
|
|
80
|
+
$type: 'color'
|
|
81
|
+
},
|
|
82
|
+
|
|
83
|
+
hover: {
|
|
84
|
+
background: {
|
|
85
|
+
color: {
|
|
86
|
+
$value: `{btn.${theme}.background.color}`,
|
|
87
|
+
$type: 'color'
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
color: {
|
|
91
|
+
$value: `{btn.${theme}.color}`,
|
|
92
|
+
$type: 'color'
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
},
|
|
96
|
+
|
|
97
|
+
} // end hollow
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
const btns = {};
|
|
102
|
+
|
|
103
|
+
['primary', 'secondary']
|
|
104
|
+
.forEach(theme => btns[theme] = makeBtnObj(theme));
|
|
105
|
+
|
|
106
|
+
export default {btn: btns};
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/*
|
|
2
|
-
<button type="button" class="btn-close" aria-label="Chiudi"
|
|
2
|
+
<button type="button" class="btn-close" aria-label="Chiudi">Chiudi</button>
|
|
3
|
+
<button type="button" class="btn-close">Chiudi</button>
|
|
3
4
|
*/
|
|
4
5
|
|
|
5
|
-
/*
|
|
6
|
-
|
|
6
|
+
/* TODO controllare allineamento x interna - prob. valutare meglio l'ingombro dello spessore */
|
|
7
7
|
|
|
8
8
|
.btn-close {
|
|
9
9
|
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
|
|
2
|
+
.btn-primary {
|
|
3
|
+
--_button-bg-color: var(--btn-primary-background-color);
|
|
4
|
+
--_button-fg-color: var(--btn-primary-color);
|
|
5
|
+
--_button-border-color: var(--btn-primary-border-color);
|
|
6
|
+
|
|
7
|
+
@media (hover: hover) {
|
|
8
|
+
&:hover {
|
|
9
|
+
--_button-bg-color: var(--btn-primary-hover-background-color);
|
|
10
|
+
--_button-fg-color: var(--btn-primary-hover-color);
|
|
11
|
+
--_button-border-color: var(--btn-primary-hover-border-color);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&:focus, &:active {
|
|
16
|
+
outline: var(--btn-focus-outline-width) solid var(--btn-primary-focus-outline-color);
|
|
17
|
+
/* outline-offset: 4px; */
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&:active {
|
|
21
|
+
--_button-bg-color: var(--btn-primary-active-background-color);
|
|
22
|
+
--_button-fg-color: var(--btn-primary-active-color);
|
|
23
|
+
--_button-border-color: var(--btn-primary-active-border-color);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
&.btn-hollow {
|
|
28
|
+
|
|
29
|
+
--_button-bg-color: var(--btn-primary-hollow-background-color);
|
|
30
|
+
--_button-fg-color: var(--btn-primary-hollow-color);
|
|
31
|
+
/* --_button-border-color: var(--__btn-o-primary-border-color); */
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
@media (hover: hover) {
|
|
35
|
+
&:hover {
|
|
36
|
+
--_button-bg-color: var(--btn-primary-hollow-hover-background-color);
|
|
37
|
+
--_button-fg-color: var(--btn-primary-hollow-hover-color);
|
|
38
|
+
/* --_button-border-color: var(--__btn-o-primary-hover-border-color); */
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
} /* end .btn-primary.btn-hollow */
|
|
43
|
+
|
|
44
|
+
} /* end btn-primary */
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
|
|
2
|
+
.btn-secondary {
|
|
3
|
+
--_button-bg-color: var(--btn-secondary-background-color);
|
|
4
|
+
--_button-fg-color: var(--btn-secondary-color);
|
|
5
|
+
--_button-border-color: var(--btn-secondary-border-color);
|
|
6
|
+
|
|
7
|
+
@media (hover: hover) {
|
|
8
|
+
&:hover {
|
|
9
|
+
--_button-bg-color: var(--btn-secondary-hover-background-color);
|
|
10
|
+
--_button-fg-color: var(--btn-secondary-hover-color);
|
|
11
|
+
--_button-border-color: var(--btn-secondary-hover-border-color);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&:focus, &:active {
|
|
16
|
+
outline: var(--btn-focus-outline-width) solid var(--btn-secondary-focus-outline-color);
|
|
17
|
+
/* outline-offset: 4px; */
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&:active {
|
|
21
|
+
--_button-bg-color: var(--btn-secondary-active-background-color);
|
|
22
|
+
--_button-fg-color: var(--btn-secondary-active-color);
|
|
23
|
+
--_button-border-color: var(--btn-secondary-active-border-color);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
&.btn-hollow {
|
|
28
|
+
|
|
29
|
+
--_button-bg-color: var(--btn-secondary-hollow-background-color);
|
|
30
|
+
--_button-fg-color: var(--btn-secondary-hollow-color);
|
|
31
|
+
/* --_button-border-color: var(--__btn-o-secondary-border-color); */
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
@media (hover: hover) {
|
|
35
|
+
&:hover {
|
|
36
|
+
--_button-bg-color: var(--btn-secondary-hollow-hover-background-color);
|
|
37
|
+
--_button-fg-color: var(--btn-secondary-hollow-hover-color);
|
|
38
|
+
/* --_button-border-color: var(--__btn-o-secondary-hover-border-color); */
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
} /* end .btn-secondary.btn-hollow */
|
|
43
|
+
|
|
44
|
+
} /* end btn-secondary */
|
|
@@ -86,112 +86,6 @@ a.btn {
|
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
|
|
89
|
-
&.btn-primary {
|
|
90
|
-
--_button-bg-color: var(--btn-primary-background-color);
|
|
91
|
-
--_button-fg-color: var(--btn-primary-color);
|
|
92
|
-
--_button-border-color: var(--btn-primary-border-color);
|
|
93
|
-
|
|
94
|
-
@media (hover: hover) {
|
|
95
|
-
&:hover {
|
|
96
|
-
--_button-bg-color: var(--btn-primary-hover-background-color);
|
|
97
|
-
--_button-fg-color: var(--btn-primary-hover-color);
|
|
98
|
-
--_button-border-color: var(--btn-primary-hover-border-color);
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
&:focus, &:active {
|
|
103
|
-
outline: var(--btn-focus-outline-width) solid var(--btn-primary-focus-outline-color);
|
|
104
|
-
/* outline-offset: 4px; */
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
&:active {
|
|
108
|
-
--_button-bg-color: var(--btn-primary-active-background-color);
|
|
109
|
-
--_button-fg-color: var(--btn-primary-active-color);
|
|
110
|
-
--_button-border-color: var(--btn-primary-active-border-color);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
&.btn-hollow {
|
|
115
|
-
|
|
116
|
-
--_button-bg-color: var(--btn-primary-hollow-background-color);
|
|
117
|
-
--_button-fg-color: var(--btn-primary-hollow-color);
|
|
118
|
-
/* --_button-border-color: var(--__btn-o-primary-border-color); */
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
@media (hover: hover) {
|
|
122
|
-
&:hover {
|
|
123
|
-
--_button-bg-color: var(--btn-primary-hollow-hover-background-color);
|
|
124
|
-
--_button-fg-color: var(--btn-primary-hollow-hover-color);
|
|
125
|
-
/* --_button-border-color: var(--__btn-o-primary-hover-border-color); */
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
/* &:focus, &:active {
|
|
130
|
-
outline: var(--__btn-focus-outline-width) solid var(--__btn-o-primary-focus-outline-color);
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
&:active {
|
|
134
|
-
--_button-bg-color: var(--__btn-o-primary-active-bg-color);
|
|
135
|
-
--_button-fg-color: var(--__btn-o-primary-active-fg-color);
|
|
136
|
-
--_button-border-color: var(--__btn-o-primary-active-border-color);
|
|
137
|
-
} */
|
|
138
|
-
|
|
139
|
-
} /* end .btn-primary,btn-hollow */
|
|
140
|
-
|
|
141
|
-
} /* end btn-primary */
|
|
142
|
-
|
|
143
|
-
&.btn-secondary {
|
|
144
|
-
--_button-bg-color: var(--btn-secondary-background-color));
|
|
145
|
-
--_button-fg-color: var(--btn-secondary-color);
|
|
146
|
-
--_button-border-color: var(--btn-secondary-border-color);
|
|
147
|
-
|
|
148
|
-
@media (hover: hover) {
|
|
149
|
-
&:hover {
|
|
150
|
-
--_button-bg-color: var(--btn-secondary-hover-bg-color);
|
|
151
|
-
--_button-fg-color: var(--btn-secondary-hover-fg-color);
|
|
152
|
-
--_button-border-color: var(--btn-secondary-hover-border-color);
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
&:focus, &:active {
|
|
157
|
-
outline: var(--btn-focus-outline-width) solid var(--btn-secondary-focus-outline-color);
|
|
158
|
-
/* outline-offset: 4px; */
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
&:active {
|
|
162
|
-
--_button-bg-color: var(--btn-secondary-active-bg-color);
|
|
163
|
-
--_button-fg-color: var(--btn-secondary-active-fg-color);
|
|
164
|
-
--_button-border-color: var(--btn-secondary-active-border-color);
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
&.btn-hollow {
|
|
168
|
-
|
|
169
|
-
/* --_button-bg-color: var(--btn-o-secondary-bg-color);
|
|
170
|
-
--_button-fg-color: var(--btn-o-secondary-fg-color);
|
|
171
|
-
--_button-border-color: var(--btn-o-secondary-border-color);
|
|
172
|
-
|
|
173
|
-
@media (hover: hover) {
|
|
174
|
-
&:hover {
|
|
175
|
-
--_button-bg-color: var(--btn-o-secondary-hover-bg-color);
|
|
176
|
-
--_button-fg-color: var(--btn-o-secondary-hover-fg-color);
|
|
177
|
-
--_button-border-color: var(--btn-o-secondary-hover-border-color);
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
&:focus, &:active {
|
|
182
|
-
outline: var(--btn-focus-outline-width) solid var(--btn-o-secondary-focus-outline-color);
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
&:active {
|
|
186
|
-
--_button-bg-color: var(--btn-o-secondary-active-bg-color);
|
|
187
|
-
--_button-fg-color: var(--btn-o-secondary-active-fg-color);
|
|
188
|
-
--_button-border-color: var(--btn-o-secondary-active-border-color);
|
|
189
|
-
} */
|
|
190
|
-
|
|
191
|
-
} /* end .btn-secondary,btn-hollow */
|
|
192
|
-
|
|
193
|
-
} /* end btn-secondary */
|
|
194
|
-
|
|
195
89
|
&.btn-icon {
|
|
196
90
|
display: inline-flex;
|
|
197
91
|
flex-flow: row nowrap;
|
package/src/css/forms/forms.css
CHANGED
|
@@ -77,14 +77,15 @@
|
|
|
77
77
|
select.form-control, .form-select {
|
|
78
78
|
|
|
79
79
|
/* --_form-select-trigger-icon-color: var(--form-control-text-color); */
|
|
80
|
-
--_trigger-icon-padding-right: var(--
|
|
80
|
+
--_trigger-icon-padding-right: calc(var(--form-control-padding-inline) * 2);
|
|
81
|
+
--_bg-img-inline-size: 16px;
|
|
81
82
|
|
|
82
83
|
padding: var(--form-control-padding-block) var(--_trigger-icon-padding-right) var(--form-control-padding-block) var(--form-control-padding-inline);
|
|
83
84
|
appearance: none;
|
|
84
85
|
background-image: var(--form-control-select-trigger-icon);
|
|
85
86
|
background-repeat: no-repeat;
|
|
86
|
-
background-position: right var(--_trigger-icon-padding-right) center;
|
|
87
|
-
background-size:
|
|
87
|
+
background-position: right calc(var(--_trigger-icon-padding-right) - var(--_bg-img-inline-size) - 2px) center;
|
|
88
|
+
background-size: var(--_bg-img-inline-size) 12px;
|
|
88
89
|
|
|
89
90
|
&[multiple],
|
|
90
91
|
&[size]:not([size='1']) {
|
|
@@ -59,6 +59,20 @@
|
|
|
59
59
|
--btn-primary-hover-background-color: var(--btn-primary-color);
|
|
60
60
|
--btn-primary-hover-border-color: var(--btn-primary-hover-color);
|
|
61
61
|
--btn-primary-hover-color: var(--btn-primary-background-color);
|
|
62
|
+
--btn-secondary-active-background-color: calc(color-mix(in srgb, var(--btn-secondary-background-color) 60%, #000) ;);
|
|
63
|
+
--btn-secondary-active-border-color: var(--btn-secondary-active-background-color);
|
|
64
|
+
--btn-secondary-active-color: var(--btn-secondary-color);
|
|
65
|
+
--btn-secondary-background-color: var(--secondary-100);
|
|
66
|
+
--btn-secondary-border-color: var(--btn-secondary-background-color);
|
|
67
|
+
--btn-secondary-color: var(--secondary-100-fg);
|
|
68
|
+
--btn-secondary-focus-outline-color: calc(color-mix(in srgb, var(--btn-secondary-background-color) 60%, transparent) ;);
|
|
69
|
+
--btn-secondary-hollow-background-color: var(--btn-secondary-color);
|
|
70
|
+
--btn-secondary-hollow-color: var(--btn-secondary-background-color);
|
|
71
|
+
--btn-secondary-hollow-hover-background-color: calc(color-mix(in srgb, var(--btn-secondary-hollow-color) 20%, transparent) ;);
|
|
72
|
+
--btn-secondary-hollow-hover-color: var(--btn-secondary-hollow-color);
|
|
73
|
+
--btn-secondary-hover-background-color: var(--btn-secondary-color);
|
|
74
|
+
--btn-secondary-hover-border-color: var(--btn-secondary-hover-color);
|
|
75
|
+
--btn-secondary-hover-color: var(--btn-secondary-background-color);
|
|
62
76
|
--btn-sm-focus-outline-width: .125rem;
|
|
63
77
|
--btn-sm-font-size: var(--font-size-sm);
|
|
64
78
|
--btn-sm-padding-block: var(--size-xxs);
|
package/src/index-template.css
CHANGED
|
@@ -23,6 +23,8 @@
|
|
|
23
23
|
/* @import '@minimo/css/forms/form-utilities.css'; */
|
|
24
24
|
|
|
25
25
|
@import '@minimo/css/buttons/buttons.css';
|
|
26
|
+
@import '@minimo/css/buttons/buttons-primary.css';
|
|
27
|
+
@import '@minimo/css/buttons/buttons-secondary.css';
|
|
26
28
|
/* @import '@minimo/css/buttons/status-buttons.css'; */
|
|
27
29
|
/* @import '@minimo/css/buttons/btn-close.css'; */
|
|
28
30
|
/* @import '@minimo/css/badge.css'; */
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"btn": {
|
|
3
|
-
"primary": {
|
|
4
|
-
"background": {
|
|
5
|
-
"color": {
|
|
6
|
-
"$value": "{primary.100}",
|
|
7
|
-
"$type": "color"
|
|
8
|
-
}
|
|
9
|
-
},
|
|
10
|
-
"color": {
|
|
11
|
-
"$value": "{primary.100-fg}",
|
|
12
|
-
"$type": "color"
|
|
13
|
-
},
|
|
14
|
-
|
|
15
|
-
"border": {
|
|
16
|
-
"color": {
|
|
17
|
-
"$value": "{btn.primary.background.color}",
|
|
18
|
-
"$type": "color"
|
|
19
|
-
}
|
|
20
|
-
},
|
|
21
|
-
|
|
22
|
-
"focus": {
|
|
23
|
-
"outline": {
|
|
24
|
-
"color": {
|
|
25
|
-
"$value": "color-mix(in srgb, {btn.primary.background.color} 60%, transparent);",
|
|
26
|
-
"$type": "color"
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
|
-
|
|
31
|
-
"hover": {
|
|
32
|
-
"background": {
|
|
33
|
-
"color": {
|
|
34
|
-
"$value": "{btn.primary.color}",
|
|
35
|
-
"$type": "color"
|
|
36
|
-
}
|
|
37
|
-
},
|
|
38
|
-
"color": {
|
|
39
|
-
"$value": "{btn.primary.background.color}",
|
|
40
|
-
"$type": "color"
|
|
41
|
-
},
|
|
42
|
-
|
|
43
|
-
"border": {
|
|
44
|
-
"color": {
|
|
45
|
-
"$value": "{btn.primary.hover.color}",
|
|
46
|
-
"$type": "color"
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
|
|
51
|
-
"active": {
|
|
52
|
-
"background": {
|
|
53
|
-
"color": {
|
|
54
|
-
"$value": "color-mix(in srgb, {btn.primary.background.color} 60%, #000);",
|
|
55
|
-
"$type": "color"
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
"color": {
|
|
59
|
-
"$value": "{btn.primary.color}",
|
|
60
|
-
"$type": "color"
|
|
61
|
-
},
|
|
62
|
-
|
|
63
|
-
"border": {
|
|
64
|
-
"color": {
|
|
65
|
-
"$value": "{btn.primary.active.background.color}",
|
|
66
|
-
"$type": "color"
|
|
67
|
-
}
|
|
68
|
-
},
|
|
69
|
-
},
|
|
70
|
-
|
|
71
|
-
"hollow": {
|
|
72
|
-
"background": {
|
|
73
|
-
"color": {
|
|
74
|
-
"$value": "{btn.primary.color}",
|
|
75
|
-
"$type": "color"
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
|
-
"color": {
|
|
79
|
-
"$value": "{btn.primary.background.color}",
|
|
80
|
-
"$type": "color"
|
|
81
|
-
},
|
|
82
|
-
|
|
83
|
-
"hover": {
|
|
84
|
-
"background": {
|
|
85
|
-
"color": {
|
|
86
|
-
"$value": "color-mix(in srgb, {btn.primary.hollow.color} 20%, transparent);",
|
|
87
|
-
"$type": "color"
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
|
-
"color": {
|
|
91
|
-
"$value": "{btn.primary.hollow.color}",
|
|
92
|
-
"$type": "color"
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
},
|
|
96
|
-
|
|
97
|
-
} // end hollow
|
|
98
|
-
} // end primary
|
|
99
|
-
} // end btn
|
|
100
|
-
}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
export default {
|
|
2
|
-
btn: {
|
|
3
|
-
|
|
4
|
-
secondary: {
|
|
5
|
-
|
|
6
|
-
hollow: {
|
|
7
|
-
|
|
8
|
-
}
|
|
9
|
-
} // end secondary
|
|
10
|
-
} // end btn
|
|
11
|
-
};
|
|
12
|
-
// --btn-secondary-bg-color: var(--_secondary);
|
|
13
|
-
// --btn-secondary-fg-color: var(--_secondary-fg);
|
|
14
|
-
// --btn-secondary-border-color: var(--_secondary);
|
|
15
|
-
// --btn-secondary-hover-bg-color: color-mix(in srgb, var(--_btn-secondary-bg-color) 70%, #000);
|
|
16
|
-
// --btn-secondary-hover-fg-color: var(--_btn-secondary-fg-color);
|
|
17
|
-
// --btn-secondary-hover-border-color: var(--_btn-secondary-hover-bg-color);
|
|
18
|
-
// --btn-secondary-active-bg-color: var(--_btn-secondary-hover-fg-color);
|
|
19
|
-
// --btn-secondary-active-fg-color: var(--_btn-secondary-hover-bg-color);
|
|
20
|
-
// --btn-secondary-active-border-color: var(--_btn-secondary-active-bg-color);
|
|
21
|
-
// --btn-secondary-focus-hollow-color: color-mix(in srgb, var(--_btn-secondary-border-color) 50%, transparent);
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
// --btn-o-secondary-bg-color: color-mix(in srgb, var(--_secondary) 5%, transparent);
|
|
26
|
-
// --btn-o-secondary-fg-color: var(--_secondary);
|
|
27
|
-
// --btn-o-secondary-border-color: var(--_secondary);
|
|
28
|
-
// --btn-o-secondary-hover-bg-color: color-mix(in srgb, var(--_secondary) 15%, #fff);
|
|
29
|
-
// --btn-o-secondary-hover-fg-color: var(--_secondary);
|
|
30
|
-
// --btn-o-secondary-hover-border-color: var(--_btn-o-secondary-border-color);
|
|
31
|
-
// --btn-o-secondary-active-bg-color: var(--_secondary);
|
|
32
|
-
// --btn-o-secondary-active-fg-color: var(--_secondary-fg);
|
|
33
|
-
// --btn-o-secondary-active-border-color: var(--_btn-o-secondary-border-color);
|
|
34
|
-
// --btn-o-secondary-focus-hollow-color: color-mix(in srgb, var(--_secondary) 50%, #fff);
|