mainbase-ui 1.2.4 → 1.2.5-b

package/dist/index.css

@@ -257,28 +257,26 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
   gap: 8px;
-  height: 36px;
-  padding: 0 16px;
-  border: none;
-  border-radius: var(--mb-radius, 14px);
-  background: var(--mb-primary, #30d5c8);
-  color: var(--mb-text-color, #172322);
-  font-family: var(--mb-font-family, inherit);
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
+  border: 1px solid transparent;
+  border-radius: var(--mb-radius);
+  font-family: var(--mb-font-family);
+  font-weight: 600;
   cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
   outline: none;
   transition:
-    background-color var(--mb-transition-fast, 0.15s ease),
-    color var(--mb-transition-fast, 0.15s ease),
-    border-color var(--mb-transition-fast, 0.15s ease),
-    box-shadow var(--mb-transition-fast, 0.15s ease),
-    opacity var(--mb-transition-fast, 0.15s ease);
+    background-color .15s ease,
+    border-color .15s ease,
+    color .15s ease,
+    box-shadow .15s ease,
+    transform .15s ease;
+  user-select: none;
+}
+.mb-button:active:not(:disabled) {
+  transform: translateY(1px);
+}
+.mb-button:focus-visible {
+  box-shadow: 0 0 0 3px var(--mb-focus-color);
 }
 .mb-button--sm {
   height: 32px;
@@ -286,68 +284,59 @@
   font-size: 13px;
 }
 .mb-button--md {
-  height: 36px;
+  height: 40px;
   padding: 0 16px;
   font-size: 14px;
 }
 .mb-button--lg {
-  height: 42px;
+  height: 46px;
   padding: 0 20px;
   font-size: 15px;
 }
 .mb-button--primary {
-  background: var(--mb-primary, #30d5c8);
-  color: var(--mb-text-color, #172322);
+  background: var(--mb-primary);
+  color: var(--mb-on-primary);
 }
 .mb-button--primary:hover:not(:disabled) {
-  background: var(--mb-primary-hover, #2bc8bc);
-}
-.mb-button--primary:active:not(:disabled) {
-  background: var(--mb-primary-active, #27b9ae);
+  background: var(--mb-primary-hover);
 }
 .mb-button--secondary {
-  background: var(--mb-background-secondary, #f3f5f5);
-  color: var(--mb-text-color, #172322);
+  background: var(--mb-background-secondary);
+  color: var(--mb-text-color);
 }
 .mb-button--secondary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--mb-text-color, #172322) 9%, var(--mb-background, #ffffff));
-}
-.mb-button--secondary:active:not(:disabled) {
-  background: color-mix(in srgb, var(--mb-text-color, #172322) 14%, var(--mb-background, #ffffff));
+  background: var(--mb-border-color);
 }
 .mb-button--outline {
-  border: 1px solid var(--mb-primary, #30d5c8);
   background: transparent;
-  color: var(--mb-primary-active, #27b9ae);
+  border-color: var(--mb-primary);
+  color: var(--mb-primary);
 }
 .mb-button--outline:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--mb-primary, #30d5c8) 10%, transparent);
-}
-.mb-button--outline:active:not(:disabled) {
-  background: color-mix(in srgb, var(--mb-primary, #30d5c8) 17%, transparent);
+  background: color-mix(in srgb, var(--mb-primary) 10%, transparent);
 }
 .mb-button--ghost {
   background: transparent;
-  color: var(--mb-primary-active, #27b9ae);
+  color: var(--mb-text-color);
 }
 .mb-button--ghost:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--mb-primary, #30d5c8) 10%, transparent);
-}
-.mb-button--ghost:active:not(:disabled) {
-  background: color-mix(in srgb, var(--mb-primary, #30d5c8) 17%, transparent);
+  background: var(--mb-background-secondary);
 }
-.mb-button:focus-visible {
-  box-shadow: inset 0 0 0 var(--mb-focus-ring-width, 2px) var(--mb-focus-color, var(--mb-primary));
+.mb-button--danger {
+  background: var(--mb-danger);
+  color: white;
 }
 .mb-button:disabled {
-  opacity: 0.45;
+  opacity: .55;
   cursor: not-allowed;
 }
-.mb-button__content {
+.mb-button__icon {
+  display: inline-flex;
+  line-height: 0;
+}
+.mb-button__label {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  min-width: 0;
 }
 
 /* src/components/Checkbox/Checkbox.css */
@@ -3376,6 +3365,65 @@
   cursor: not-allowed;
 }
 
+/* src/components/Image/Image.css */
+.mb-image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+.mb-image--cover {
+  object-fit: cover;
+}
+.mb-image--contain {
+  object-fit: contain;
+}
+.mb-image--fill {
+  object-fit: fill;
+}
+.mb-image--none {
+  object-fit: none;
+}
+.mb-image--scale-down {
+  object-fit: scale-down;
+}
+.mb-image--none {
+  border-radius: 0;
+}
+.mb-image--sm {
+  border-radius: var(--mb-radius-sm);
+}
+.mb-image--md {
+  border-radius: var(--mb-radius);
+}
+.mb-image--lg {
+  border-radius: var(--mb-radius-lg);
+}
+.mb-image--xl {
+  border-radius: var(--mb-radius-xl);
+}
+.mb-image--full {
+  border-radius: 999px;
+}
+
+/* src/components/Highlight/Highlight.css */
+.mb-highlight {
+  display: inline;
+  padding: 0 8px;
+  border-radius: 6px;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+  color: var(--mb-text-color);
+}
+.mb-highlight--primary {
+  background: color-mix(in srgb, var(--mb-primary) 18%, transparent);
+}
+.mb-highlight--success {
+  background: color-mix(in srgb, var(--mb-success) 18%, transparent);
+}
+.mb-highlight--warning {
+  background: color-mix(in srgb, var(--mb-warning) 20%, transparent);
+}
+
 /* src/components/Card/Card.css */
 .mb-card {
   display: flex;