bulma-tailwind 0.1.0

package/src/form/textarea.css

@@ -0,0 +1,315 @@
+@layer components {
+  /* Botón base - estilo normal de Bulma */
+  .button {
+    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded font-medium transition-all duration-200 cursor-pointer;
+    background-color: var(--color-light);
+    border: 1px solid var(--color-grey);
+    color: var(--color-dark);
+    font-size: var(--text-size-normal);
+  }
+  .button:hover {
+    @apply brightness-95;
+  }
+
+  /* Tamaños */
+  .button.is-small {
+    @apply px-2 py-1 text-sm rounded-sm;
+  }
+  .button.is-medium {
+    @apply px-5 py-2.5 text-base;
+  }
+  .button.is-large {
+    @apply px-6 py-3 text-lg;
+  }
+
+  /* Colores sólidos */
+  .button.is-primary {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: white;
+  }
+  .button.is-primary:hover {
+    background-color: color-mix(in srgb, var(--color-primary) 90%, black);
+  }
+
+  .button.is-link {
+    background-color: var(--color-link);
+    border-color: var(--color-link);
+    color: white;
+  }
+  .button.is-link:hover {
+    background-color: color-mix(in srgb, var(--color-link) 90%, black);
+  }
+
+  .button.is-info {
+    background-color: var(--color-info);
+    border-color: var(--color-info);
+    color: white;
+  }
+  .button.is-info:hover {
+    background-color: color-mix(in srgb, var(--color-info) 90%, black);
+  }
+
+  .button.is-success {
+    background-color: var(--color-success);
+    border-color: var(--color-success);
+    color: white;
+  }
+  .button.is-success:hover {
+    background-color: color-mix(in srgb, var(--color-success) 90%, black);
+  }
+
+  .button.is-warning {
+    background-color: var(--color-warning);
+    border-color: var(--color-warning);
+    color: var(--color-dark);
+  }
+  .button.is-warning:hover {
+    background-color: color-mix(in srgb, var(--color-warning) 90%, black);
+  }
+
+  .button.is-danger {
+    background-color: var(--color-danger);
+    border-color: var(--color-danger);
+    color: white;
+  }
+  .button.is-danger:hover {
+    background-color: color-mix(in srgb, var(--color-danger) 90%, black);
+  }
+
+  .button.is-light {
+    background-color: var(--color-light);
+    border-color: var(--color-grey);
+    color: var(--color-dark);
+  }
+  .button.is-light:hover {
+    background-color: color-mix(in srgb, var(--color-light) 90%, black);
+  }
+
+  .button.is-dark {
+    background-color: var(--color-dark);
+    border-color: var(--color-dark);
+    color: white;
+  }
+  .button.is-dark:hover {
+    background-color: color-mix(in srgb, var(--color-dark) 90%, black);
+  }
+
+  .button.is-white {
+    background-color: white;
+    border-color: var(--color-grey);
+    color: var(--color-dark);
+  }
+  .button.is-white:hover {
+    background-color: color-mix(in srgb, white 90%, black);
+  }
+
+  .button.is-black {
+    background-color: var(--color-black);
+    border-color: var(--color-black);
+    color: white;
+  }
+  .button.is-black:hover {
+    background-color: color-mix(in srgb, var(--color-black) 90%, black);
+  }
+
+  /* Outlined */
+  .button.is-outlined {
+    background-color: transparent;
+    border: 1px solid currentColor;
+  }
+  .button.is-outlined.is-primary {
+    color: var(--color-primary);
+  }
+  .button.is-outlined.is-link {
+    color: var(--color-link);
+  }
+  .button.is-outlined.is-info {
+    color: var(--color-info);
+  }
+  .button.is-outlined.is-success {
+    color: var(--color-success);
+  }
+  .button.is-outlined.is-warning {
+    color: var(--color-warning);
+  }
+  .button.is-outlined.is-danger {
+    color: var(--color-danger);
+  }
+  .button.is-outlined.is-light {
+    color: var(--color-light);
+  }
+  .button.is-outlined.is-dark {
+    color: var(--color-dark);
+  }
+  .button.is-outlined.is-white {
+    color: white;
+  }
+  .button.is-outlined.is-black {
+    color: var(--color-black);
+  }
+  .button.is-outlined:hover {
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  /* Inverted */
+  .button.is-inverted {
+    background-color: transparent;
+    border-color: transparent;
+  }
+  .button.is-inverted.is-primary {
+    color: var(--color-primary);
+  }
+  .button.is-inverted.is-primary:hover {
+    background-color: var(--color-primary);
+    color: white;
+  }
+  .button.is-inverted.is-link {
+    color: var(--color-link);
+  }
+  .button.is-inverted.is-link:hover {
+    background-color: var(--color-link);
+    color: white;
+  }
+  .button.is-inverted.is-info {
+    color: var(--color-info);
+  }
+  .button.is-inverted.is-info:hover {
+    background-color: var(--color-info);
+    color: white;
+  }
+  .button.is-inverted.is-success {
+    color: var(--color-success);
+  }
+  .button.is-inverted.is-success:hover {
+    background-color: var(--color-success);
+    color: white;
+  }
+  .button.is-inverted.is-warning {
+    color: var(--color-warning);
+  }
+  .button.is-inverted.is-warning:hover {
+    background-color: var(--color-warning);
+    color: var(--color-dark);
+  }
+  .button.is-inverted.is-danger {
+    color: var(--color-danger);
+  }
+  .button.is-inverted.is-danger:hover {
+    background-color: var(--color-danger);
+    color: white;
+  }
+  .button.is-inverted.is-light {
+    color: var(--color-light);
+  }
+  .button.is-inverted.is-light:hover {
+    background-color: var(--color-light);
+    color: var(--color-dark);
+  }
+  .button.is-inverted.is-dark {
+    color: var(--color-dark);
+  }
+  .button.is-inverted.is-dark:hover {
+    background-color: var(--color-dark);
+    color: white;
+  }
+
+  /* Rounded */
+  .button.is-rounded {
+    @apply rounded-full;
+  }
+
+  /* Fullwidth */
+  .button.is-fullwidth {
+    @apply w-full;
+  }
+
+   /* Loading */
+  .button.is-loading {
+    @apply relative text-transparent pointer-events-none;
+  }
+  .button.is-loading::after {
+    content: "";
+    position: absolute;
+    width: 1rem;
+    height: 1rem;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border: 2px solid transparent;
+    border-top-color: currentColor;
+    border-radius: 50%;
+    animation: button-spin 0.6s linear infinite;
+  }
+
+  @keyframes button-spin {
+    0% { transform: translate(-50%, -50%) rotate(0deg); }
+    100% { transform: translate(-50%, -50%) rotate(360deg); }
+  }
+
+  /* Asegura que el color del spinner sea el mismo que el texto del botón */
+  .button.is-loading.is-primary::after {
+    border-top-color: white;
+  }
+  .button.is-loading.is-link::after {
+    border-top-color: white;
+  }
+  .button.is-loading.is-info::after {
+    border-top-color: white;
+  }
+  .button.is-loading.is-success::after {
+    border-top-color: white;
+  }
+  .button.is-loading.is-warning::after {
+    border-top-color: var(--color-dark);
+  }
+  .button.is-loading.is-danger::after {
+    border-top-color: white;
+  }
+  .button.is-loading.is-dark::after {
+    border-top-color: white;
+  }
+  .button.is-loading.is-light::after {
+    border-top-color: var(--color-dark);
+  }
+  .button.is-loading.is-white::after {
+    border-top-color: var(--color-dark);
+  }
+  .button.is-loading.is-black::after {
+    border-top-color: white;
+  }
+
+  /* Disabled */
+  .button:disabled,
+  .button.is-disabled {
+    @apply opacity-50 cursor-not-allowed pointer-events-none;
+  }
+
+  /* Text button */
+  .button.is-text {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-dark);
+  }
+  .button.is-text:hover {
+    background-color: var(--color-grey-light);
+  }
+  .button.is-text.is-primary {
+    color: var(--color-primary);
+  }
+  .button.is-text.is-link {
+    color: var(--color-link);
+  }
+  .button.is-text.is-info {
+    color: var(--color-info);
+  }
+  .button.is-text.is-success {
+    color: var(--color-success);
+  }
+  .button.is-text.is-warning {
+    color: var(--color-warning);
+  }
+  .button.is-text.is-danger {
+    color: var(--color-danger);
+  }
+}

package/src/layout/columns.css

@@ -0,0 +1,25 @@
+@layer components {
+  .columns {
+    @apply flex flex-wrap -mx-2;
+  }
+  .column {
+    @apply px-2 flex-1;
+  }
+  .column.is-1 { @apply w-1/12; }
+  .column.is-2 { @apply w-2/12; }
+  .column.is-3 { @apply w-3/12; }
+  .column.is-4 { @apply w-4/12; }
+  .column.is-5 { @apply w-5/12; }
+  .column.is-6 { @apply w-6/12; }
+  .column.is-7 { @apply w-7/12; }
+  .column.is-8 { @apply w-8/12; }
+  .column.is-9 { @apply w-9/12; }
+  .column.is-10 { @apply w-10/12; }
+  .column.is-11 { @apply w-11/12; }
+  .column.is-12 { @apply w-full; }
+  
+  @media (min-width: 769px) {
+    .column.is-offset-1 { margin-left: 8.333%; }
+    /* ... resto de offsets ... */
+  }
+}

package/src/layout/container.css

@@ -0,0 +1,12 @@
+@layer components {
+  .container {
+    @apply mx-auto px-4;
+    max-width: 100%;
+  }
+  @media (min-width: 1024px) {
+    .container { max-width: 960px; }
+  }
+  @media (min-width: 1216px) {
+    .container { max-width: 1152px; }
+  }
+}

package/src/layout/hero.css

@@ -0,0 +1,8 @@
+@layer components {
+  .hero {
+    @apply bg-primary text-white py-12;
+  }
+  .hero.is-medium { @apply py-24; }
+  .hero.is-large { @apply py-48; }
+  .hero-body { @apply container mx-auto px-4; }
+}

package/src/layout/level.css

@@ -0,0 +1,31 @@
+@layer components {
+  .level {
+    @apply flex items-center justify-between flex-wrap gap-4;
+  }
+  .level-item {
+    @apply flex items-center flex-1 justify-center;
+  }
+  .level-left,
+  .level-right {
+    @apply flex items-center gap-4;
+  }
+  .level-left {
+    @apply justify-start;
+  }
+  .level-right {
+    @apply justify-end;
+  }
+  /* Modo vertical en móvil */
+  @media (max-width: 768px) {
+    .level:not(.is-mobile) {
+      @apply flex-col items-stretch;
+    }
+    .level:not(.is-mobile) .level-left,
+    .level:not(.is-mobile) .level-right {
+      @apply justify-center;
+    }
+  }
+  .level.is-mobile {
+    @apply flex-row;
+  }
+}

package/src/layout/section.css

@@ -0,0 +1,11 @@
+@layer components {
+  .section {
+    @apply py-12 px-4;
+  }
+  .section.is-medium {
+    @apply py-24;
+  }
+  .section.is-large {
+    @apply py-48;
+  }
+}

package/src/media-object.css

@@ -0,0 +1,8 @@
+@layer components {
+  .media {
+    @apply flex gap-4;
+  }
+  .media-left { @apply flex-shrink-0; }
+  .media-content { @apply flex-1; }
+  .media-right { @apply flex-shrink-0; }
+}

package/src/theme.css

@@ -0,0 +1,39 @@
+@import "tailwindcss";
+
+@theme {
+  /* Main Colors from Bulma */
+  --color-primary: #00d1b2;
+  --color-link: #485fc7;
+  --color-info: #3e8ed0;
+  --color-success: #48c78e;
+  --color-warning: #ffe08c;
+  --color-danger: #f14668;
+  --color-light: #f5f5f5;
+  --color-dark: #363636;
+  --color-white: #fff;
+  --color-black: #0a0a0a;
+  
+  /* Grey Scale */
+  --color-grey-light: #fafafa;
+  --color-grey: #dbdbdb;
+  --color-grey-dark: #7a7a7a;
+  
+  /* Fonts and Sizes (like Bulma) */
+  --font-family-sans: 'BlinkMacSystemFont', -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+  --font-family-monospace: monospace;
+  
+  --text-size-small: 0.75rem;
+  --text-size-normal: 1rem;
+  --text-size-medium: 1.25rem;
+  --text-size-large: 1.5rem;
+  
+  --radius-normal: 0.375rem;
+  --radius-small: 0.25rem;
+  --radius-large: 0.5rem;
+  
+  /* Breakpoints Bulma */
+  --breakpoint-mobile: 768px;
+  --breakpoint-tablet: 769px;
+  --breakpoint-desktop: 1024px;
+  --breakpoint-widescreen: 1216px;
+}