better_ui 0.5.0 → 0.5.1

data/lib/generators/better_ui/templates/components/_button.scss

@@ -2,105 +2,108 @@
  * Button Component
  * ============================== */
 
-/* Stile base */
-.bui-btn {
-  @apply py-2 px-4 font-medium rounded transition-colors;
-}
-
-/* Layout e posizionamento */
-.bui-btn-layout-default {
-  @apply inline-flex items-center justify-center font-medium;
-}
-
-.bui-btn-focus {
-  @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
-}
-
-/* Varianti di colore */
-.bui-btn-default {
-  @apply bg-black text-white hover:bg-gray-900;
-}
-
-.bui-btn-white {
-  @apply bg-white text-black hover:bg-gray-100;
-}
-
-.bui-btn-red {
-  @apply bg-red-500 text-white hover:bg-red-600;
-}
-
-.bui-btn-rose {
-  @apply bg-rose-500 text-white hover:bg-rose-600;
-}
-
-.bui-btn-orange {
-  @apply bg-orange-500 text-white hover:bg-orange-600;
-}
-
-.bui-btn-green {
-  @apply bg-green-500 text-white hover:bg-green-600;
-}
-
-.bui-btn-blue {
-  @apply bg-blue-500 text-white hover:bg-blue-600;
-}
-
-.bui-btn-yellow {
-  @apply bg-yellow-500 text-black hover:bg-yellow-600;
-}
-
-.bui-btn-violet {
-  @apply bg-violet-500 text-white hover:bg-violet-600;
-}
-
-/* Varianti di dimensione */
-.bui-btn-size-small {
-  @apply py-1 px-2.5 text-xs;
-}
-
-.bui-btn-size-medium {
-  @apply py-2 px-4 text-sm;
-}
-
-.bui-btn-size-large {
-  @apply py-2.5 px-6 text-base;
-}
-
-/* Varianti di border-radius */
-.bui-btn-radius-none {
-  @apply rounded-none;
-}
-
-.bui-btn-radius-small {
-  @apply rounded-md;
-}
-
-.bui-btn-radius-medium {
-  @apply rounded-lg;
-}
-
-.bui-btn-radius-large {
-  @apply rounded-xl;
-}
-
-.bui-btn-radius-full {
-  @apply rounded-full;
-}
-
-/* Stati e modificatori */
-.bui-btn-disabled {
-  @apply opacity-50 cursor-not-allowed;
-}
-
-.bui-btn-full-width {
-  @apply w-full;
-}
-
-/* Posizionamento icone */
-.bui-btn-icon-left {
-  @apply mr-2;
-}
-
-.bui-btn-icon-right {
-  @apply ml-2;
+@layer components {
+  // Classe base per il bottone (Block)
+  .bui-button {
+    @apply inline-flex items-center justify-center font-medium 
+           transition-colors duration-200 rounded-md
+           focus:outline-none focus:ring-2 focus:ring-offset-2;
+    
+    // Elements
+    &__icon {
+      @apply flex-shrink-0;
+      
+      &--left {
+        @apply mr-2;
+      }
+      
+      &--right {
+        @apply ml-2;
+      }
+    }
+    
+    &__text {
+      @apply flex-grow;
+    }
+    
+    // Modifiers (varianti colore)
+    &--default {
+      @apply bg-black text-white hover:bg-gray-900 focus:ring-gray-900;
+    }
+    
+    &--white {
+      @apply bg-white text-black hover:bg-gray-100 focus:ring-gray-400;
+    }
+    
+    &--red {
+      @apply bg-red-500 text-white hover:bg-red-600 focus:ring-red-500;
+    }
+    
+    &--rose {
+      @apply bg-rose-500 text-white hover:bg-rose-600 focus:ring-rose-500;
+    }
+    
+    &--orange {
+      @apply bg-orange-500 text-white hover:bg-orange-600 focus:ring-orange-500;
+    }
+    
+    &--green {
+      @apply bg-green-500 text-white hover:bg-green-600 focus:ring-green-500;
+    }
+    
+    &--blue {
+      @apply bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500;
+    }
+    
+    &--yellow {
+      @apply bg-yellow-500 text-black hover:bg-yellow-600 focus:ring-yellow-500;
+    }
+    
+    &--violet {
+      @apply bg-violet-500 text-white hover:bg-violet-600 focus:ring-violet-500;
+    }
+    
+    // Modifiers (dimensioni)
+    &--small {
+      @apply px-2.5 py-1.5 text-xs;
+    }
+    
+    &--medium {
+      @apply px-4 py-2 text-sm;
+    }
+    
+    &--large {
+      @apply px-6 py-3 text-base;
+    }
+    
+    // Modifiers (border radius)
+    &--radius-none {
+      @apply rounded-none;
+    }
+    
+    &--radius-small {
+      @apply rounded-md;
+    }
+    
+    &--radius-medium {
+      @apply rounded-lg;
+    }
+    
+    &--radius-large {
+      @apply rounded-xl;
+    }
+    
+    &--radius-full {
+      @apply rounded-full;
+    }
+    
+    // Modifiers (stati)
+    &--disabled {
+      @apply opacity-50 cursor-not-allowed;
+    }
+    
+    &--full-width {
+      @apply w-full;
+    }
+  }
 } 

data/lib/generators/better_ui/templates/components/_card.scss

@@ -1,69 +1,60 @@
-/* ==============================
- * Card Component
- * ============================== */
-
-/* Struttura di base */
-.bui-card-base {
-  @apply bg-white border shadow-sm overflow-hidden;
-}
-
-/* Contenuto */
-.bui-card-content {
-  @apply p-4;
-}
-
-/* Intestazione */
-.bui-card-header {
-  @apply p-4 border-b;
-}
-
-/* Piè di pagina */
-.bui-card-footer {
-  @apply p-4 border-t;
-}
-
-/* Corpo */
-.bui-card-body {
-  @apply flex flex-col;
-}
-
-/* Titolo */
-.bui-card-title {
-  @apply text-lg font-medium;
-}
-
-/* Valore */
-.bui-card-value {
-  @apply text-2xl font-bold mt-2;
-}
-
-/* Valore di riferimento */
-.bui-card-value-from {
-  @apply text-sm text-gray-500 mt-1;
-}
-
-/* Trend */
-.bui-card-trend {
-  @apply mt-2 inline-flex items-center px-2 py-1 text-xs font-medium rounded;
-}
-
-/* Opzioni di border-radius */
-.bui-card-radius-none {
-  @apply rounded-none;
-}
+@layer components {
+  // Classe base per la card (Block)
+  .bui-card {
+    @apply bg-white border shadow-sm overflow-hidden;
     
-.bui-card-radius-small {
-  @apply rounded-md;
-}
+    // Elements
+    &__content {
+      @apply p-4;
+    }
     
-.bui-card-radius-medium {
-  @apply rounded-lg;
-}
+    &__header {
+      @apply p-4 border-b;
+    }
     
-.bui-card-radius-large {
-  @apply rounded-xl;
-}
+    &__footer {
+      @apply p-4 border-t;
+    }
+    
+    &__body {
+      @apply flex flex-col;
+    }
+    
+    &__title {
+      @apply text-lg font-medium;
+    }
+    
+    &__value {
+      @apply text-2xl font-bold mt-2;
+      
+      &--reference {
+        @apply text-sm text-gray-500 mt-1;
+      }
+    }
+    
+    &__trend {
+      @apply mt-2 inline-flex items-center px-2 py-1 text-xs font-medium rounded;
+    }
     
-.bui-card-radius-full {
-  @apply rounded-full;
-} 
+    // Modifiers (border radius)
+    &--radius-none {
+      @apply rounded-none;
+    }
+    
+    &--radius-small {
+      @apply rounded-md;
+    }
+    
+    &--radius-medium {
+      @apply rounded-lg;
+    }
+    
+    &--radius-large {
+      @apply rounded-xl;
+    }
+    
+    &--radius-full {
+      @apply rounded-full;
+    }
+  }
+}

data/lib/generators/better_ui/templates/components/_heading.scss

@@ -1,180 +1,81 @@
-/* ==============================
- * Heading Component
- * ============================== */
-
-/* Varianti di colore per le intestazioni */
-.bui-header-default-heading {
-  @apply text-gray-900;
-}
-
-.bui-header-default-subtitle {
-  @apply text-gray-600;
-}
-
-.bui-header-default-divider {
-  @apply border-gray-200;
-}
-
-.bui-header-white-heading {
-  @apply text-gray-100;
-}
-
-.bui-header-white-subtitle {
-  @apply text-gray-300;
-}
-
-.bui-header-white-divider {
-  @apply border-gray-200;
-}
-
-.bui-header-red-heading {
-  @apply text-red-700;
-}
-
-.bui-header-red-subtitle {
-  @apply text-red-500;
-}
-
-.bui-header-red-divider {
-  @apply border-red-300;
-}
-
-.bui-header-rose-heading {
-  @apply text-rose-700;
-}
-
-.bui-header-rose-subtitle {
-  @apply text-rose-500;
-}
-
-.bui-header-rose-divider {
-  @apply border-rose-300;
-}
-
-.bui-header-orange-heading {
-  @apply text-orange-700;
-}
-
-.bui-header-orange-subtitle {
-  @apply text-orange-500;
-}
-
-.bui-header-orange-divider {
-  @apply border-orange-300;
-}
-
-.bui-header-green-heading {
-  @apply text-green-700;
-}
-
-.bui-header-green-subtitle {
-  @apply text-green-500;
-}
-
-.bui-header-green-divider {
-  @apply border-green-300;
-}
-
-.bui-header-blue-heading {
-  @apply text-blue-700;
-}
-
-.bui-header-blue-subtitle {
-  @apply text-blue-500;
-}
-
-.bui-header-blue-divider {
-  @apply border-blue-300;
-}
-
-.bui-header-yellow-heading {
-  @apply text-yellow-700;
-}
-
-.bui-header-yellow-subtitle {
-  @apply text-yellow-500;
-}
-
-.bui-header-yellow-divider {
-  @apply border-yellow-300;
-}
-
-.bui-header-violet-heading {
-  @apply text-violet-700;
-}
-
-.bui-header-violet-subtitle {
-  @apply text-violet-500;
-}
-
-.bui-header-violet-divider {
-  @apply border-violet-300;
-}
-
-/* Classi per le dimensioni dell'intestazione */
-.bui-header-small-heading {
-  @apply text-xl;
-}
-
-.bui-header-small-subtitle {
-  @apply text-base;
-}
-
-.bui-header-medium-heading {
-  @apply text-2xl;
-}
-
-.bui-header-medium-subtitle {
-  @apply text-lg;
-}
-
-.bui-header-large-heading {
-  @apply text-3xl;
-}
-
-.bui-header-large-subtitle {
-  @apply text-xl;
-}
-
-/* Classi per l'allineamento dell'intestazione */
-.bui-header-left {
-  @apply text-left;
-}
-
-.bui-header-center {
-  @apply text-center;
-}
-
-.bui-header-right {
-  @apply text-right;
-}
-
-/* Stili comuni */
-.bui-header-heading-base {
-  @apply font-bold;
-}
-
-.bui-header-subtitle-base {
-  @apply mt-1;
-}
-
-.bui-header-divider-base {
-  @apply border-t mt-2;
-}
-
-.bui-header-container-base {
-  @apply mb-4;
-}
-
-.bui-header-container-with-divider {
-  @apply mb-4 pb-2;
-}
-
-/* Stili per le icone */
-.bui-header-icon-container {
-  @apply inline-flex items-center;
-}
-
-.bui-header-icon-wrapper {
-  @apply mr-2;
+@layer components {
+  // Classe base per il titolo (Block)
+  .bui-heading {
+    @apply font-bold text-gray-900 leading-tight;
+    
+    // Modifiers (dimensioni/livelli)
+    &--1 {
+      @apply text-3xl sm:text-4xl;
+    }
+    
+    &--2 {
+      @apply text-2xl sm:text-3xl;
+    }
+    
+    &--3 {
+      @apply text-xl sm:text-2xl;
+    }
+    
+    &--4 {
+      @apply text-lg sm:text-xl;
+    }
+    
+    &--5 {
+      @apply text-base sm:text-lg;
+    }
+    
+    &--6 {
+      @apply text-sm sm:text-base;
+    }
+    
+    // Modifiers (varianti colore)
+    &--default {
+      @apply text-gray-900;
+    }
+    
+    &--white {
+      @apply text-white;
+    }
+    
+    &--red {
+      @apply text-red-600;
+    }
+    
+    &--rose {
+      @apply text-rose-600;
+    }
+    
+    &--orange {
+      @apply text-orange-600;
+    }
+    
+    &--green {
+      @apply text-green-600;
+    }
+    
+    &--blue {
+      @apply text-blue-600;
+    }
+    
+    &--yellow {
+      @apply text-yellow-600;
+    }
+    
+    &--violet {
+      @apply text-violet-600;
+    }
+    
+    // Modifiers (allineamento)
+    &--left {
+      @apply text-left;
+    }
+    
+    &--center {
+      @apply text-center;
+    }
+    
+    &--right {
+      @apply text-right;
+    }
+  }
 }