Merge branch 'wip-theme' into 'dev'

Add theme

See merge request !4

ds-ml-css/components/accordion.scss

@@ -7,6 +7,7 @@
 .accordion-btn {
   border: none;
   border-top: solid var(--ml-neutral) 2px;
+  border-bottom: transparent solid 2px;
   background-color: var(--ml-background);
   cursor: pointer;
   padding: 18px;
@@ -22,12 +23,14 @@
   background-color: var(--ml-m200);
   border: none;
   border-top: transparent solid 2px;
+  border-bottom: transparent solid 2px;
 }
 
-.active {
+.accordion-btn.expanded {
   background-color: var(--ml-m400);
   border: none;
   border-top: transparent solid 2px;
+  border-bottom: transparent solid 2px;
 }
 
 .accordion-panel {

ds-ml-css/components/button.scss

@@ -9,53 +9,82 @@
   justify-content: center;
   align-items: center;
 
-  background-color: transparent;
-  color: var(--ml-button-color);
-  fill: var(--ml-button-color);
+  .icon {
+    font-size: var(--ml-medium-font-size);
+  }
 
   border: var(--ml-border-default);
-  border-color: var(--ml-button-color);
-  border-radius: var(--ml-small-px);
+  border-radius: var(--ml-xsmall-px);
 
-  font-size: var(--ml-medium-font-size);
-  padding: var(--ml-medium-px) var(--ml-xlarge-px);
+  // primary button
+  color: var(--ml-text-button-primary);
+  border-color: var(--ml-border-button-primary);
+  background-color: var(--ml-background-button-primary);
 
-  .icon {
-    font-size: var(--ml-medium-font-size);
+  &.secondary-button {
+    color: var(--ml-text-button-secondary);
+    border-color: var(--ml-border-button-secondary);
+    background-color: transparent;
   }
 
+  &.tertiary-button {
+    color: var(--ml-text-button-secondary);
+    border-color: transparent;
+    background-color: transparent;
+  }
+
+  // medium size
+  font-size: var(--ml-medium-font-size);
+  padding: var(--ml-medium-px) var(--ml-xlarge-px);
+  width: 155px;
+  height: 40px;
+
   &.small-button {
     font-size: var(--ml-small-font-size);
     padding: var(--ml-small-px) var(--ml-large-px);
+    width: 147px;
+    height: 32px;
   }
 
   &.large-button {
     font-size: var(--ml-large-font-size);
     padding: var(--ml-large-px) var(--ml-xxlarge-px);
-  }
-
-  &.tertiary-button {
-    border: none;
-    border-color: transparent;
-  }
-
-  &.primary-button {
-    background-color: var(--ml-button-color);
-    color: var(--ml-n000);
+    width: 204px;
+    height: 48px;  
   }
 }
 
 .button:hover,
 .button:active {
-  background-color: var(--ml-button-over-background);
+  // primary button
+  border-color: var(--ml-border-button-primary-hover);
+  background-color: var(--ml-background-button-primary-hover);
 
-  &.primary-button {
-    background-color: var(--ml-m600);
+  &.secondary-button {
+    border-color: var(--ml-border-button-secondary-hover);
+    background-color: var(--ml-background-button-secondary-hover);
+  }
+  &.tertiary-button {
+    border-color: transparent;
+    background-color: var(--ml-background-button-tertiary-hover);
   }
 }
 
 .button:disabled {
-  background: var(--ml-button-disabled-background) !important;
-  color: var(--ml-button-disabled-color);
-  border-color: var(--ml-button-disabled-color);
+  // primary button
+  color: var(--ml-text-button-primary-disabled);
+  border-color: var(--ml-background-button-primary-disabled);
+  background-color: var(--ml-background-button-primary-disabled);
+
+  &.secondary-button {
+    color: var(--ml-text-button-secondary-disabled);
+    border-color: var(--ml-border-button-disabled);
+    background-color: transparent;
+  }
+
+  &.tertiary-button {
+    color: var(--ml-text-button-secondary-disabled);
+    border-color: transparent;
+    background-color: transparent;
+  }
 }

ds-ml-css/components/progress-bar.scss

+/* ********************************************************************************************* */
+/* * PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGR * */
+/* * PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGR * */
+/* ********************************************************************************************* */
+
+.progress-bar {
+  display: grid;
+  grid-template-rows: auto;
+  min-width: 48px;
+  max-width: 50%;
+
+  label {
+    display: grid;
+    grid-template-columns: 85% 15%;
+    span {
+      text-align: right;
+    }
+  }
+
+  progress {
+    height: 8px;
+    border: none;
+    border-radius: 4px;
+    margin-top: var(--ml-medium-px);
+    margin-bottom: var(--ml-medium-px);
+  }
+
+  progress::-webkit-progress-bar,
+  progress::-moz-progress-bar {
+    background-color: var(--ml-m500);
+  }
+
+  &.small {
+    progress {
+      height: 4px;
+    }
+  }
+
+  &.success {
+    progress::-webkit-progress-bar,
+    progress::-moz-progress-bar {
+      background-color: var(--ml-text-success);
+    }
+  }
+
+  &.error {
+    progress::-webkit-progress-bar,
+    progress::-moz-progress-bar {
+      background-color: var(--ml-text-error);
+    }
+  }
+
+  .status {
+    display: flex;
+    gap: var(--ml-small-px);
+  }
+
+  &.success {
+    .status {
+      color: var(--ml-text-success);
+    }
+  }
+
+  &.error {
+    .status {
+      color: var(--ml-text-error);
+    }
+  }
+}

ds-ml-css/components/radio-button-checkbox.scss

@@ -9,12 +9,6 @@
 .rich-radio-button-group {
   border: none;
 
-  /* additionnal description for radio-button*/
-  .additionnal-description {
-    color: var(--ml-text-secondary);
-    margin: 0;
-  }
-
   /* status of radio-button or checkbox field*/
   .status {
     display: flex;

ds-ml-css/ds-ml-color-var.scss

-*[light] {
+body.light {
+  color-scheme: light;
+
   --ml-dark-hide: initial;
 
   /* define main colors */
@@ -25,25 +27,8 @@
 
   --ml-focus-color: var(--ml-b500);
 
-  --ml-code-background: var(--ml-n075);
-
-  --ml-code-comment: #a0a1a7;
-  --ml-code-keyword: #a626a4;
-  --ml-code-name: #ae180b;
-  --ml-code-literal: #0184bb;
-  --ml-code-attribute: #10660e;
-  --ml-code-variable: #7d5a0e;
-  --ml-code-symbol: #1b4ebd;
-  --ml-code-class: #c18401;
-
   --ml-button-active-color: var(--ml-b200);
 
-  /* button */
-  --ml-button-color: var(--ml-m500);
-  --ml-button-over-background: var(--ml-m100);
-  --ml-button-disabled-background: var(--ml-n000);
-  --ml-button-disabled-color: var(--ml-n200);
-
   /* checkbox */
   --ml-checkbox-border-color: var(--ml-m900);
   --ml-checkbox-checked-background: var(--ml-m500);
@@ -75,13 +60,6 @@
   --ml-text-secondary: var(--ml-n500);
   --ml-text-disabled: var(--ml-n200);
   --ml-text-highlight: var(--ml-m500);
-  /* TEXT BUTTONS */
-  --text-button-primary: var(--ml-n000);
-  --text-button-primary-hover: var(--ml-n000);
-  --text-button-primary-disabled: var(--ml-n400);
-  --text-button-secondary: var(--ml-m500);
-  --text-button-secondary-hover: (var(--ml-m600));
-  --text-button-secondary-disabled: var(--ml-n200);
   /* TEXT INFORMATIVE */
   --ml-text-information: var(--ml-b600);
   --ml-text-success: var(--ml-g600);
@@ -116,7 +94,9 @@
   --ml-footer-links-color: var(--ml-n000);
 }
 
-*[dark] {
+body.dark {
+  color-scheme: dark;
+
   --ml-dark-hide: none;
 
   /* define main colors */
@@ -143,46 +123,8 @@
 
   --ml-focus-color: var(--ml-b500);
 
-  --ml-code-background: var(--ml-n950);
-
-  --ml-code-comment: #5c6370;
-  --ml-code-keyword: #c678dd;
-  --ml-code-name: #e06c75;
-  --ml-code-literal: #56b6c2;
-  --ml-code-attribute: #98c379;
-  --ml-code-variable: #d19a66;
-  --ml-code-symbol: #61aeee;
-  --ml-code-class: #e6c07b;
-
   --ml-button-active-color: var(--ml-b800);
 
-  /* primary button */
-  --ml-primarybutton-border: solid 1px var(--ml-m400);
-  --ml-primarybutton-background: var(--ml-m400);
-  --ml-primarybutton-over-border: solid 1px var(--ml-m500);
-  --ml-primarybutton-over-background: var(--ml-m500);
-  --ml-primarybutton-disabled-background: var(--ml-n850);
-  --ml-primarybutton-disabled-border: solid 1px var(--ml-n850);
-  --ml-primarybutton-disabled-color: var(--ml-n400);
-
-  /* secondary button */
-  --ml-button-color: var(--ml-m300);
-  --ml-button-background: transparent;
-  --ml-button-border: solid 1px var(--ml-m300);
-  --ml-button-over-background: var(--ml-m900);
-  --ml-button-disabled-background: transparent;
-  --ml-button-disabled-border: solid 1px var(--ml-n700);
-  --ml-button-disabled-color: var(--ml-n700);
-
-  /* tertiary button */
-  --ml-flatbutton-color: var(--ml-m300);
-  --ml-flatbutton-background: transparent;
-  --ml-flatbutton-border: solid 1px transparent;
-  --ml-flatbutton-over-background: var(--ml-m900);
-  --ml-flatbutton-disabled-background: transparent;
-  --ml-flatbutton-disabled-border: solid 1px transparent;
-  --ml-flatbutton-disabled-color: var(--ml-n700);
-
   /* checkbox */
   --ml-checkbox-border-color: var(--ml-m100);
   --ml-checkbox-checked-background: var(--ml-m400);
@@ -214,13 +156,6 @@
   --ml-text-secondary: var(--ml-n450);
   --ml-text-disabled: var(--ml-n700);
   --ml-text-highlight: var(--ml-m400);
-  /* TEXT BUTTONS */
-  --text-button-primary: var(--ml-n950);
-  --text-button-primary-hover: var(--ml-n950);
-  --text-button-primary-disabled: var(--ml-n400);
-  --text-button-secondary: var(--ml-m400);
-  --text-button-secondary-hover: var(--ml-m300);
-  --text-button-secondary-disabled: var(--ml-n700);
   /* TEXT INFORMATIVE */
   --ml-text-information: var(--ml-b400);
   --ml-text-success: var(--ml-g400);

ds-ml-css/ds-ml-theme.scss

+
+body.theme-purple.light {
+  --ml-text-button-primary: #FFFFFF;
+  --ml-text-button-primary-hover: #FFFFFF;
+  --ml-text-button-primary-disabled: #8993A4;
+  --ml-text-button-secondary: #744DDD;
+  --ml-text-button-secondary-hover: #422C7E;
+  --ml-text-button-secondary-disabled: #C1C7D0;
+
+  --ml-border-button-primary: #744DDD;
+  --ml-border-button-primary-hover: #422C7E;
+  --ml-border-button-secondary: #744DDD; //#1B1C22; // bug dans couleurs maquette
+  --ml-border-button-secondary-hover: #744DDD; //#353A47; // bug dans couleurs maquette
+  --ml-border-button-disabled: #C1C7D0;
+
+  --ml-background-button-primary: #744DDD;
+  --ml-background-button-primary-hover: #422C7E;
+  --ml-background-button-primary-disabled: #EBECF0;
+  --ml-background-button-secondary: #B79DFF;
+  --ml-background-button-secondary-hover: #F0ECFA;
+  --ml-background-button-tertiary-hover: #F0ECFA;
+
+}
+
+body.theme-purple.dark {
+  --ml-text-button-primary: #1B1C22;
+  --ml-text-button-primary-hover: #1B1C22;
+  --ml-text-button-primary-disabled: #8993A4;
+  --ml-text-button-secondary: #B79DFF;
+  --ml-text-button-secondary-hover: #DDD0FF;
+  --ml-text-button-secondary-disabled: #4F5561;
+
+  --ml-border-button-primary: #B79DFF;
+  --ml-border-button-primary-hover: #744DDD; //#DDD0FF; // bug dans couleurs maquette
+  --ml-border-button-secondary: #B79DFF; //#FFFFFF; // bug dans couleurs maquette
+  --ml-border-button-secondary-hover: #DDD0FF; //#DFE1E6; // bug dans couleurs maquette
+  --ml-border-button-disabled: #4F5561;
+
+  --ml-background-button-primary: #B79DFF;
+  --ml-background-button-primary-hover: #744DDD;
+  --ml-background-button-primary-disabled: #353A47;
+  --ml-background-button-secondary: #B79DFF;
+  --ml-background-button-secondary-hover: #312849;
+  --ml-background-button-tertiary-hover: #312849;
+
+}
+
+// Maquette à faire pour le theme red
+body.theme-red.light {
+  --ml-text-button-primary: #FFFFFF;
+  --ml-text-button-primary-hover: #FFFFFF;
+  --ml-text-button-primary-disabled: #8993A4;
+  --ml-text-button-secondary: #e60028;
+  --ml-text-button-secondary-hover: #b50028;
+  --ml-text-button-secondary-disabled: #C1C7D0;
+
+  --ml-border-button-primary: #e60028;
+  --ml-border-button-primary-hover: #b50028;
+  --ml-border-button-secondary: #e60028;
+  --ml-border-button-secondary-hover: #e60028;
+  --ml-border-button-disabled: #C1C7D0;
+
+  --ml-background-button-primary: #e60028;
+  --ml-background-button-primary-hover: #b50028;
+  --ml-background-button-primary-disabled: #ffedf0;
+  --ml-background-button-secondary: #fe8896;
+  --ml-background-button-secondary-hover: #ffedf0;
+  --ml-background-button-tertiary-hover: #ffedf0;
+}
+
+body.theme-red.dark {
+  --ml-text-button-primary: #1B1C22;
+  --ml-text-button-primary-hover: #1B1C22;
+  --ml-text-button-primary-disabled: #8993A4;
+  --ml-text-button-secondary: #fe8896;
+  --ml-text-button-secondary-hover: #fe8896;
+  --ml-text-button-secondary-disabled: #C1C7D0;
+
+  --ml-border-button-primary: #fe8896;
+  --ml-border-button-primary-hover: #e60028;
+  --ml-border-button-secondary: #fe8896;
+  --ml-border-button-secondary-hover: #fe8896;
+  --ml-border-button-disabled: #C1C7D0;
+
+  --ml-background-button-primary: #fe8896;
+  --ml-background-button-primary-hover: #e60028;
+  --ml-background-button-primary-disabled: #353A47;
+  --ml-background-button-secondary: #fe8896;
+  --ml-background-button-secondary-hover: #600028;
+  --ml-background-button-tertiary-hover: #600028;
+}

ds-ml-css/ds-ml-var.scss

 :root {
   /* PX VAR */
+  --ml-xsmall-px: 2px;
   --ml-small-px: 4px;
   --ml-medium-px: 8px;
   --ml-large-px: 12px;
@@ -19,7 +20,8 @@
 
   /* BORDER */
   --ml-border-light: 1px solid var(--border-light-color);
-  --ml-border-default: 1px solid var(--border-default-color);
+  //--ml-border-default: 1px solid var(--border-default-color);
+  --ml-border-default: 1px solid;
   --ml-border-active: 1px solid var(--border-active-color);
 
   /* BORDER RADIUS */

ds-ml-css/ds-ml.scss

-@use 'ds-color-palet.scss';
-@use 'ds-ml-var.scss';
-@use 'ds-ml-color-var.scss';
+@use "ds-color-palet.scss";
+@use "ds-ml-var.scss";
+@use "ds-ml-color-var.scss";
+@use "ds-ml-theme.scss";
 
 // components
 @use 'components/accordion.scss';
@@ -9,10 +10,17 @@
 @use 'components/header.scss';
 @use 'components/input.scss';
 @use 'components/radio-button-checkbox.scss';
+@use 'components/progress-bar.scss';
 @use 'components/footer.scss';
 
 :root {
   /* define fonts */
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   font-size: 16px;
 }
+
+/* additionnal description for radio-button, progress-bar*/
+.additionnal-description {
+  color: var(--ml-text-secondary);
+  margin: 0;
+}