diff --git a/ui/ui-frontend/projects/starter-kit/src/app/app-routing.module.ts b/ui/ui-frontend/projects/starter-kit/src/app/app-routing.module.ts
index 40d2e8af5d6117876718c9df6401215c35129415..f9cd8edee750da30973bf45e006ebd909a3c0914 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/app-routing.module.ts
+++ b/ui/ui-frontend/projects/starter-kit/src/app/app-routing.module.ts
@@ -46,8 +46,10 @@ import { MiscellaneousComponent } from './components/miscellaneous/miscellaneous
import { ProgressBarComponent } from './components/progress-bar/progress-bar.component';
import { TooltipComponent } from './components/tooltip/tooltip.component';
import { TypographyComponent } from './components/typography/typography.component';
+import { ColorsComponent } from './components/colors/colors.component';
import { StarterKitComponent } from './starter-kit/starter-kit.component';
+
const routes: Routes = [
{ path: '', component: StarterKitComponent, data: { appId: ApplicationId.STARTER_KIT_APP } },
{ path: 'buttons', component: ButtonsComponent, data: { appId: ApplicationId.STARTER_KIT_APP } },
@@ -59,6 +61,8 @@ const routes: Routes = [
{ path: 'tooltip', component: TooltipComponent, data: { appId: ApplicationId.STARTER_KIT_APP } },
{ path: 'miscellaneous', component: MiscellaneousComponent, data: { appId: ApplicationId.STARTER_KIT_APP } },
{ path: 'typography', component: TypographyComponent, data: { appId: ApplicationId.STARTER_KIT_APP } },
+ { path: 'colors', component: ColorsComponent, data: { appId: ApplicationId.STARTER_KIT_APP } },
+
{ path: '**', redirectTo: '' },
];
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/app.component.html b/ui/ui-frontend/projects/starter-kit/src/app/app.component.html
index 625a62d36c96c7dd17165355c27c07dc7d65747e..a5ba2aeeb74624238d3bd49795ea9efbd13928f1 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/app.component.html
+++ b/ui/ui-frontend/projects/starter-kit/src/app/app.component.html
@@ -16,6 +16,7 @@
<mat-list-item routerLink="/tooltip">Tooltip</mat-list-item>
<mat-list-item routerLink="/miscellaneous">Miscellaneous</mat-list-item>
<mat-list-item routerLink="/typography">Typography</mat-list-item>
+ <mat-list-item routerLink="/colors">Colors</mat-list-item>
<mat-list-item routerLink=""><i class="material-icons">help</i></mat-list-item>
</mat-list>
</mat-sidenav>
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/app.module.ts b/ui/ui-frontend/projects/starter-kit/src/app/app.module.ts
index f827c4448afe4dabd62f0c136aa48c154082cf8b..02278cc37b9098ed4c46f71f85f34bf9dd0cc11a 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/app.module.ts
+++ b/ui/ui-frontend/projects/starter-kit/src/app/app.module.ts
@@ -60,6 +60,7 @@ import { MiscellaneousModule } from './components/miscellaneous/miscellaneous.mo
import { ProgressBarModule } from './components/progress-bar/progress-bar.module';
import { TooltipModule } from './components/tooltip/tooltip.module';
import { TypographyModule } from './components/typography/typography.module';
+import { ColorsModule } from './components/colors/colors.module';
import { StarterKitModule } from './starter-kit/starter-kit.module';
registerLocaleData(localeFr, 'fr');
@@ -93,6 +94,7 @@ export function httpLoaderFactory(httpClient: HttpClient): MultiTranslateHttpLoa
ProgressBarModule,
TypographyModule,
TooltipModule,
+ ColorsModule,
MatCardModule,
MatSidenavModule,
MatListModule,
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.component.html b/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..f6dd05621a0db19a5d96b56c46dcdf99afa2e0e2
--- /dev/null
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.component.html
@@ -0,0 +1,276 @@
+<div class="container">
+ <div>
+ <span class="color-text">Couleur primaire: </span>
+ </div>
+ <div>
+ <div class="color" style="background-color: var(--vitamui-primary)"></div>
+
+ <ul>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-primary-50)"
+ ></div>
+ <div class="shade-text"><span class="color-value">50</span></div>
+ </li>
+
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-primary-100)"
+ ></div>
+ <div class="shade-text"><span class="color-value">100</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-primary-200)"
+ ></div>
+ <div class="shade-text"><span class="color-value">200</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-primary-300)"
+ ></div>
+ <div class="shade-text"><span class="color-value">300</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-primary-400)"
+ ></div>
+ <div class="shade-text"><span class="color-value">400</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-primary)"
+ ></div>
+ <div class="shade-text"><span class="color-value">(500)</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-primary-600)"
+ ></div>
+ <div class="shade-text"><span class="color-value">600</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-primary-700)"
+ ></div>
+ <div class="shade-text"><span class="color-value">700</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-primary-800)"
+ ></div>
+ <div class="shade-text"><span class="color-value">800</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-primary-900)"
+ ></div>
+ <div class="shade-text"><span class="color-value">900</span></div>
+ </li>
+ </ul>
+ </div>
+</div>
+
+<div class="container">
+ <div>
+ <span class="color-text">Couleur secondaire: </span>
+ </div>
+ <div>
+ <div class="color" style="background-color: var(--vitamui-secondary)"></div>
+
+ <ul>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-secondary-50)"
+ ></div>
+ <div class="shade-text"><span class="color-value">50</span></div>
+ </li>
+
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-secondary-100)"
+ ></div>
+ <div class="shade-text"><span class="color-value">100</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-secondary-200)"
+ ></div>
+ <div class="shade-text"><span class="color-value">200</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-secondary-300)"
+ ></div>
+ <div class="shade-text"><span class="color-value">300</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-secondary-400)"
+ ></div>
+ <div class="shade-text"><span class="color-value">400</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-secondary)"
+ ></div>
+ <div class="shade-text"><span class="color-value">(500)</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-secondary-600)"
+ ></div>
+ <div class="shade-text"><span class="color-value">600</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-secondary-700)"
+ ></div>
+ <div class="shade-text"><span class="color-value">700</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-secondary-800)"
+ ></div>
+ <div class="shade-text"><span class="color-value">800</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-secondary-900)"
+ ></div>
+ <div class="shade-text"><span class="color-value">900</span></div>
+ </li>
+ </ul>
+ </div>
+</div>
+
+<div class="container">
+ <div>
+ <span class="color-text">Couleur gris: </span>
+ </div>
+ <div>
+ <div class="color" style="background-color: var(--vitamui-grey)"></div>
+
+ <ul>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-grey-50)"
+ ></div>
+ <div class="shade-text"><span class="color-value">50</span></div>
+ </li>
+
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-grey-100)"
+ ></div>
+ <div class="shade-text"><span class="color-value">100</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-grey-200)"
+ ></div>
+ <div class="shade-text"><span class="color-value">200</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-grey-300)"
+ ></div>
+ <div class="shade-text"><span class="color-value">300</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-grey-400)"
+ ></div>
+ <div class="shade-text"><span class="color-value">400</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-grey)"
+ ></div>
+ <div class="shade-text"><span class="color-value">(500)</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-grey-600)"
+ ></div>
+ <div class="shade-text"><span class="color-value">600</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-grey-700)"
+ ></div>
+ <div class="shade-text"><span class="color-value">700</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-grey-800)"
+ ></div>
+ <div class="shade-text"><span class="color-value">800</span></div>
+ </li>
+ <li>
+ <div
+ class="shade"
+ style="background-color: var(--vitamui-grey-900)"
+ ></div>
+ <div class="shade-text"><span class="color-value">900</span></div>
+ </li>
+ </ul>
+ </div>
+</div>
+
+<div class="container">
+ <div>
+ <span class="color-text">Couleur rouge: </span>
+ </div>
+ <div>
+ <div class="color red"></div>
+ </div>
+</div>
+
+
+<div class="container">
+ <div>
+ <span class="color-text">Couleur orange: </span>
+ </div>
+ <div>
+ <div class="color orange"></div>
+ </div>
+</div>
+
+<div class="container">
+ <div>
+ <span class="color-text">Couleur vert: </span>
+ </div>
+ <div>
+ <div class="color green"></div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.component.scss b/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7e1c3a6f15aa6fb01e5e5a689d9aa5a9a26714fa
--- /dev/null
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.component.scss
@@ -0,0 +1,53 @@
+@import '~ui-frontend-common/sass/variables/colors';
+.container{
+ margin-top: 40px;
+}
+
+ul {
+ display: flex;
+ list-style: none;
+ justify-content: left;
+ padding-left: 0px !important;
+}
+.color {
+ width: auto;
+ height: 240px;
+ border-radius: 8px;
+ max-width: 1060px;
+}
+.shade {
+ width: 90px;
+ height: 90px;
+ border-radius: 4px;
+ margin-right: 18px;
+}
+
+.shade-text{
+ text-align: center;
+ margin-right: 10px;
+ margin-top: 10px;
+}
+
+
+
+.color-text {
+ font-family: Mulish;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 900;
+ line-height: 28px;
+ letter-spacing: 0px;
+ text-align: left;
+}
+
+.red{
+ background-color: $red;
+}
+
+.orange{
+ background-color: $orange;
+}
+
+.green{
+ background-color: $green;
+}
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.component.ts b/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fba6ecc35ab6591ba10eec42294fcae55d6be62a
--- /dev/null
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'starter-kit-colors',
+ templateUrl: './colors.component.html',
+ styleUrls: ['./colors.component.scss']
+})
+export class ColorsComponent implements OnInit {
+
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.module.ts b/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b60013146e5c1fecdb0d938335097580649859b1
--- /dev/null
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/colors/colors.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ColorsComponent } from './colors.component';
+
+
+
+@NgModule({
+ declarations: [ColorsComponent],
+ imports: [CommonModule],
+ exports: [ColorsComponent]
+})
+export class ColorsModule { }