@dropi/ui-components 1.0.0

package/src/components-source/storybook-doc-components/colors-storybook/colors-storybook.component.html

@@ -0,0 +1,63 @@
+<div class="container-doc">
+  <div class="max-margin">
+    <div class="background-tittle">
+      <h1>
+        {{ tittle }}
+      </h1>
+    </div>
+
+    <div class="container-Typography">
+
+      <p>
+        Dropi es una plataforma altamente visual, y nuestro sistema de colores permite a los usuarios identificar estados, realizar acciones, encontrar asistencia e indicar los siguientes pasos. El uso coherente del color en nuestra interfaz reduce la carga cognitiva y proporciona una experiencia fluida y atractiva. Nuestros colores están diseñados para ser claros, accesibles y alineados con nuestra identidad de marca, ofreciendo una navegación intuitiva y eficiente. Se presentan en tres temas de color para garantizar versatilidad y armonía en toda la plataforma.
+      </p>
+
+      <h3 style="margin-top: 2rem;">Implementación en CSS</h3>
+      <br>
+      <p>Los colores pueden ser utilizados en estilos CSS mediante variables predefinidas:</p>
+
+
+      <pre style="margin-top: 2rem;">
+        <code appPrismHighlight class="language-css" >
+          {{'.button {
+            background-color: var(--Primary-Primary500); /* F49A3D */
+            color: var(--white);
+          }
+          
+          .alert-success {
+            background-color: var(--success-success500); /* 0ABB87 */
+            color: var(--white);
+          }'}}
+        </code>
+      </pre>
+      
+ 
+      <app-tillte-table-documentation [dataTable]="colorData" [tittle]="'Neutral'"
+        [type]="'color'" [description]="neutralColorsDescription"></app-tillte-table-documentation>
+
+      <app-tillte-table-documentation [dataTable]="colorDataPrimary" [tittle]="'Primary'"
+        [type]="'color'" [description]="primaryColorsDescription"></app-tillte-table-documentation>
+
+      <app-tillte-table-documentation [dataTable]="colorDataSecundary" [tittle]="'Secundary'"
+        [type]="'color'" [description]="secondaryColorsDescription"></app-tillte-table-documentation>
+
+      <app-tillte-table-documentation [dataTable]="colorDataGray" [tittle]="'Gray'"
+        [type]="'color'" [description]="grayColorsDescription"></app-tillte-table-documentation>
+
+      <app-tillte-table-documentation [dataTable]="colorDataSuccess" [tittle]="'Success'"
+        [type]="'color'" [description]="successColorsDescription"></app-tillte-table-documentation>
+
+        <app-tillte-table-documentation [dataTable]="colorDataError" [tittle]="'Error'"
+        [type]="'color'" [description]="errorColorsDescription"></app-tillte-table-documentation>
+
+        <app-tillte-table-documentation [dataTable]="colorDataInfo" [tittle]="'Info'"
+        [type]="'color'" [description]="infoColorsDescription"></app-tillte-table-documentation>
+
+        <app-tillte-table-documentation [dataTable]="colorDataWarning" [tittle]="'Warning'"
+        [type]="'color'" [description]="warningDescription"></app-tillte-table-documentation>
+
+        
+
+    </div>
+  </div>
+</div>

package/src/components-source/storybook-doc-components/colors-storybook/colors-storybook.component.ts

@@ -0,0 +1,542 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TillteTableDocumentationComponent } from '@app/ui/storybook-doc-components/tillte-table-documentation/tillte-table-documentation.component';
+import { MessageService } from 'primeng/api';
+import { ToastModule } from 'primeng/toast';
+import { PrismHighlightDirective } from '@app/directives/prism-highlight.directive';
+
+@Component({
+  selector: 'app-colors-storybook',
+  templateUrl: './colors-storybook.component.html',
+  styleUrls: ['./colors-storybook.component.css'],
+  standalone: true,
+  providers: [MessageService], 
+  imports: [TillteTableDocumentationComponent,ToastModule,PrismHighlightDirective ],
+})
+export class ColorsStorybookComponent implements OnInit {
+  @Input() tittle: string;
+  colorDataSecundary: {
+    colorLight: string;
+    colorDark: string;
+    nombreDeToken: string;
+    className: string;
+  }[];
+  colorDataGray: {
+    colorLight: string;
+    colorDark: string;
+    nombreDeToken: string;
+    className: string;
+  }[];
+  colorDataSuccess: {
+    colorLight: string;
+    colorDark: string;
+    nombreDeToken: string;
+    className: string;
+  }[];
+  colorDataError: {
+    colorLight: string;
+    colorDark: string;
+    nombreDeToken: string;
+    className: string;
+  }[];
+  colorDataInfo: {
+    colorLight: string;
+    colorDark: string;
+    nombreDeToken: string;
+    className: string;
+  }[];
+  colorDataWarning: {
+    colorLight: string;
+    colorDark: string;
+    nombreDeToken: string;
+    className: string;
+  }[];
+  public colorData = [];
+  public colorDataPrimary = [];
+
+  public typographyStylesDescription =
+    'Utilizamos dos estilos de tipografía clave: encabezado y texto.';
+
+  public neutralColorsDescription =
+    'Colores neutros que proporcionan equilibrio y armonía en la interfaz, garantizando accesibilidad y claridad.';
+
+  public primaryColorsDescription =
+    'Los colores primarios definen la identidad visual de Dropi, asegurando consistencia y reconocimiento de marca.';
+
+  public secondaryColorsDescription =
+    'Los colores secundarios complementan la paleta primaria, aportando versatilidad y dinamismo en la interfaz.';
+
+  public grayColorsDescription =
+    'Tonos de gris utilizados para proporcionar jerarquía visual y mejorar la legibilidad en la plataforma.';
+
+  public successColorsDescription =
+    'Colores asociados a estados exitosos, confirmaciones y resultados positivos dentro de la plataforma.';
+
+  public errorColorsDescription =
+    'Colores utilizados para indicar errores, advertencias críticas y situaciones que requieren atención inmediata.';
+
+  public infoColorsDescription =
+    'Tonos de azul empleados para representar información relevante y estados informativos dentro del sistema.';
+  public warningDescription = 'Colores utilizados para advertencias o precauciones en la interfaz.';
+
+  constructor(private messageService: MessageService) {}
+
+  ngOnInit() {
+    this.colorData = [
+      {
+        colorLight: '#FFFFFF',
+        colorDark: '#0E111A',
+        nombreDeToken: 'White',
+        className: 'whiteColor',
+      },
+      {
+        colorLight: '#000000',
+        colorDark: '#FFFFFF',
+        nombreDeToken: 'Black',
+        className: 'blackColor',
+      },
+    ];
+
+    this.colorDataPrimary = [
+      {
+        colorLight: '#FEF8F1',
+        colorDark: '#1A1006',
+        nombreDeToken: 'Primary-50',
+        className: 'primary50Color',
+      },
+      {
+        colorLight: '#FFECDA',
+        colorDark: '#26180A',
+        nombreDeToken: 'Primary-100',
+        className: 'primary100Color',
+      },
+      {
+        colorLight: '#FCDDBD',
+        colorDark: '#4D3013',
+        nombreDeToken: 'Primary-200',
+        className: 'primary200Color',
+      },
+      {
+        colorLight: '#FAC289',
+        colorDark: '#805020',
+        nombreDeToken: 'Primary-300',
+        className: 'primary300Color',
+      },
+      {
+        colorLight: '#F7B46F',
+        colorDark: '#B2712D',
+        nombreDeToken: 'Primary-400',
+        className: 'primary400Color',
+      },
+      {
+        colorLight: '#F49A3D',
+        colorDark: '#D9842B',
+        nombreDeToken: 'Primary-500',
+        className: 'primary500Color',
+      },
+      {
+        colorLight: '#CC8133',
+        colorDark: '#E5A767',
+        nombreDeToken: 'Primary-600',
+        className: 'primary600Color',
+      },
+      {
+        colorLight: '#996027',
+        colorDark: '#EBB681',
+        nombreDeToken: 'Primary-700',
+        className: 'primary700Color',
+      },
+      {
+        colorLight: '#66401A',
+        colorDark: '#F0CEAD',
+        nombreDeToken: 'Primary-800',
+        className: 'primary800Color',
+      },
+      {
+        colorLight: '#33200D',
+        colorDark: '#F0DAC5',
+        nombreDeToken: 'Primary-900',
+        className: 'primary900Color',
+      },
+    ];
+
+    this.colorDataSecundary = [
+      {
+        colorLight: '#F0FAFC',
+        colorDark: '#01161F',
+        nombreDeToken: 'Secondary-50',
+        className: 'secondary50Color',
+      },
+      {
+        colorLight: '#CEE8F2',
+        colorDark: '#003042',
+        nombreDeToken: 'Secondary-100',
+        className: 'secondary100Color',
+      },
+      {
+        colorLight: '#95D0E5',
+        colorDark: '#00455E',
+        nombreDeToken: 'Secondary-200',
+        className: 'secondary200Color',
+      },
+      {
+        colorLight: '#62BAD9',
+        colorDark: '#005A7A',
+        nombreDeToken: 'Secondary-300',
+        className: 'secondary300Color',
+      },
+      {
+        colorLight: '#33A4CC',
+        colorDark: '#00759E',
+        nombreDeToken: 'Secondary-400',
+        className: 'secondary400Color',
+      },
+      {
+        colorLight: '#008DBF',
+        colorDark: '#2D8FB2',
+        nombreDeToken: 'Secondary-500',
+        className: 'secondary500Color',
+      },
+      {
+        colorLight: '#007199',
+        colorDark: '#5BADC9',
+        nombreDeToken: 'Secondary-600',
+        className: 'secondary600Color',
+      },
+      {
+        colorLight: '#005573',
+        colorDark: '#7CB9CF',
+        nombreDeToken: 'Secondary-700',
+        className: 'secondary700Color',
+      },
+      {
+        colorLight: '#00384D',
+        colorDark: '#ABD2E0',
+        nombreDeToken: 'Secondary-800',
+        className: 'secondary800Color',
+      },
+      {
+        colorLight: '#001C26',
+        colorDark: '#DAF1F7',
+        nombreDeToken: 'Secondary-900',
+        className: 'secondary900Color',
+      },
+    ];
+
+    this.colorDataGray = [
+      {
+        colorLight: '#F7F8FA',
+        colorDark: '#151A26',
+        nombreDeToken: 'Gray-50',
+        className: 'gray50Color',
+      },
+      {
+        colorLight: '#E6EAF2',
+        colorDark: '#222B40',
+        nombreDeToken: 'Gray-100',
+        className: 'gray100Color',
+      },
+      {
+        colorLight: '#C3C9D9',
+        colorDark: '#364059',
+        nombreDeToken: 'Gray-200',
+        className: 'gray200Color',
+      },
+      {
+        colorLight: '#A3ABBF',
+        colorDark: '#3E4966',
+        nombreDeToken: 'Gray-300',
+        className: 'gray300Color',
+      },
+      {
+        colorLight: '#858EA6',
+        colorDark: '#505A73',
+        nombreDeToken: 'Gray-400',
+        className: 'gray400Color',
+      },
+      {
+        colorLight: '#69738C',
+        colorDark: '#69738C',
+        nombreDeToken: 'Gray-500',
+        className: 'gray500Color',
+      },
+      {
+        colorLight: '#475066',
+        colorDark: '#858EA6',
+        nombreDeToken: 'Gray-600',
+        className: 'gray600Color',
+      },
+      {
+        colorLight: '#32394D',
+        colorDark: '#A3ABBF',
+        nombreDeToken: 'Gray-700',
+        className: 'gray700Color',
+      },
+      {
+        colorLight: '#1F2433',
+        colorDark: '#C3C9D9',
+        nombreDeToken: 'Gray-800',
+        className: 'gray800Color',
+      },
+      {
+        colorLight: '#0E111A',
+        colorDark: '#E6EAF2',
+        nombreDeToken: 'Gray-900',
+        className: 'gray900Color',
+      },
+    ];
+
+    this.colorDataSuccess = [
+      {
+        colorLight: '#E7F8F3',
+        colorDark: '#013324',
+        nombreDeToken: 'Success-50',
+        className: 'success50Color',
+      },
+      {
+        colorLight: '#B3EADA',
+        colorDark: '#03402E',
+        nombreDeToken: 'Success-100',
+        className: 'success100Color',
+      },
+      {
+        colorLight: '#8EE0C8',
+        colorDark: '#066347',
+        nombreDeToken: 'Success-200',
+        className: 'success200Color',
+      },
+      {
+        colorLight: '#5BD1AF',
+        colorDark: '#07825E',
+        nombreDeToken: 'Success-300',
+        className: 'success300Color',
+      },
+      {
+        colorLight: '#3BC99F',
+        colorDark: '#09AD7D',
+        nombreDeToken: 'Success-400',
+        className: 'success400Color',
+      },
+      {
+        colorLight: '#0ABB87',
+        colorDark: '#0FBA88',
+        nombreDeToken: 'Success-500',
+        className: 'success500Color',
+      },
+      {
+        colorLight: '#09AA7B',
+        colorDark: '#41C49D',
+        nombreDeToken: 'Success-600',
+        className: 'success600Color',
+      },
+      {
+        colorLight: '#078560',
+        colorDark: '#5BD1AF',
+        nombreDeToken: 'Success-700',
+        className: 'success700Color',
+      },
+      {
+        colorLight: '#06674A',
+        colorDark: '#8EE0C8',
+        nombreDeToken: 'Success-800',
+        className: 'success800Color',
+      },
+      {
+        colorLight: '#044F39',
+        colorDark: '#AEE3D3',
+        nombreDeToken: 'Success-900',
+        className: 'success900Color',
+      },
+    ];
+
+    this.colorDataError = [
+      {
+        colorLight: '#FEF0F0',
+        colorDark: '#572323',
+        nombreDeToken: 'Error-50',
+        className: 'error50Color',
+      },
+      {
+        colorLight: '#FCD1D1',
+        colorDark: '#632C2C',
+        nombreDeToken: 'Error-100',
+        className: 'error100Color',
+      },
+      {
+        colorLight: '#FABABB',
+        colorDark: '#753334',
+        nombreDeToken: 'Error-200',
+        className: 'error200Color',
+      },
+      {
+        colorLight: '#F89B9C',
+        colorDark: '#B04D4E',
+        nombreDeToken: 'Error-300',
+        className: 'error300Color',
+      },
+      {
+        colorLight: '#F68889',
+        colorDark: '#DB5D5E',
+        nombreDeToken: 'Error-400',
+        className: 'error400Color',
+      },
+      {
+        colorLight: '#F46A6B',
+        colorDark: '#F46768',
+        nombreDeToken: 'Error-500',
+        className: 'error500Color',
+      },
+      {
+        colorLight: '#DE6061',
+        colorDark: '#F68485',
+        nombreDeToken: 'Error-600',
+        className: 'error600Color',
+      },
+      {
+        colorLight: '#AD4B4C',
+        colorDark: '#F89697',
+        nombreDeToken: 'Error-700',
+        className: 'error700Color',
+      },
+      {
+        colorLight: '#863A3B',
+        colorDark: '#F9B3B4',
+        nombreDeToken: 'Error-800',
+        className: 'error800Color',
+      },
+      {
+        colorLight: '#662D2D',
+        colorDark: '#FDE2E2',
+        nombreDeToken: 'Error-900',
+        className: 'error900Color',
+      },
+    ];
+
+    this.colorDataInfo = [
+      {
+        colorLight: '#EEF6FE',
+        colorDark: '#0A2136',
+        nombreDeToken: 'Info-50',
+        className: 'info50Color',
+      },
+      {
+        colorLight: '#C9E3FB',
+        colorDark: '#0D2942',
+        nombreDeToken: 'Info-100',
+        className: 'info100Color',
+      },
+      {
+        colorLight: '#AFD6F9',
+        colorDark: '#12395C',
+        nombreDeToken: 'Info-200',
+        className: 'info200Color',
+      },
+      {
+        colorLight: '#8AC3F6',
+        colorDark: '#206099',
+        nombreDeToken: 'Info-300',
+        className: 'info300Color',
+      },
+      {
+        colorLight: '#73B7F4',
+        colorDark: '#2288E3',
+        nombreDeToken: 'Info-400',
+        className: 'info400Color',
+      },
+      {
+        colorLight: '#50A5F1',
+        colorDark: '#3C9CF1',
+        nombreDeToken: 'Info-500',
+        className: 'info500Color',
+      },
+      {
+        colorLight: '#4996DB',
+        colorDark: '#55A8F2',
+        nombreDeToken: 'Info-600',
+        className: 'info600Color',
+      },
+      {
+        colorLight: '#3975AB',
+        colorDark: '#6FB6F6',
+        nombreDeToken: 'Info-700',
+        className: 'info700Color',
+      },
+      {
+        colorLight: '#2C5B85',
+        colorDark: '#8BC5F9',
+        nombreDeToken: 'Info-800',
+        className: 'info800Color',
+      },
+      {
+        colorLight: '#224565',
+        colorDark: '#A8C8E5',
+        nombreDeToken: 'Info-900',
+        className: 'info900Color',
+      },
+    ];
+
+    this.colorDataWarning = [
+      {
+        colorLight: '#FEF8ED',
+        colorDark: '#402F12',
+        nombreDeToken: 'Warning-50',
+        className: 'warning50Color',
+      },
+      {
+        colorLight: '#FBE8C8',
+        colorDark: '#4D3A18',
+        nombreDeToken: 'Warning-100',
+        className: 'warning100Color',
+      },
+      {
+        colorLight: '#F9DDAD',
+        colorDark: '#805F28',
+        nombreDeToken: 'Warning-200',
+        className: 'warning200Color',
+      },
+      {
+        colorLight: '#F6CD87',
+        colorDark: '#AB8036',
+        nombreDeToken: 'Warning-300',
+        className: 'warning300Color',
+      },
+      {
+        colorLight: '#F4C370',
+        colorDark: '#DBA445',
+        nombreDeToken: 'Warning-400',
+        className: 'warning400Color',
+      },
+      {
+        colorLight: '#F1B44C',
+        colorDark: '#F1B44C',
+        nombreDeToken: 'Warning-500',
+        className: 'warning500Color',
+      },
+      {
+        colorLight: '#DBA445',
+        colorDark: '#F4C370',
+        nombreDeToken: 'Warning-600',
+        className: 'warning600Color',
+      },
+      {
+        colorLight: '#AB8036',
+        colorDark: '#F6CD87',
+        nombreDeToken: 'Warning-700',
+        className: 'warning700Color',
+      },
+      {
+        colorLight: '#85632A',
+        colorDark: '#F9DDAD',
+        nombreDeToken: 'Warning-800',
+        className: 'warning800Color',
+      },
+      {
+        colorLight: '#654C20',
+        colorDark: '#FEF8ED',
+        nombreDeToken: 'Warning-900',
+        className: 'warning900Color',
+      },
+    ];
+  }
+
+
+}