Aura: Skin wiki Casiopea/Semestre 2 - Semana 6

Título	Aura: Skin wiki Casiopea/Semestre 2 - Semana 6
Asignatura	Taller Casiopea
Del Curso	Taller Casiopea
Carreras	Diseño
Nº	6
Alumno(s)	Francisca Ortega

< Volver a la Página del Proyecto

Objetivos de esta semana

Sistema de Diseño

□ Crear el material visual (y, de ser necesario, audiovisual) para la documentación
□ Publicarlo en Figma Community
□ Publicarlo en la wiki Casiopea

Estudio de otras skins

□ Continuar con la experimentación del código de las distintas skins instaladas en la wiki, modificando componentes para que se vean como nuestra propuesta
□ (Si es necesario) documentar las diferencias dentro de la wiki, o hallazgos interesantes

Avances

Parte del avance de la semana consistió en arreglar detalles de la documentación del sistema de diseño en Figma

Además, se añadieron componentes e interacciones faltantes, como la ficha, o los menús desplegables de la barra de navegación en pantalla tablet y móvil.

Además, se comenzó a documentar en esta página los componentes de la skin (en el futuro este material podría migrarse a la página principal del proyecto).

Variables

Tamaños

@space-0: 0;
@space-1: 2px;
@space-2: 4px;
@space-3: 8px;
@space-4: 12px;
@space-5: 16px;
@space-6: 20px;
@space-7: 24px;
@space-8: 28px;
@space-9: 32px;
@space-10: 36px;
@space-11: 40px;
@space-12: 44px;
@space-13: 48px;
@space-14: 56px;
@space-15: 60px;
@space-16: 64px;
@space-17: 68px;
@space-18: 80px;
@space-19: 96px;

@border-radius-sm: @space-1;
@border-radius-md: @space-2;
@border-radius-lg: @space-3;
@border-radius-xl: @space-12;

@stroke-weight-sm: 1px;
@stroke-weight-md: @space-1;
@stroke-weight-lg: @space-2;

Colores

Color Surface: Colores de superficies, background, stroke, colores de texto, etc.

@col-surf-50: #F6F5F5;
@col-surf-100: #EDECEA;
@col-surf-200: #DCD9D6;
@col-surf-300: #C5BEB7;
@col-surf-400: #B2ACA4;
@col-surf-500: #959089;
@col-surf-600: #7C7872;
@col-surf-700: #53504C;
@col-surf-800: #373633;
@col-surf-900: #2D2B29;

Color Primario: Color primario de Casiopea, para botones, links, títulos, etc.

@col-prim-50: #F6EAE8;
@col-prim-100: #EED6D1;
@col-prim-200: #D4998B;
@col-prim-300: #B1472E;
@col-prim-400: #A83217;
@col-prim-500: #972D15;
@col-prim-600: #7E2611;
@col-prim-700: #54190C;
@col-prim-800: #2A0D06;
@col-prim-900: #170101;

Color Succes: Para notificar al usuario de acciones exitosas

@col-succes-50: #F6FEFB;
@col-succes-100: #1BC590;
@col-succes-200: #12825F;
@col-succes-300: #0E674B;
@col-succes-400: #0A4834;

Color Warning: Para alertar al usuario

@col-warning-50: #FFFDFA;
@col-warning-100: #F9DBB5;
@col-warning-200: #F2AB53;
@col-warning-300: #EE9322;
@col-warning-400: #A6620D;

Color Danger: Para notificar al usuario de acciones incompletas o errores

@col-danger-50: #FBEAEA;
@col-danger-100: #E16B6B;
@col-danger-200: #C92929;
@col-danger-300: #A92323;
@col-danger-400: #6E1717;