@metropolle/design-system 1.0.0-beta.20250821024300.dfbe136 → 1.0.0-beta.2026.1.1.1723.0f6bc6d

package/README.md

@@ -79,3 +79,4 @@ npm test
 ## 📄 License
 
 MIT License - see LICENSE file for details.
+

package/dist/css/compat/back.css

@@ -0,0 +1,466 @@
+/*
+  Back Compat CSS (opt-in)
+  Purpose: replicate current @back system-level styling with pixel parity,
+  without changing appearance. Import after base DS CSS.
+*/
+
+/* ================================
+   Buttons (theme-responsive)
+   ================================ */
+.mds-button--primary,
+button[class*="primary"] {
+  background-color: #60a5fa !important;
+  color: #ffffff !important;
+  border: none !important;
+  transition: all 0.2s ease !important;
+}
+
+.mds-button--primary:hover,
+button[class*="primary"]:hover {
+  background-color: #93c5fd !important;
+  transform: translateY(-1px) !important;
+}
+
+.mds-button--secondary,
+button[class*="secondary"] {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  color: #ffffff !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  backdrop-filter: blur(10px) !important;
+  transition: all 0.2s ease !important;
+}
+
+.mds-button--secondary:hover,
+button[class*="secondary"]:hover {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  border-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+.mds-button--outline,
+button[class*="outline"] {
+  background-color: transparent !important;
+  color: #ffffff !important;
+  border: 1px solid rgba(255, 255, 255, 0.3) !important;
+  transition: all 0.2s ease !important;
+}
+
+.mds-button--outline:hover,
+button[class*="outline"]:hover {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  border-color: rgba(255, 255, 255, 0.5) !important;
+}
+
+.mds-button--glass,
+button[class*="glass"] {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  color: #ffffff !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  backdrop-filter: blur(10px) !important;
+  transition: all 0.2s ease !important;
+}
+
+.mds-button--glass:hover,
+button[class*="glass"]:hover {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  border-color: rgba(255, 255, 255, 0.3) 
+    !important;
+}
+
+.mds-button--ghost,
+button[class*="ghost"] {
+  background-color: transparent !important;
+  color: #ffffff !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  transition: all 0.2s ease !important;
+}
+
+.mds-button--ghost:hover,
+button[class*="ghost"]:hover {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  border-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+/* Raw button baseline
+   Scope only to unstyled raw buttons to avoid overriding
+   components that set inline styles or DS classes */
+button:not([style]):not(.mds-button):not([class*="mds-button"]):not([class*="btn"]) {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  color: #ffffff !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  border-radius: 8px !important;
+  padding: 0.5rem 1rem !important;
+  cursor: pointer !important;
+  transition: all 0.2s ease !important;
+  font-family: inherit !important;
+}
+
+button:not([style]):not(.mds-button):not([class*="mds-button"]):not([class*="btn"]):hover {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  border-color: rgba(255, 255, 255, 0.3) !important;
+  transform: translateY(-1px) !important;
+}
+
+/* Modal close button: keep static (no lift) but preserve vertical centering */
+.mds-modal-header > button[aria-label="Fechar"],
+.mds-modal-header > button[aria-label="Fechar"]:hover,
+.mds-modal-header > button[aria-label="Fechar"]:focus,
+.mds-modal-header > button[aria-label="Fechar"]:focus-visible {
+  position: absolute !important;
+  right: 16px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  transition: none !important;
+  box-shadow: none !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+button:not([style]):not(.mds-button):not([class*="mds-button"]):not([class*="btn"]):disabled {
+  opacity: 0.5 !important;
+  cursor: not-allowed !important;
+  transform: none !important;
+}
+
+/* Light theme button overrides */
+html[data-theme="light"] .mds-button--primary,
+html[data-theme="light"] button[class*="primary"] {
+  background-color: #3b82f6 !important;
+  color: #ffffff !important;
+}
+
+html[data-theme="light"] .mds-button--primary:hover,
+html[data-theme="light"] button[class*="primary"]:hover {
+  background-color: #2563eb !important;
+}
+
+html[data-theme="light"] .mds-button--secondary,
+html[data-theme="light"] button[class*="secondary"] {
+  background-color: rgba(0, 0, 0, 0.05) !important;
+  color: #1a1a1a !important;
+  border-color: rgba(0, 0, 0, 0.1) !important;
+}
+
+html[data-theme="light"] .mds-button--secondary:hover,
+html[data-theme="light"] button[class*="secondary"]:hover {
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+html[data-theme="light"] .mds-button--outline,
+html[data-theme="light"] button[class*="outline"] {
+  color: #1a1a1a !important;
+  border-color: rgba(0, 0, 0, 0.3) !important;
+}
+
+html[data-theme="light"] .mds-button--outline:hover,
+html[data-theme="light"] button[class*="outline"]:hover {
+  background-color: rgba(0, 0, 0, 0.05) !important;
+  border-color: rgba(0, 0, 0, 0.5) !important;
+}
+
+html[data-theme="light"] .mds-button--glass,
+html[data-theme="light"] button[class*="glass"] {
+  background-color: rgba(0, 0, 0, 0.05) !important;
+  color: #1a1a1a !important;
+  border-color: rgba(0, 0, 0, 0.1) !important;
+}
+
+html[data-theme="light"] .mds-button--glass:hover,
+html[data-theme="light"] button[class*="glass"]:hover {
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+html[data-theme="light"] .mds-button--ghost,
+html[data-theme="light"] button[class*="ghost"] {
+  color: #1a1a1a !important;
+  border-color: rgba(0, 0, 0, 0.2) !important;
+}
+
+html[data-theme="light"] .mds-button--ghost:hover,
+html[data-theme="light"] button[class*="ghost"]:hover {
+  background-color: rgba(0, 0, 0, 0.05) !important;
+  border-color: rgba(0, 0, 0, 0.3) !important;
+}
+
+html[data-theme="light"] button {
+  background-color: rgba(0, 0, 0, 0.05) !important;
+  color: #1a1a1a !important;
+  border-color: rgba(0, 0, 0, 0.1) !important;
+}
+
+html[data-theme="light"] button:hover {
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+/* ========================================
+   Selects and period filter (theme-responsive)
+   ======================================== */
+select:not(.mds-select-themed):not(.mds-period-filter__select),
+.mds-period-filter__select {
+  /* Match DS ghost button default state */
+  background-color: transparent !important;
+  color: #ffffff !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 0.5rem 1rem !important;
+  font-family: inherit !important;
+  font-size: 0.875rem !important;
+  cursor: pointer !important;
+  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  -webkit-appearance: none !important;
+     -moz-appearance: none !important;
+          appearance: none !important;
+  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='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
+  background-position: right 0.5rem center !important;
+  background-repeat: no-repeat !important;
+  background-size: 1rem 1rem !important;
+  padding-right: 2.5rem !important;
+}
+
+select:not(.mds-select-themed):not(.mds-period-filter__select):hover,
+.mds-period-filter__select:hover {
+  /* Same hover treatment as DS ghost */
+  background-color: var(--mds-color-background-secondary) !important;
+}
+
+select:not(.mds-select-themed):not(.mds-period-filter__select):focus,
+.mds-period-filter__select:focus {
+  outline: none !important;
+  border-color: #60a5fa !important;
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2) !important;
+}
+
+select:not(.mds-select-themed):not(.mds-period-filter__select):disabled,
+.mds-period-filter__select:disabled {
+  opacity: 0.5 !important;
+  cursor: not-allowed !important;
+}
+
+select:not(.mds-select-themed):not(.mds-period-filter__select) option {
+  background-color: rgba(30, 30, 30, 0.95) !important;
+  color: #ffffff !important;
+  padding: 0.5rem !important;
+}
+
+/* Light theme select styles */
+html[data-theme="light"] select:not(.mds-select-themed):not(.mds-period-filter__select),
+html[data-theme="light"] .mds-period-filter__select {
+  background-color: transparent !important;
+  color: #1a1a1a !important;
+  border: none !important;
+  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;
+}
+
+html[data-theme="light"] select:not(.mds-select-themed):not(.mds-period-filter__select):hover,
+html[data-theme="light"] .mds-period-filter__select:hover {
+  background-color: rgba(0, 0, 0, 0.05) !important;
+}
+
+html[data-theme="light"] select:not(.mds-select-themed):not(.mds-period-filter__select):focus,
+html[data-theme="light"] .mds-period-filter__select:focus {
+  border-color: #3b82f6 !important;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
+}
+
+html[data-theme="light"] select:not(.mds-select-themed):not(.mds-period-filter__select) option {
+  background-color: rgba(250, 250, 250, 0.95) !important;
+  color: #1a1a1a !important;
+}
+
+/* Dashboard controls */
+.mds-dashboard-controls {
+  display: flex !important;
+  gap: 1rem !important;
+  align-items: center !important;
+  flex-wrap: wrap !important;
+}
+
+.mds-period-filter {
+  position: relative !important;
+  min-width: 150px !important;
+}
+
+.mds-dropdown {
+  position: relative !important;
+}
+
+/* ========================================
+   Inputs and selects (mds-*)
+   ======================================== */
+.mds-input,
+input.mds-input {
+  padding: 8px 12px !important;
+  min-height: 36px !important;
+  max-height: 36px !important;
+  height: 36px !important;
+  font-size: 14px !important;
+  line-height: 1.4 !important;
+  box-sizing: border-box !important;
+}
+
+/* Dark theme input overrides */
+html[data-theme="dark"] .mds-input,
+html[data-theme="dark"] input.mds-input,
+html:not([data-theme]) .mds-input,
+html:not([data-theme]) input.mds-input {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  border-color: rgba(255, 255, 255, 0.4) !important;
+  color: #ffffff !important;
+}
+
+html[data-theme="dark"] .mds-input:focus,
+html[data-theme="dark"] input.mds-input:focus,
+html:not([data-theme]) .mds-input:focus,
+html:not([data-theme]) input.mds-input:focus {
+  background-color: rgba(255, 255, 255, 0.2) !important;
+  border-color: #60a5fa !important;
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3) !important;
+}
+
+html[data-theme="dark"] .mds-input:hover,
+html[data-theme="dark"] input.mds-input:hover,
+html:not([data-theme]) .mds-input:hover,
+html:not([data-theme]) input.mds-input:hover {
+  background-color: rgba(255, 255, 255, 0.18) !important;
+  border-color: rgba(255, 255, 255, 0.5) !important;
+}
+
+/* Light theme input overrides */
+html[data-theme="light"] .mds-input,
+html[data-theme="light"] input.mds-input {
+  background-color: #ffffff !important;
+  border-color: rgba(0, 0, 0, 0.2) !important;
+  color: #1a1a1a !important;
+}
+
+html[data-theme="light"] .mds-input:focus,
+html[data-theme="light"] input.mds-input:focus {
+  background-color: #ffffff !important;
+  border-color: #3b82f6 !important;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
+}
+
+html[data-theme="light"] .mds-input:hover,
+html[data-theme="light"] input.mds-input:hover {
+  background-color: #ffffff !important;
+  border-color: rgba(0, 0, 0, 0.3) !important;
+}
+
+/* Placeholder overrides */
+html[data-theme="dark"] .mds-input::-moz-placeholder, html[data-theme="dark"] input.mds-input::-moz-placeholder, html:not([data-theme]) .mds-input::-moz-placeholder, html:not([data-theme]) input.mds-input::-moz-placeholder {
+  color: rgba(255, 255, 255, 0.6) !important;
+}
+html[data-theme="dark"] .mds-input::placeholder,
+html[data-theme="dark"] input.mds-input::placeholder,
+html:not([data-theme]) .mds-input::placeholder,
+html:not([data-theme]) input.mds-input::placeholder {
+  color: rgba(255, 255, 255, 0.6) !important;
+}
+
+html[data-theme="light"] .mds-input::-moz-placeholder, html[data-theme="light"] input.mds-input::-moz-placeholder {
+  color: rgba(0, 0, 0, 0.5) !important;
+}
+
+html[data-theme="light"] .mds-input::placeholder,
+html[data-theme="light"] input.mds-input::placeholder {
+  color: rgba(0, 0, 0, 0.5) !important;
+}
+
+/* Ultra high priority input overrides */
+input.mds-input,
+.mds-input,
+input[class*="mds-input"] {
+  padding: 8px 16px !important;
+  min-height: 40px !important;
+  max-height: 40px !important;
+  height: 40px !important;
+  font-size: 14px !important;
+  line-height: 1.4 !important;
+  box-sizing: border-box !important;
+  border-radius: 8px !important;
+  border-width: 1px !important;
+  border-style: solid !important;
+}
+
+/* Dark theme - ultra specific */
+html[data-theme="dark"] input.mds-input,
+html[data-theme="dark"] .mds-input,
+html[data-theme="dark"] input[class*="mds-input"],
+html:not([data-theme]) input.mds-input,
+html:not([data-theme]) .mds-input,
+html:not([data-theme]) input[class*="mds-input"] {
+  background-color: rgba(255, 255, 255, 0.2) !important;
+  border-color: rgba(255, 255, 255, 0.5) !important;
+  color: #ffffff !important;
+}
+
+html[data-theme="dark"] input.mds-input:focus,
+html[data-theme="dark"] .mds-input:focus,
+html[data-theme="dark"] input[class*="mds-input"]:focus,
+html:not([data-theme]) input.mds-input:focus,
+html:not([data-theme]) .mds-input:focus,
+html:not([data-theme]) input[class*="mds-input"]:focus {
+  background-color: rgba(255, 255, 255, 0.25) !important;
+  border-color: #60a5fa !important;
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3) !important;
+}
+
+/* Light theme - ultra specific */
+html[data-theme="light"] input.mds-input,
+html[data-theme="light"] .mds-input,
+html[data-theme="light"] input[class*="mds-input"] {
+  background-color: #ffffff !important;
+  border-color: rgba(0, 0, 0, 0.3) !important;
+  color: #1a1a1a !important;
+}
+
+html[data-theme="light"] input.mds-input:focus,
+html[data-theme="light"] .mds-input:focus,
+html[data-theme="light"] input[class*="mds-input"]:focus {
+  background-color: #ffffff !important;
+  border-color: #3b82f6 !important;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
+}
+
+/* Select overrides with maximum specificity */
+select.mds-select,
+.mds-select,
+select[class*="mds-select"] {
+  padding: 8px 16px !important;
+  min-height: 40px !important;
+  max-height: 40px !important;
+  height: 40px !important;
+  font-size: 14px !important;
+  line-height: 1.4 !important;
+  box-sizing: border-box !important;
+  border-radius: 8px !important;
+  border-width: 1px !important;
+  border-style: solid !important;
+}
+
+/* Dark theme select overrides */
+html[data-theme="dark"] select.mds-select,
+html[data-theme="dark"] .mds-select,
+html[data-theme="dark"] select[class*="mds-select"],
+html:not([data-theme]) select.mds-select,
+html:not([data-theme]) .mds-select,
+html:not([data-theme]) select[class*="mds-select"] {
+  background-color: rgba(255, 255, 255, 0.2) !important;
+  border-color: rgba(255, 255, 255, 0.5) !important;
+  color: #ffffff !important;
+  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='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
+}
+
+/* Light theme select overrides */
+html[data-theme="light"] select.mds-select,
+html[data-theme="light"] .mds-select,
+html[data-theme="light"] select[class*="mds-select"] {
+  background-color: #ffffff !important;
+  border-color: rgba(0, 0, 0, 0.3) !important;
+  color: #1a1a1a !important;
+  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;
+}