This is an automated email from the git hooks/post-receive script. New commit to branch feature/253-tuiles in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 2558ad32686ba896a78727534ee61b37832784fd Author: Cécilia Bossard <bossard@codelutin.com> Date: Wed Feb 26 15:42:29 2020 +0100 ref #253 Export des codes couleur dans des variables CSS --- pollen-ui-riot-js/src/main/web/css/custom.css | 19 ++++++++++++ .../main/web/tag/components/IconButton.tag.html | 6 ++-- .../src/main/web/tag/components/MenuItem.tag.html | 6 ++-- .../main/web/tag/components/PollenButton.tag.html | 20 ++++++------ .../main/web/tag/components/PollenInput.tag.html | 4 +-- .../src/main/web/tag/components/Popover.tag.html | 8 ++--- .../main/web/tag/components/SearchReboot.tag.html | 8 ++--- .../src/main/web/tag/components/Tooltip.tag.html | 12 ++++---- .../src/main/web/tag/poll/MyPollsHeader.tag.html | 4 +-- .../src/main/web/tag/poll/NoPoll.tag.html | 2 +- .../src/main/web/tag/poll/PollCardReboot.tag.html | 36 +++++++++++----------- .../src/main/web/tag/popup/ModalReboot.tag.html | 6 ++-- pollen-ui-riot-js/stories/Card.stories.js | 1 + 13 files changed, 76 insertions(+), 56 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/css/custom.css b/pollen-ui-riot-js/src/main/web/css/custom.css index 4b5153c2..632a5e98 100644 --- a/pollen-ui-riot-js/src/main/web/css/custom.css +++ b/pollen-ui-riot-js/src/main/web/css/custom.css @@ -125,4 +125,23 @@ --support-background: hsl(var(--supportH), 93%, 52%); --support-background-hover: hsl(var(--supportH), 93%, 73%); --support-color: #535353; + + + --Elm: #29817E; + --Elm-Dark: #1D5A58; + --Mountain-Meadow: #14A39F; + --Mountain-Meadow-Dark: #0E726F; + --Black: #000000; + --Black-Pearl: #1E272E; + --Fiord: #485460; + --Light-Slate-Grey: #808E9B; + --Link-Water: #D2DAE2; + --White-Smoke: #F7F7F7; + --White: #FFFFFF; + --Purple: #6F1E51; + --Pizazz: #E76B35; + --Jade: #05C46B; + --Alizarin: #E2241B; + --Persian-Red: #C0392B; + } diff --git a/pollen-ui-riot-js/src/main/web/tag/components/IconButton.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/IconButton.tag.html index 9101598a..47106cba 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/IconButton.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/IconButton.tag.html @@ -49,7 +49,7 @@ } .icon { - color: #808E9B; + color: var(--Light-Slate-Grey); } a:hover { @@ -57,7 +57,7 @@ } .active i { - color: #14A39F; + color: var(--Mountain-Meadow); } .selector { @@ -65,7 +65,7 @@ height: 6px; top: 215px; - background: #14A39F; + background: var(--Mountain-Meadow); border-radius: 4px; margin-left: 4.5px; diff --git a/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html index 926068b8..89de70b4 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/MenuItem.tag.html @@ -63,7 +63,7 @@ } .active { - color: #29817E; + color: var(--Elm); font-weight: bold; } @@ -72,7 +72,7 @@ left: 50px; top: 213px; - background: #29817E; + background: var(--Elm); border-radius: 2px; visibility: hidden; @@ -91,7 +91,7 @@ a:hover { font-family: Open Sans; font-style: normal; - color: #29817E; + color: var(--Elm); } diff --git a/pollen-ui-riot-js/src/main/web/tag/components/PollenButton.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/PollenButton.tag.html index dce64335..cbf8a34c 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/PollenButton.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/PollenButton.tag.html @@ -60,32 +60,32 @@ } .btn.primary { - color: #FFFFFF; - background: #14A39F; + color: var(--White); + background: var(--Mountain-Meadow); font-weight: bold; } .btn.secondary { - color: #29817E; - border: 1px solid #29817E; + color: var(--Elm); + border: 1px solid var(--Elm); } .btn.cancel { - color: #C0392B; - border: 1px solid #C0392B; + color: var(--Persian-Red); + border: 1px solid var(--Persian-Red); } .btn.primary:hover, .btn.primary:focus { - color: #FFFFFF; - background: #0E726F; + color: var(--White); + background: var(--Mountain-Meadow-Dark); font-weight: bold; } .btn.secondary:hover, .btn.secondary:focus { - color: #1D5A58; - border: 1px solid #1D5A58; + color: var(--Elm-Dark); + border: 1px solid var(--Elm-Dark); } .btn.cancel:hover, diff --git a/pollen-ui-riot-js/src/main/web/tag/components/PollenInput.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/PollenInput.tag.html index 91826f74..c63adb71 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/PollenInput.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/PollenInput.tag.html @@ -56,7 +56,7 @@ line-height: 16px; border: none; /* Pale skye */ - color: #636E72; + color: ; padding-left: 10px; width: 100%; @@ -71,7 +71,7 @@ line-height: 19px; padding-bottom: 10px; /* Black Pearl */ - color: #1E272E; + color: var(--Black-Pearl); } diff --git a/pollen-ui-riot-js/src/main/web/tag/components/Popover.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/Popover.tag.html index 1e072a33..aafc6111 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/Popover.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/Popover.tag.html @@ -29,8 +29,8 @@ /* Tooltip text */ .popover-content { visibility: hidden; - background-color: #ffffff; - color: #1E272E; + background-color: var(--White); + color: var(--Black-Pearl); padding: 10px 0px; border-radius: 8px; min-width:170px; @@ -68,7 +68,7 @@ <!-- .popover-container .popover-content::before { content: " "; position: absolute; - background-color: #ffffff; + background-color: var(--White); width: 20px; height: 20px; top:-10px; @@ -82,7 +82,7 @@ .popover-container .popover-content::after { content: " "; position: absolute; - background-color: #ffffff; + background-color: var(--White); width: 20px; height: 20px; top:-10px; diff --git a/pollen-ui-riot-js/src/main/web/tag/components/SearchReboot.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/SearchReboot.tag.html index d87fd495..a92ff39a 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/SearchReboot.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/SearchReboot.tag.html @@ -64,8 +64,8 @@ width: 350px; height: 40px; - background: #FFFFFF; - border: 1px solid #D2DAE2; + background: var(--White); + border: 1px solid var(--Link-Water); box-sizing: border-box; border-radius: 31px; @@ -78,7 +78,7 @@ } .icon-search { - color: #14A39F; + color: var(--Mountain-Meadow); padding-left: 20px; } @@ -92,7 +92,7 @@ /* identical to box height */ - color: #1E272E; + color: var(--Black-Pearl); width: 280px; padding-left: 10px; diff --git a/pollen-ui-riot-js/src/main/web/tag/components/Tooltip.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/Tooltip.tag.html index c9fddd7d..ddafe6e4 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/Tooltip.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/Tooltip.tag.html @@ -18,8 +18,8 @@ /* Tooltip text */ .tooltip-2 .tooltiptext { visibility: hidden; - background-color: #1E272E; - color: #fff; + background-color: var(--Black-Pearl); + color: var(--White); text-align: center; padding: 12px 20px; border-radius: 4px; @@ -51,7 +51,7 @@ margin-top: -5px; border-width: 5px; border-style: solid; - border-color: transparent #1E272E transparent transparent; + border-color: transparent var(--Black-Pearl) transparent transparent; } /* Left tooltip and arrow */ @@ -69,7 +69,7 @@ margin-top: -5px; border-width: 5px; border-style: solid; - border-color: transparent transparent transparent #1E272E; + border-color: transparent transparent transparent var(--Black-Pearl); } /* Top tooltip and arrow*/ @@ -88,7 +88,7 @@ margin-left: -5px; border-width: 5px; border-style: solid; - border-color: #1E272E transparent transparent transparent; + border-color: var(--Black-Pearl) transparent transparent transparent; } /* Bottom tooltip and arrow */ @@ -107,7 +107,7 @@ margin-left: -5px; border-width: 5px; border-style: solid; - border-color: transparent transparent #1E272E transparent; + border-color: transparent transparent var(--Black-Pearl) transparent; } /* Show tooltip */ diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html index ea4c7af5..ea55db90 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/MyPollsHeader.tag.html @@ -116,7 +116,7 @@ import "../popup/ModalReboot.tag.html"; font-size: 40px; line-height: 54px; - color: #14A39F; + color: var(--Mountain-Meadow); display: flex; width: 100%; @@ -173,7 +173,7 @@ import "../popup/ModalReboot.tag.html"; } .active span { - color: #29817E; + color: var(--Elm); font-weight: bold; } diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/NoPoll.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/NoPoll.tag.html index 77d6552a..f9615688 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/NoPoll.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/NoPoll.tag.html @@ -39,7 +39,7 @@ align-items: center; /* Light Slate Grey */ - color: #808E9B; + color: var(--Light-Slate-Grey); font-size: 28px; line-height: 38px; } diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html index bba2e0cc..457c5a41 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollCardReboot.tag.html @@ -130,8 +130,8 @@ import "../components/Avatar.tag.html"; .pollcard { width: 370px; height: 267px; - background: #F7F7F7; - border: 1px solid #D2DAE2; + background: var(--White-Smoke); + border: 1px solid var(--Link-Water); box-sizing: border-box; border-radius: 4px; display: flex; @@ -140,7 +140,7 @@ import "../components/Avatar.tag.html"; } .pollcard:hover { - background: #FFFFFF; + background: var(--White); } .pollcard .body { @@ -161,22 +161,22 @@ import "../components/Avatar.tag.html"; flex-direction: line; padding: 20px 30px 20px 20px; border-width: 0px 0px 1px 0px; - border-color: #D2DAE2; + border-color: var(--Link-Water); border-style: solid; flex-shrink: 0; - color: #14A39F; + color: var(--Mountain-Meadow); } .closed .card-header div { - color: #6F1E51; + color: var(--Purple); } .voting .card-header div { - color: #E76B35; + color: var(--Pizazz); } .card-header div .popover-content { - color: #1E272E; + color: var(--Black-Pearl); } .poll-title { @@ -185,7 +185,7 @@ import "../components/Avatar.tag.html"; font-weight: 600; font-size: 16px; line-height: 22px; - color: #1E272E; + color: var(--Black-Pearl); } .poll-description { @@ -197,7 +197,7 @@ import "../components/Avatar.tag.html"; font-weight: 300; font-size: 12px; line-height: 16px; - color: #1E272E; + color: var(--Black-Pearl); overflow: hidden; text-overflow: ellipsis; } @@ -214,14 +214,14 @@ import "../components/Avatar.tag.html"; font-weight: 300; font-size: 12px; line-height: 16px; - color: #1E272E; + color: var(--Black-Pearl); } .icon { display: flex; align-items:center; justify-content:center; - background: #FFFFFF; + background: var(--White); width : 30px; height : 30px; border-radius:15px; @@ -229,7 +229,7 @@ import "../components/Avatar.tag.html"; .voters { display: flex; - background: #FFFFFF; + background: var(--White); border-radius:15px; padding:4px 10px 4px 10px; @@ -242,7 +242,7 @@ import "../components/Avatar.tag.html"; .avatar { display: flex; - background: #FFFFFF; + background: var(--White); width : 30px; height : 30px; border-radius:15px; @@ -253,7 +253,7 @@ import "../components/Avatar.tag.html"; align-items:center; justify-content:center; - background: #FFFFFF; + background: var(--White); width : 30px; height : 30px; @@ -275,7 +275,7 @@ import "../components/Avatar.tag.html"; padding: 10px 30px 30px 30px; - color: #1E272E; + color: var(--Black-Pearl); flex-shrink: 0; display:flex; @@ -306,11 +306,11 @@ import "../components/Avatar.tag.html"; text-decoration: none; /* Black Pearl */ - color: #1E272E; + color: var(--Black-Pearl); } li:hover { - background: #F7F7F7; + background: var(--White-Smoke); } </style> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/ModalReboot.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/ModalReboot.tag.html index 0b31a584..ac0e1eb8 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/ModalReboot.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/ModalReboot.tag.html @@ -109,9 +109,9 @@ import "../components/HumanInput.tag.html"; display: flex; align-items: center; - background: #FFFFFF; + background: var(--White); /* Link Water */ - border: 1px solid #D2DAE2; + border: 1px solid var(--Link-Water); box-sizing: border-box; height: 70px; @@ -152,7 +152,7 @@ import "../components/HumanInput.tag.html"; text-align: center; /* Fiord */ - color: #485460; + color: var(--Fiord); padding-bottom: 40px; } diff --git a/pollen-ui-riot-js/stories/Card.stories.js b/pollen-ui-riot-js/stories/Card.stories.js index 33703704..9bdb5dcf 100644 --- a/pollen-ui-riot-js/stories/Card.stories.js +++ b/pollen-ui-riot-js/stories/Card.stories.js @@ -4,6 +4,7 @@ import i18nHelper from "../src/main/web/js/I18nHelper"; import uiHelper from "../src/main/web/js/UIHelper"; import riot from "riot"; +import "../src/main/web/css/custom.css"; import "../src/main/web/tag/poll/PollCardReboot.tag.html"; export default {title: "PollCardReboot"}; -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.