Skip to content
Snippets Groups Projects
Commit 2b9985fb authored by Etienne LOUPIAS's avatar Etienne LOUPIAS
Browse files

Merge branch 'wip-theme' into 'dev'

Add theme

See merge request !4
parents 35ee0cc2 9b85f064
No related branches found
No related tags found
1 merge request!4Add theme
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
.accordion-btn { .accordion-btn {
border: none; border: none;
border-top: solid var(--ml-neutral) 2px; border-top: solid var(--ml-neutral) 2px;
border-bottom: transparent solid 2px;
background-color: var(--ml-background); background-color: var(--ml-background);
cursor: pointer; cursor: pointer;
padding: 18px; padding: 18px;
...@@ -22,12 +23,14 @@ ...@@ -22,12 +23,14 @@
background-color: var(--ml-m200); background-color: var(--ml-m200);
border: none; border: none;
border-top: transparent solid 2px; border-top: transparent solid 2px;
border-bottom: transparent solid 2px;
} }
.active { .accordion-btn.expanded {
background-color: var(--ml-m400); background-color: var(--ml-m400);
border: none; border: none;
border-top: transparent solid 2px; border-top: transparent solid 2px;
border-bottom: transparent solid 2px;
} }
.accordion-panel { .accordion-panel {
......
...@@ -9,53 +9,82 @@ ...@@ -9,53 +9,82 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: transparent; .icon {
color: var(--ml-button-color); font-size: var(--ml-medium-font-size);
fill: var(--ml-button-color); }
border: var(--ml-border-default); border: var(--ml-border-default);
border-color: var(--ml-button-color); border-radius: var(--ml-xsmall-px);
border-radius: var(--ml-small-px);
font-size: var(--ml-medium-font-size); // primary button
padding: var(--ml-medium-px) var(--ml-xlarge-px); color: var(--ml-text-button-primary);
border-color: var(--ml-border-button-primary);
background-color: var(--ml-background-button-primary);
.icon { &.secondary-button {
font-size: var(--ml-medium-font-size); 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 { &.small-button {
font-size: var(--ml-small-font-size); font-size: var(--ml-small-font-size);
padding: var(--ml-small-px) var(--ml-large-px); padding: var(--ml-small-px) var(--ml-large-px);
width: 147px;
height: 32px;
} }
&.large-button { &.large-button {
font-size: var(--ml-large-font-size); font-size: var(--ml-large-font-size);
padding: var(--ml-large-px) var(--ml-xxlarge-px); padding: var(--ml-large-px) var(--ml-xxlarge-px);
} width: 204px;
height: 48px;
&.tertiary-button {
border: none;
border-color: transparent;
}
&.primary-button {
background-color: var(--ml-button-color);
color: var(--ml-n000);
} }
} }
.button:hover, .button:hover,
.button:active { .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 { &.secondary-button {
background-color: var(--ml-m600); 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 { .button:disabled {
background: var(--ml-button-disabled-background) !important; // primary button
color: var(--ml-button-disabled-color); color: var(--ml-text-button-primary-disabled);
border-color: var(--ml-button-disabled-color); 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;
}
} }
/* ********************************************************************************************* */
/* * 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);
}
}
}
...@@ -9,12 +9,6 @@ ...@@ -9,12 +9,6 @@
.rich-radio-button-group { .rich-radio-button-group {
border: none; border: none;
/* additionnal description for radio-button*/
.additionnal-description {
color: var(--ml-text-secondary);
margin: 0;
}
/* status of radio-button or checkbox field*/ /* status of radio-button or checkbox field*/
.status { .status {
display: flex; display: flex;
......
*[light] { body.light {
color-scheme: light;
--ml-dark-hide: initial; --ml-dark-hide: initial;
/* define main colors */ /* define main colors */
...@@ -25,25 +27,8 @@ ...@@ -25,25 +27,8 @@
--ml-focus-color: var(--ml-b500); --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); --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 */ /* checkbox */
--ml-checkbox-border-color: var(--ml-m900); --ml-checkbox-border-color: var(--ml-m900);
--ml-checkbox-checked-background: var(--ml-m500); --ml-checkbox-checked-background: var(--ml-m500);
...@@ -75,13 +60,6 @@ ...@@ -75,13 +60,6 @@
--ml-text-secondary: var(--ml-n500); --ml-text-secondary: var(--ml-n500);
--ml-text-disabled: var(--ml-n200); --ml-text-disabled: var(--ml-n200);
--ml-text-highlight: var(--ml-m500); --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 */ /* TEXT INFORMATIVE */
--ml-text-information: var(--ml-b600); --ml-text-information: var(--ml-b600);
--ml-text-success: var(--ml-g600); --ml-text-success: var(--ml-g600);
...@@ -116,7 +94,9 @@ ...@@ -116,7 +94,9 @@
--ml-footer-links-color: var(--ml-n000); --ml-footer-links-color: var(--ml-n000);
} }
*[dark] { body.dark {
color-scheme: dark;
--ml-dark-hide: none; --ml-dark-hide: none;
/* define main colors */ /* define main colors */
...@@ -143,46 +123,8 @@ ...@@ -143,46 +123,8 @@
--ml-focus-color: var(--ml-b500); --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); --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 */ /* checkbox */
--ml-checkbox-border-color: var(--ml-m100); --ml-checkbox-border-color: var(--ml-m100);
--ml-checkbox-checked-background: var(--ml-m400); --ml-checkbox-checked-background: var(--ml-m400);
...@@ -214,13 +156,6 @@ ...@@ -214,13 +156,6 @@
--ml-text-secondary: var(--ml-n450); --ml-text-secondary: var(--ml-n450);
--ml-text-disabled: var(--ml-n700); --ml-text-disabled: var(--ml-n700);
--ml-text-highlight: var(--ml-m400); --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 */ /* TEXT INFORMATIVE */
--ml-text-information: var(--ml-b400); --ml-text-information: var(--ml-b400);
--ml-text-success: var(--ml-g400); --ml-text-success: var(--ml-g400);
......
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;
}
:root { :root {
/* PX VAR */ /* PX VAR */
--ml-xsmall-px: 2px;
--ml-small-px: 4px; --ml-small-px: 4px;
--ml-medium-px: 8px; --ml-medium-px: 8px;
--ml-large-px: 12px; --ml-large-px: 12px;
...@@ -19,7 +20,8 @@ ...@@ -19,7 +20,8 @@
/* BORDER */ /* BORDER */
--ml-border-light: 1px solid var(--border-light-color); --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); --ml-border-active: 1px solid var(--border-active-color);
/* BORDER RADIUS */ /* BORDER RADIUS */
......
@use 'ds-color-palet.scss'; @use "ds-color-palet.scss";
@use 'ds-ml-var.scss'; @use "ds-ml-var.scss";
@use 'ds-ml-color-var.scss'; @use "ds-ml-color-var.scss";
@use "ds-ml-theme.scss";
// components // components
@use 'components/accordion.scss'; @use 'components/accordion.scss';
...@@ -9,10 +10,17 @@ ...@@ -9,10 +10,17 @@
@use 'components/header.scss'; @use 'components/header.scss';
@use 'components/input.scss'; @use 'components/input.scss';
@use 'components/radio-button-checkbox.scss'; @use 'components/radio-button-checkbox.scss';
@use 'components/progress-bar.scss';
@use 'components/footer.scss'; @use 'components/footer.scss';
:root { :root {
/* define fonts */ /* define fonts */
font-family: 'Roboto', sans-serif; font-family: "Roboto", sans-serif;
font-size: 16px; font-size: 16px;
} }
/* additionnal description for radio-button, progress-bar*/
.additionnal-description {
color: var(--ml-text-secondary);
margin: 0;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment