@metropolle/design-system 1.0.0-beta.2025.9.5.1835.558ae37 → 1.0.0-beta.2025.9.6.332.ee072d6

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.
@@ -80,8 +80,10 @@ button[class*="ghost"]:hover {
80
80
  border-color: rgba(255, 255, 255, 0.3) !important;
81
81
  }
82
82
 
83
- /* Raw button baseline */
84
- button {
83
+ /* Raw button baseline
84
+ Scope only to unstyled raw buttons to avoid overriding
85
+ components that set inline styles or DS classes */
86
+ button:not([style]):not(.mds-button):not([class*="mds-button"]):not([class*="btn"]) {
85
87
  background-color: rgba(255, 255, 255, 0.1) !important;
86
88
  color: #ffffff !important;
87
89
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
@@ -92,7 +94,7 @@ button {
92
94
  font-family: inherit !important;
93
95
  }
94
96
 
95
- button:hover {
97
+ button:not([style]):not(.mds-button):not([class*="mds-button"]):not([class*="btn"]):hover {
96
98
  background-color: rgba(255, 255, 255, 0.15) !important;
97
99
  border-color: rgba(255, 255, 255, 0.3) !important;
98
100
  transform: translateY(-1px) !important;
@@ -109,7 +111,7 @@ button:hover {
109
111
  border: none !important;
110
112
  }
111
113
 
112
- button:disabled {
114
+ button:not([style]):not(.mds-button):not([class*="mds-button"]):not([class*="btn"]):disabled {
113
115
  opacity: 0.5 !important;
114
116
  cursor: not-allowed !important;
115
117
  transform: none !important;
@@ -193,17 +195,18 @@ html[data-theme="light"] button:hover {
193
195
  ======================================== */
194
196
  select,
195
197
  .mds-period-filter__select {
196
- background-color: rgba(255, 255, 255, 0.1) !important;
198
+ /* Match DS ghost button default state */
199
+ background-color: transparent !important;
197
200
  color: #ffffff !important;
198
- border: 1px solid rgba(255, 255, 255, 0.2) !important;
201
+ border: none !important;
199
202
  border-radius: 8px !important;
200
203
  padding: 0.5rem 1rem !important;
201
204
  font-family: inherit !important;
202
205
  font-size: 0.875rem !important;
203
206
  cursor: pointer !important;
204
- transition: all 0.2s ease !important;
205
- backdrop-filter: blur(10px) !important;
206
- -webkit-backdrop-filter: blur(10px) !important;
207
+ transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
208
+ backdrop-filter: none !important;
209
+ -webkit-backdrop-filter: none !important;
207
210
  -webkit-appearance: none !important;
208
211
  -moz-appearance: none !important;
209
212
  appearance: none !important;
@@ -216,8 +219,8 @@ select,
216
219
 
217
220
  select:hover,
218
221
  .mds-period-filter__select:hover {
219
- background-color: rgba(255, 255, 255, 0.15) !important;
220
- border-color: rgba(255, 255, 255, 0.3) !important;
222
+ /* Same hover treatment as DS ghost */
223
+ background-color: var(--mds-color-background-secondary) !important;
221
224
  }
222
225
 
223
226
  select:focus,
@@ -242,16 +245,15 @@ select option {
242
245
  /* Light theme select styles */
243
246
  html[data-theme="light"] select,
244
247
  html[data-theme="light"] .mds-period-filter__select {
245
- background-color: rgba(0, 0, 0, 0.05) !important;
248
+ background-color: transparent !important;
246
249
  color: #1a1a1a !important;
247
- border-color: rgba(0, 0, 0, 0.1) !important;
250
+ border: none !important;
248
251
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
249
252
  }
250
253
 
251
254
  html[data-theme="light"] select:hover,
252
255
  html[data-theme="light"] .mds-period-filter__select:hover {
253
- background-color: rgba(0, 0, 0, 0.08) !important;
254
- border-color: rgba(0, 0, 0, 0.15) !important;
256
+ background-color: rgba(0, 0, 0, 0.05) !important;
255
257
  }
256
258
 
257
259
  html[data-theme="light"] select:focus,
@@ -454,4 +456,3 @@ html[data-theme="light"] select[class*="mds-select"] {
454
456
  color: #1a1a1a !important;
455
457
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
456
458
  }
457
-
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@metropolle/design-system",
3
- "version": "1.0.0-beta.2025.09.05.1835.558ae37",
3
+ "version": "1.0.0-beta.2025.09.06.0332.ee072d6",
4
4
  "description": "Sistema de design unificado para a plataforma Metropolle",
5
5
  "type": "module",
6
6
  "main": "dist/react/index.js",