Hola Car Design Tokens

Sistema de diseño que incluye tokens, variables y mixins de SASS para mantener consistencia en los proyectos de holacarrentals.

Instalación

npm install holacarrentals-design-tokens

Uso

Importa el paquete en tu archivo SCSS:

@import 'holacarrentals-design-tokens';

Variables CSS Disponibles

// Colores
var(--color-primary)         // #FF6600
var(--color-secondary)       // #140064
var(--color-red)            // #EC0101
var(--color-blue)           // #052DF3
var(--color-green)          // #14df09
var(--color-white)          // #FFFFFF
var(--color-black)          // #000000

// Gradientes
var(--gradient-primary)      // linear-gradient(264deg, #FF8B01 0%, #FF6600 100%)
var(--gradient-secondary)    // linear-gradient(264deg, #5A41E6 0%, #140064 100%)

// Tipografía
var(--font-primary)         // "Dosis", sans-serif
var(--font-secondary)       // "Open Sans", sans-serif

Breakpoints

$grid-breakpoints: (
  xxs: 0px,
  xs: 429px,
  sm: 992px,
  md: 1200px,
  lg: 1360px,
  xl: 1440px,
  xxl: 1680px,
  xxxl: 1920px,
  xxxxl: 2500px
);

Mixins Disponibles

Typography

// Uso de font-stack
.title {
  @include font-stack('h1-dosis-bold');
}

// Variantes disponibles:
// h1-dosis-regular, h1-dosis-medium, h1-dosis-bold
// h1-open-bold, h1-open-medium
// h2-dosis-bold, h2-open-bold
// h3-dosis-bold, h3-open-bold
// h4-dosis-regular, h4-dosis-bold, h4-open-bold
// h5-open-regular, h5-open-bold
// p-open-regular, p-open-semibold, p-open-bold

Breakpoints

// Media queries
@include breakpoint-up('md') {
  // Estilos para md y superiores
}

@include breakpoint-down('lg') {
  // Estilos para lg y inferiores
}

Layout

// Contenedor con ancho máximo
.container {
  @include max-width-container();
}

// Flexbox
.flex-container {
  @include flexbox(
    $display: flex,
    $direction: column,
    $alignItems: center,
    $justifyContent: space-between
  );
}

Utilities

// Ocultar scrollbar
.scroll-container {
  @include hide-scroll();
}

Espaciados

$spacers: (
  xxs: 0.25rem,  // 4px
  xs: 0.5rem,    // 8px
  s: 1rem,       // 16px
  m: 2rem,       // 32px
  l: 4rem,       // 64px
  xl: 8rem,      // 128px
  xxl: 16rem     // 256px
);

Ejemplos de Uso

.card {
  @include font-stack('p-open-regular');
  background-color: var(--color-white);
  
  @include breakpoint-up('md') {
    @include flexbox(
      $display: flex,
      $direction: row,
      $alignItems: center
    );
    padding: map-get($spacers, 'm');
  }
  
  .title {
    @include font-stack('h4-dosis-bold');
    color: var(--color-primary);
  }
}

Contribución

Para contribuir al proyecto:

1. Fork del repositorio
2. Crea tu rama de características (git checkout -b feature/AmazingFeature)
3. Commit de tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

Licencia

Este proyecto está bajo la Licencia MIT.