@limpiolux/ui-styles 1.0.1 → 1.0.2

package/components.css

@@ -996,6 +996,105 @@
     text-align: left !important;
   }
 
+  .text-center {
+    text-align: center !important;
+  }
+
+  .text-left {
+    text-align: left !important;
+  }
+
+  .text-right,
+  .text-end {
+    text-align: right !important;
+  }
+
+  .align-items-center {
+    align-items: center !important;
+  }
+
+  .align-items-end {
+    align-items: flex-end !important;
+  }
+
+  .align-items-stretch {
+    align-items: stretch !important;
+  }
+
+  .justify-content-center {
+    justify-content: center !important;
+  }
+
+  .justify-content-between {
+    justify-content: space-between !important;
+  }
+
+  .justify-content-end {
+    justify-content: flex-end !important;
+  }
+
+  .justify-content-stretch {
+    justify-content: stretch !important;
+  }
+
+  .form-group {
+    margin-bottom: 0.75rem;
+  }
+
+  .form-label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: rgb(var(--color-zinc-300));
+    margin-bottom: 0.35rem;
+  }
+
+  .form-select-sm {
+    padding: 0.35rem 0.55rem;
+    font-size: 0.78rem;
+    border-radius: 0.45rem;
+  }
+
+  .rounded {
+    border-radius: 0.5rem !important;
+  }
+
+  .rounded-circle {
+    border-radius: 999px !important;
+  }
+
+  .bg-primary {
+    background: rgba(var(--color-brand) / 0.18) !important;
+    color: #d7f1fb !important;
+  }
+
+  .bg-secondary {
+    background: rgba(var(--color-zinc-700) / 0.35) !important;
+    color: rgb(var(--color-zinc-200)) !important;
+  }
+
+  .border-brand {
+    border-color: rgba(var(--color-brand) / 0.45) !important;
+  }
+
+  .border-warning {
+    border-color: rgba(245, 158, 11, 0.42) !important;
+  }
+
+  .border-muted {
+    border-color: rgba(var(--color-zinc-600) / 0.5) !important;
+  }
+
+  .text-orange {
+    color: #fb923c !important;
+  }
+
+  .alert-heading {
+    font-size: 0.9rem;
+    font-weight: 600;
+    margin: 0 0 0.25rem;
+  }
+
   .fade {
     opacity: 0;
     transition: opacity 160ms ease;

package/light.css

@@ -477,3 +477,21 @@
 .light .text-danger-emphasis {
   color: #991b1b !important;
 }
+
+.light .form-label {
+  color: rgb(var(--color-zinc-300));
+}
+
+.light .bg-primary {
+  background: rgba(var(--color-brand) / 0.12) !important;
+  color: rgb(var(--color-brand-strong)) !important;
+}
+
+.light .bg-secondary {
+  background: rgba(var(--color-zinc-700) / 0.24) !important;
+  color: rgb(var(--color-zinc-300)) !important;
+}
+
+.light .text-orange {
+  color: #c2410c !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limpiolux/ui-styles",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Shared design system — Preventores liquid glass theme with dark/light mode support",
   "type": "module",
   "exports": {

package/utilities.css

@@ -188,9 +188,33 @@
 .mx-3 { margin-left: 0.75rem !important; margin-right: 0.75rem !important; }
 .mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
 
+.mt-0 { margin-top: 0 !important; }
+.mt-1 { margin-top: 0.25rem !important; }
+.mt-2 { margin-top: 0.5rem !important; }
+.mt-3 { margin-top: 0.75rem !important; }
+
 .my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
 .my-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
 
+.mb-0 { margin-bottom: 0 !important; }
+.mb-1 { margin-bottom: 0.25rem !important; }
+.mb-2 { margin-bottom: 0.5rem !important; }
+.mb-3 { margin-bottom: 0.75rem !important; }
+
+.pt-2 { padding-top: 0.5rem !important; }
+
+.h-2 { height: 0.5rem !important; }
+.h-3 { height: 0.75rem !important; }
+.h-4 { height: 1rem !important; }
+.h-7 { height: 1.75rem !important; }
+.h-8 { height: 2rem !important; }
+.h-10 { height: 2.5rem !important; }
+.h-14 { height: 3.5rem !important; }
+.h-16 { height: 4rem !important; }
+.h-full { height: 100% !important; }
+
+.w-auto { width: auto !important; }
+
 .pl-2 { padding-left: 0.5rem !important; }
 .pl-3 { padding-left: 0.75rem !important; }
 .pl-4 { padding-left: 1rem !important; }