colibri-ui 0.8.21 → 0.8.23

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 (3) hide show
  1. package/Button/Button.module.css +28 -29
  2. package/esm/Button/Button.module.css +28 -29
  3. package/package.json +1 -1
package/Button/Button.module.css CHANGED
@@ -1,5 +1,4 @@
1
1
  .root {
2
- all: unset;
3
2
  align-items: center;
4
3
  border: 1px solid;
5
4
  border-radius: 1.125rem;
@@ -68,150 +67,150 @@
68
67
  line-height: 42px;
69
68
  }
70
69
 
71
- .variant_primary {
70
+ button.variant_primary {
72
71
  background-color: var(--button-primary-bg);
73
72
  border-color: var(--button-primary-border-color);
74
73
  color: var(--button-primary-color);
75
74
  }
76
- .variant_primary:hover {
75
+ button.variant_primary:hover {
77
76
  background-color: var(--button-primary-bg-hovered);
78
77
  border-color: var(--button-primary-border-color-hovered);
79
78
  color: var(--button-primary-color-hovered);
80
79
  }
81
- .variant_primary:active {
80
+ button.variant_primary:active {
82
81
  background-color: var(--button-primary-bg-active);
83
82
  border-color: var(--button-primary-border-color-active);
84
83
  color: var(--button-primary-color-active);
85
84
  }
86
- .variant_primary_disabled {
85
+ button.variant_primary_disabled {
87
86
  background-color: var(--button-primary-bg-disabled);
88
87
  border-color: var(--button-primary-border-color-disabled);
89
88
  color: var(--button-primary-color-disabled);
90
89
  cursor: not-allowed;
91
90
  pointer-events: none;
92
91
  }
93
- .variant_secondary {
92
+ button.variant_secondary {
94
93
  background-color: var(--button-secondary-bg);
95
94
  border-color: var(--button-secondary-border-color);
96
95
  color: var(--button-secondary-color);
97
96
  }
98
- .variant_secondary:hover {
97
+ button.variant_secondary:hover {
99
98
  background-color: var(--button-secondary-bg-hovered);
100
99
  border-color: var(--button-secondary-border-color-hovered);
101
100
  color: var(--button-secondary-color-hovered);
102
101
  }
103
- .variant_secondary:active {
102
+ button.variant_secondary:active {
104
103
  background-color: var(--button-secondary-bg-active);
105
104
  border-color: var(--button-secondary-border-color-active);
106
105
  color: var(--button-secondary-color-active);
107
106
  }
108
- .variant_secondary_disabled {
107
+ button.variant_secondary_disabled {
109
108
  background-color: var(--button-secondary-bg-disabled);
110
109
  border-color: var(--button-secondary-border-color-disabled);
111
110
  color: var(--button-secondary-color-disabled);
112
111
  cursor: not-allowed;
113
112
  pointer-events: none;
114
113
  }
115
- .variant_pseudo {
114
+ button.variant_pseudo {
116
115
  background-color: var(--button-pseudo-bg);
117
116
  border-color: var(--button-pseudo-border-color);
118
117
  color: var(--button-pseudo-color);
119
118
  }
120
- .variant_pseudo:hover {
119
+ button.variant_pseudo:hover {
121
120
  background-color: var(--button-pseudo-bg-hovered);
122
121
  border-color: var(--button-pseudo-border-color-hovered);
123
122
  color: var(--button-pseudo-color-hovered);
124
123
  }
125
- .variant_pseudo:active {
124
+ button.variant_pseudo:active {
126
125
  background-color: var(--button-pseudo-bg-active);
127
126
  border-color: var(--button-pseudo-border-color-active);
128
127
  color: var(--button-pseudo-color-active);
129
128
  }
130
- .variant_pseudo_disabled {
129
+ button.variant_pseudo_disabled {
131
130
  background-color: var(--button-pseudo-bg-disabled);
132
131
  border-color: var(--button-pseudo-border-color-disabled);
133
132
  color: var(--button-pseudo-color-disabled);
134
133
  cursor: not-allowed;
135
134
  pointer-events: none;
136
135
  }
137
- .variant_outline {
136
+ button.variant_outline {
138
137
  background-color: var(--button-outline-bg);
139
138
  border-color: var(--button-outline-border-color);
140
139
  color: var(--button-outline-color);
141
140
  }
142
- .variant_outline:hover {
141
+ button.variant_outline:hover {
143
142
  background-color: var(--button-outline-bg-hovered);
144
143
  border-color: var(--button-outline-border-color-hovered);
145
144
  color: var(--button-outline-color-hovered);
146
145
  }
147
- .variant_outline:active {
146
+ button.variant_outline:active {
148
147
  background-color: var(--button-outline-bg-active);
149
148
  border-color: var(--button-outline-border-color-active);
150
149
  color: var(--button-outline-color-active);
151
150
  }
152
- .variant_outline_disabled {
151
+ button.variant_outline_disabled {
153
152
  background-color: var(--button-outline-bg-disabled);
154
153
  border-color: var(--button-outline-border-color-disabled);
155
154
  color: var(--button-outline-color-disabled);
156
155
  cursor: not-allowed;
157
156
  pointer-events: none;
158
157
  }
159
- .variant_clear {
158
+ button.variant_clear {
160
159
  background-color: transparent;
161
160
  border-color: transparent;
162
161
  color: var(--button-clear-color);
163
162
  }
164
- .variant_clear:hover {
163
+ button.variant_clear:hover {
165
164
  color: var(--button-clear-color-hovered);
166
165
  }
167
- .variant_clear:active {
166
+ button.variant_clear:active {
168
167
  color: var(--button-clear-color-active);
169
168
  }
170
- .variant_clear_disabled {
169
+ button.variant_clear_disabled {
171
170
  background-color: var(--button-clear-bg-disabled);
172
171
  border-color: var(--button-clear-border-color-disabled);
173
172
  color: var(--button-clear-color-disabled);
174
173
  cursor: not-allowed;
175
174
  pointer-events: none;
176
175
  }
177
- .variant_alert {
176
+ button.variant_alert {
178
177
  background-color: var(--button-alert-bg);
179
178
  border-color: var(--button-alert-border-color);
180
179
  color: var(--button-alert-color);
181
180
  }
182
- .variant_alert:hover {
181
+ button.variant_alert:hover {
183
182
  background-color: var(--button-alert-bg-hovered);
184
183
  border-color: var(--button-alert-border-color-hovered);
185
184
  color: var(--button-alert-color-hovered);
186
185
  }
187
- .variant_alert:active {
186
+ button.variant_alert:active {
188
187
  background-color: var(--button-alert-bg-active);
189
188
  border-color: var(--button-alert-border-color-active);
190
189
  color: var(--button-alert-color-active);
191
190
  }
192
- .variant_alert_disabled {
191
+ button.variant_alert_disabled {
193
192
  background-color: var(--button-alert-bg-disabled);
194
193
  border-color: var(--button-alert-border-color-disabled);
195
194
  color: var(--button-alert-color-disabled);
196
195
  cursor: not-allowed;
197
196
  pointer-events: none;
198
197
  }
199
- .variant_success {
198
+ button.variant_success {
200
199
  background-color: var(--button-success-bg);
201
200
  border-color: var(--button-success-border-color);
202
201
  color: var(--button-success-color);
203
202
  }
204
- .variant_success:hover {
203
+ button.variant_success:hover {
205
204
  background-color: var(--button-success-bg-hovered);
206
205
  border-color: var(--button-success-border-color-hovered);
207
206
  color: var(--button-success-color-hovered);
208
207
  }
209
- .variant_success:active {
208
+ button.variant_success:active {
210
209
  background-color: var(--button-success-bg-active);
211
210
  border-color: var(--button-success-border-color-active);
212
211
  color: var(--button-success-color-active);
213
212
  }
214
- .variant_success_disabled {
213
+ button.variant_success_disabled {
215
214
  background-color: var(--button-success-bg-disabled);
216
215
  border-color: var(--button-success-border-color-disabled);
217
216
  color: var(--button-success-color-disabled);
package/esm/Button/Button.module.css CHANGED
@@ -1,5 +1,4 @@
1
1
  .root {
2
- all: unset;
3
2
  align-items: center;
4
3
  border: 1px solid;
5
4
  border-radius: 1.125rem;
@@ -68,150 +67,150 @@
68
67
  line-height: 42px;
69
68
  }
70
69
 
71
- .variant_primary {
70
+ button.variant_primary {
72
71
  background-color: var(--button-primary-bg);
73
72
  border-color: var(--button-primary-border-color);
74
73
  color: var(--button-primary-color);
75
74
  }
76
- .variant_primary:hover {
75
+ button.variant_primary:hover {
77
76
  background-color: var(--button-primary-bg-hovered);
78
77
  border-color: var(--button-primary-border-color-hovered);
79
78
  color: var(--button-primary-color-hovered);
80
79
  }
81
- .variant_primary:active {
80
+ button.variant_primary:active {
82
81
  background-color: var(--button-primary-bg-active);
83
82
  border-color: var(--button-primary-border-color-active);
84
83
  color: var(--button-primary-color-active);
85
84
  }
86
- .variant_primary_disabled {
85
+ button.variant_primary_disabled {
87
86
  background-color: var(--button-primary-bg-disabled);
88
87
  border-color: var(--button-primary-border-color-disabled);
89
88
  color: var(--button-primary-color-disabled);
90
89
  cursor: not-allowed;
91
90
  pointer-events: none;
92
91
  }
93
- .variant_secondary {
92
+ button.variant_secondary {
94
93
  background-color: var(--button-secondary-bg);
95
94
  border-color: var(--button-secondary-border-color);
96
95
  color: var(--button-secondary-color);
97
96
  }
98
- .variant_secondary:hover {
97
+ button.variant_secondary:hover {
99
98
  background-color: var(--button-secondary-bg-hovered);
100
99
  border-color: var(--button-secondary-border-color-hovered);
101
100
  color: var(--button-secondary-color-hovered);
102
101
  }
103
- .variant_secondary:active {
102
+ button.variant_secondary:active {
104
103
  background-color: var(--button-secondary-bg-active);
105
104
  border-color: var(--button-secondary-border-color-active);
106
105
  color: var(--button-secondary-color-active);
107
106
  }
108
- .variant_secondary_disabled {
107
+ button.variant_secondary_disabled {
109
108
  background-color: var(--button-secondary-bg-disabled);
110
109
  border-color: var(--button-secondary-border-color-disabled);
111
110
  color: var(--button-secondary-color-disabled);
112
111
  cursor: not-allowed;
113
112
  pointer-events: none;
114
113
  }
115
- .variant_pseudo {
114
+ button.variant_pseudo {
116
115
  background-color: var(--button-pseudo-bg);
117
116
  border-color: var(--button-pseudo-border-color);
118
117
  color: var(--button-pseudo-color);
119
118
  }
120
- .variant_pseudo:hover {
119
+ button.variant_pseudo:hover {
121
120
  background-color: var(--button-pseudo-bg-hovered);
122
121
  border-color: var(--button-pseudo-border-color-hovered);
123
122
  color: var(--button-pseudo-color-hovered);
124
123
  }
125
- .variant_pseudo:active {
124
+ button.variant_pseudo:active {
126
125
  background-color: var(--button-pseudo-bg-active);
127
126
  border-color: var(--button-pseudo-border-color-active);
128
127
  color: var(--button-pseudo-color-active);
129
128
  }
130
- .variant_pseudo_disabled {
129
+ button.variant_pseudo_disabled {
131
130
  background-color: var(--button-pseudo-bg-disabled);
132
131
  border-color: var(--button-pseudo-border-color-disabled);
133
132
  color: var(--button-pseudo-color-disabled);
134
133
  cursor: not-allowed;
135
134
  pointer-events: none;
136
135
  }
137
- .variant_outline {
136
+ button.variant_outline {
138
137
  background-color: var(--button-outline-bg);
139
138
  border-color: var(--button-outline-border-color);
140
139
  color: var(--button-outline-color);
141
140
  }
142
- .variant_outline:hover {
141
+ button.variant_outline:hover {
143
142
  background-color: var(--button-outline-bg-hovered);
144
143
  border-color: var(--button-outline-border-color-hovered);
145
144
  color: var(--button-outline-color-hovered);
146
145
  }
147
- .variant_outline:active {
146
+ button.variant_outline:active {
148
147
  background-color: var(--button-outline-bg-active);
149
148
  border-color: var(--button-outline-border-color-active);
150
149
  color: var(--button-outline-color-active);
151
150
  }
152
- .variant_outline_disabled {
151
+ button.variant_outline_disabled {
153
152
  background-color: var(--button-outline-bg-disabled);
154
153
  border-color: var(--button-outline-border-color-disabled);
155
154
  color: var(--button-outline-color-disabled);
156
155
  cursor: not-allowed;
157
156
  pointer-events: none;
158
157
  }
159
- .variant_clear {
158
+ button.variant_clear {
160
159
  background-color: transparent;
161
160
  border-color: transparent;
162
161
  color: var(--button-clear-color);
163
162
  }
164
- .variant_clear:hover {
163
+ button.variant_clear:hover {
165
164
  color: var(--button-clear-color-hovered);
166
165
  }
167
- .variant_clear:active {
166
+ button.variant_clear:active {
168
167
  color: var(--button-clear-color-active);
169
168
  }
170
- .variant_clear_disabled {
169
+ button.variant_clear_disabled {
171
170
  background-color: var(--button-clear-bg-disabled);
172
171
  border-color: var(--button-clear-border-color-disabled);
173
172
  color: var(--button-clear-color-disabled);
174
173
  cursor: not-allowed;
175
174
  pointer-events: none;
176
175
  }
177
- .variant_alert {
176
+ button.variant_alert {
178
177
  background-color: var(--button-alert-bg);
179
178
  border-color: var(--button-alert-border-color);
180
179
  color: var(--button-alert-color);
181
180
  }
182
- .variant_alert:hover {
181
+ button.variant_alert:hover {
183
182
  background-color: var(--button-alert-bg-hovered);
184
183
  border-color: var(--button-alert-border-color-hovered);
185
184
  color: var(--button-alert-color-hovered);
186
185
  }
187
- .variant_alert:active {
186
+ button.variant_alert:active {
188
187
  background-color: var(--button-alert-bg-active);
189
188
  border-color: var(--button-alert-border-color-active);
190
189
  color: var(--button-alert-color-active);
191
190
  }
192
- .variant_alert_disabled {
191
+ button.variant_alert_disabled {
193
192
  background-color: var(--button-alert-bg-disabled);
194
193
  border-color: var(--button-alert-border-color-disabled);
195
194
  color: var(--button-alert-color-disabled);
196
195
  cursor: not-allowed;
197
196
  pointer-events: none;
198
197
  }
199
- .variant_success {
198
+ button.variant_success {
200
199
  background-color: var(--button-success-bg);
201
200
  border-color: var(--button-success-border-color);
202
201
  color: var(--button-success-color);
203
202
  }
204
- .variant_success:hover {
203
+ button.variant_success:hover {
205
204
  background-color: var(--button-success-bg-hovered);
206
205
  border-color: var(--button-success-border-color-hovered);
207
206
  color: var(--button-success-color-hovered);
208
207
  }
209
- .variant_success:active {
208
+ button.variant_success:active {
210
209
  background-color: var(--button-success-bg-active);
211
210
  border-color: var(--button-success-border-color-active);
212
211
  color: var(--button-success-color-active);
213
212
  }
214
- .variant_success_disabled {
213
+ button.variant_success_disabled {
215
214
  background-color: var(--button-success-bg-disabled);
216
215
  border-color: var(--button-success-border-color-disabled);
217
216
  color: var(--button-success-color-disabled);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "colibri-ui",
3
- "version": "0.8.21",
3
+ "version": "0.8.23",
4
4
  "description": "React UI components library",
5
5
  "main": "index.js",
6
6
  "scripts": {},