composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-23 10:38:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°2847 - Refactor Button block for a better use of semantic colors, also change "primary" action color to something less flashy

Browse Source
This commit is contained in:
Molkobain
2020-11-02 17:39:10 +01:00
parent 680f522065
commit b454958742
11 changed files with 155 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
css/backoffice/components/_button.scss
View File

@@ -10,6 +10,7 @@ $ibo-button--label--margin-left: 4px !default;
$ibo-button-colors: (
'regular': (
/* Semantics */
'neutral': (
'': (
$ibo-color-secondary-100,
@@ -32,21 +33,22 @@ $ibo-button-colors: (
$ibo-button--box-shadow-top $ibo-color-grey-300,
),
),
/* Primary action does not have the colors from the primary brand color, at least not for now */
'primary': (
'': (
$ibo-color-primary-400,
$ibo-color-grey-900,
$ibo-button--box-shadow-bottom $ibo-color-primary-600,
$ibo-color-cyan-700,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
),
':hover': (
$ibo-color-primary-600,
$ibo-color-grey-900,
$ibo-button--box-shadow-bottom $ibo-color-primary-800,
$ibo-color-cyan-800,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
),
':active': (
$ibo-color-primary-600,
$ibo-color-grey-900,
$ibo-button--box-shadow-top $ibo-color-primary-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-primary-600,
$ibo-color-cyan-800,
$ibo-color-white-100,
$ibo-button--box-shadow-top $ibo-color-cyan-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-800,
),
':disabled': (
$ibo-color-grey-300,
@@ -76,6 +78,51 @@ $ibo-button-colors: (
$ibo-button--box-shadow-top $ibo-color-grey-300,
),
),
'danger': (
'': (
$ibo-color-danger-600,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-danger-800,
),
':hover': (
$ibo-color-danger-700,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-danger-800,
),
':active': (
$ibo-color-danger-700,
$ibo-color-white-100,
$ibo-button--box-shadow-top $ibo-color-danger-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-danger-700,
),
':disabled': (
$ibo-color-grey-300,
$ibo-color-grey-700,
$ibo-button--box-shadow-top $ibo-color-grey-300,
),
),
'success': (
'': (
$ibo-color-success-700,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-success-900,
),
':hover': (
$ibo-color-success-800,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-success-900,
),
':active': (
$ibo-color-success-800,
$ibo-color-white-100,
$ibo-button--box-shadow-top $ibo-color-success-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-success-800,
),
':disabled': (
$ibo-color-grey-300,
$ibo-color-grey-700,
$ibo-button--box-shadow-top $ibo-color-grey-300,
),
),
/* Colors */
'red': (
'': (
$ibo-color-red-600,
@@ -144,6 +191,7 @@ $ibo-button-colors: (
)
),
'alternative': (
/* Semantics */
'neutral': (
'': (
transparent,
@@ -166,21 +214,22 @@ $ibo-button-colors: (
$ibo-button--box-shadow-top transparent,
),
),
/* Primary action does not have the colors from the primary brand color, at least not for now */
'primary': (
'': (
transparent,
$ibo-color-primary-600,
$ibo-color-cyan-800,
$ibo-button--box-shadow-bottom transparent,
),
':hover': (
$ibo-color-primary-300,
$ibo-color-white-100,
$ibo-color-grey-900,
$ibo-button--box-shadow-bottom $ibo-color-primary-300,
$ibo-button--box-shadow-bottom $ibo-color-white-100,
),
':active': (
$ibo-color-primary-300,
$ibo-color-white-100,
$ibo-color-grey-900,
$ibo-button--box-shadow-top $ibo-color-primary-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-primary-300,
$ibo-button--box-shadow-top $ibo-color-white-100 #{','} $ibo-button--box-shadow-bottom $ibo-color-white-100,
),
':disabled': (
transparent,
@@ -210,6 +259,51 @@ $ibo-button-colors: (
$ibo-button--box-shadow-top transparent,
),
),
'danger': (
'': (
transparent,
$ibo-color-danger-700,
$ibo-button--box-shadow-bottom transparent,
),
':hover': (
$ibo-color-danger-200,
$ibo-color-danger-900,
$ibo-button--box-shadow-bottom $ibo-color-danger-200,
),
':active': (
$ibo-color-danger-200,
$ibo-color-danger-900,
$ibo-button--box-shadow-top $ibo-color-danger-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-danger-200,
),
':disabled': (
transparent,
$ibo-color-grey-600,
$ibo-button--box-shadow-top transparent,
),
),
'success': (
'': (
transparent,
$ibo-color-success-900,
$ibo-button--box-shadow-bottom transparent,
),
':hover': (
$ibo-color-success-100,
$ibo-color-success-900,
$ibo-button--box-shadow-bottom $ibo-color-success-100,
),
':active': (
$ibo-color-success-100,
$ibo-color-success-900,
$ibo-button--box-shadow-top $ibo-color-success-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-success-100,
),
':disabled': (
transparent,
$ibo-color-grey-600,
$ibo-button--box-shadow-top transparent,
),
),
/* Colors */
'red': (
'': (
transparent,

3
css/backoffice/utils/variables/colors/_base-palette.scss
View File

@@ -16,7 +16,7 @@
* You should have received a copy of the GNU Affero General Public License
*/
/* Color palettes */
/* base color palettes */
$ibo-color-white-100: hsla(0, 0%, 100%, 1) !default;
$ibo-color-white-200: hsla(0, 0%, 94.9%, 1) !default;
$ibo-color-transparent: hsla(0, 0%, 100%, 0) !default;
@@ -105,6 +105,7 @@ $ibo-color-pink-900: hsla(318, 51%, 29%, 1) !default;
$ibo-colors: ('grey', 'blue-grey', 'blue', 'cyan', 'green', 'orange', 'red', 'pink', 'primary', 'secondary', 'information', 'success', 'warning', 'danger');
/* CSS variables */
:root{
--ibo-color-white-100: #{$ibo-color-white-100};
--ibo-color-white-200: #{$ibo-color-white-200};

44
css/backoffice/utils/variables/colors/_lifecycle-palette.scss
View File

@@ -17,32 +17,13 @@ $ibo-lifecycle-failure-state-primary-color: $ibo-color-pink-700 !default;
$ibo-lifecycle-failure-state-secondary-color: $ibo-color-white-100 !default;
$ibo-lifecycle-frozen-state-primary-color: $ibo-color-grey-200 !default;
$ibo-lifecycle-frozen-state-secondary-color: $ibo-color-grey-700 !default;
/* - For basic lifecycle */
$ibo-lifecycle-active-state-primary-color: $ibo-color-green-700 !default;
$ibo-lifecycle-active-state-secondary-color: $ibo-color-white-100 !default;
$ibo-lifecycle-inactive-state-primary-color: $ibo-color-orange-400 !default;
$ibo-lifecycle-inactive-state-secondary-color: $ibo-color-white-100 !default;
:root{
--ibo-lifecycle-new-state-primary-color: #{$ibo-lifecycle-new-state-primary-color};
--ibo-lifecycle-new-state-secondary-color: #{$ibo-lifecycle-new-state-secondary-color};
--ibo-lifecycle-neutral-state-primary-color: #{$ibo-lifecycle-neutral-state-primary-color};
--ibo-lifecycle-neutral-state-secondary-color: #{$ibo-lifecycle-neutral-state-secondary-color};
--ibo-lifecycle-waiting-state-primary-color: #{$ibo-lifecycle-waiting-state-primary-color};
--ibo-lifecycle-waiting-state-secondary-color: #{$ibo-lifecycle-waiting-state-secondary-color};
--ibo-lifecycle-success-state-primary-color: #{$ibo-lifecycle-success-state-primary-color};
--ibo-lifecycle-success-state-secondary-color: #{$ibo-lifecycle-success-state-secondary-color};
--ibo-lifecycle-failure-state-primary-color: #{$ibo-lifecycle-failure-state-primary-color};
--ibo-lifecycle-failure-state-secondary-color: #{$ibo-lifecycle-failure-state-secondary-color};
--ibo-lifecycle-frozen-state-primary-color: #{$ibo-lifecycle-frozen-state-primary-color};
--ibo-lifecycle-frozen-state-secondary-color: #{$ibo-lifecycle-frozen-state-secondary-color};
--ibo-lifecycle-active-state-primary-color: #{$ibo-lifecycle-active-state-primary-color};
--ibo-lifecycle-active-state-secondary-color: #{$ibo-lifecycle-active-state-secondary-color};
--ibo-lifecycle-inactive-state-primary-color: #{$ibo-lifecycle-inactive-state-primary-color};
--ibo-lifecycle-inactive-state-secondary-color: #{$ibo-lifecycle-inactive-state-secondary-color};
}
$ibo-lifecycle-states-colors: (
'new': (
'primary-color': $ibo-lifecycle-new-state-primary-color,
@@ -77,4 +58,25 @@ $ibo-lifecycle-states-colors: (
'primary-color': $ibo-lifecycle-inactive-state-primary-color,
'secondary-color': $ibo-lifecycle-inactive-state-secondary-color,
),
);
);
/* CSS varibales */
:root{
--ibo-lifecycle-new-state-primary-color: #{$ibo-lifecycle-new-state-primary-color};
--ibo-lifecycle-new-state-secondary-color: #{$ibo-lifecycle-new-state-secondary-color};
--ibo-lifecycle-neutral-state-primary-color: #{$ibo-lifecycle-neutral-state-primary-color};
--ibo-lifecycle-neutral-state-secondary-color: #{$ibo-lifecycle-neutral-state-secondary-color};
--ibo-lifecycle-waiting-state-primary-color: #{$ibo-lifecycle-waiting-state-primary-color};
--ibo-lifecycle-waiting-state-secondary-color: #{$ibo-lifecycle-waiting-state-secondary-color};
--ibo-lifecycle-success-state-primary-color: #{$ibo-lifecycle-success-state-primary-color};
--ibo-lifecycle-success-state-secondary-color: #{$ibo-lifecycle-success-state-secondary-color};
--ibo-lifecycle-failure-state-primary-color: #{$ibo-lifecycle-failure-state-primary-color};
--ibo-lifecycle-failure-state-secondary-color: #{$ibo-lifecycle-failure-state-secondary-color};
--ibo-lifecycle-frozen-state-primary-color: #{$ibo-lifecycle-frozen-state-primary-color};
--ibo-lifecycle-frozen-state-secondary-color: #{$ibo-lifecycle-frozen-state-secondary-color};
--ibo-lifecycle-active-state-primary-color: #{$ibo-lifecycle-active-state-primary-color};
--ibo-lifecycle-active-state-secondary-color: #{$ibo-lifecycle-active-state-secondary-color};
--ibo-lifecycle-inactive-state-primary-color: #{$ibo-lifecycle-inactive-state-primary-color};
--ibo-lifecycle-inactive-state-secondary-color: #{$ibo-lifecycle-inactive-state-secondary-color};
}

7
css/backoffice/utils/variables/colors/_semantic-palette.scss
View File

@@ -4,6 +4,7 @@
*/
/* Semantic palettes */
/* - Primary color of the brand */
$ibo-color-primary-100: $ibo-color-orange-100 !default;
$ibo-color-primary-200: $ibo-color-orange-200 !default;
$ibo-color-primary-300: $ibo-color-orange-300 !default;
@@ -14,6 +15,7 @@ $ibo-color-primary-700: $ibo-color-orange-700 !default;
$ibo-color-primary-800: $ibo-color-orange-800 !default;
$ibo-color-primary-900: $ibo-color-orange-900 !default;
/* - Secondary color of the brand */
$ibo-color-secondary-100: $ibo-color-grey-100 !default;
$ibo-color-secondary-200: $ibo-color-grey-200 !default;
$ibo-color-secondary-300: $ibo-color-grey-300 !default;
@@ -24,6 +26,7 @@ $ibo-color-secondary-700: $ibo-color-grey-700 !default;
$ibo-color-secondary-800: $ibo-color-grey-800 !default;
$ibo-color-secondary-900: $ibo-color-grey-900 !default;
/* - Information: messages / actions that should neither seem as success, warning or failure */
$ibo-color-information-100: $ibo-color-blue-100 !default;
$ibo-color-information-200: $ibo-color-blue-200 !default;
$ibo-color-information-300: $ibo-color-blue-300 !default;
@@ -34,6 +37,7 @@ $ibo-color-information-700: $ibo-color-blue-700 !default;
$ibo-color-information-800: $ibo-color-blue-800 !default;
$ibo-color-information-900: $ibo-color-blue-900 !default;
/* Success: messages of success, safe actions, ... */
$ibo-color-success-100: $ibo-color-green-100 !default;
$ibo-color-success-200: $ibo-color-green-200 !default;
$ibo-color-success-300: $ibo-color-green-300 !default;
@@ -44,6 +48,7 @@ $ibo-color-success-700: $ibo-color-green-700 !default;
$ibo-color-success-800: $ibo-color-green-800 !default;
$ibo-color-success-900: $ibo-color-green-900 !default;
/* Warning: messages of warning, actions that would be done carefully, ... */
$ibo-color-warning-100: $ibo-color-orange-100 !default;
$ibo-color-warning-200: $ibo-color-orange-200 !default;
$ibo-color-warning-300: $ibo-color-orange-300 !default;
@@ -54,6 +59,7 @@ $ibo-color-warning-700: $ibo-color-orange-700 !default;
$ibo-color-warning-800: $ibo-color-orange-800 !default;
$ibo-color-warning-900: $ibo-color-orange-900 !default;
/* Danger: messages of danger / failure, actions that cannot be undone, ... */
$ibo-color-danger-100: $ibo-color-red-100 !default;
$ibo-color-danger-200: $ibo-color-red-200 !default;
$ibo-color-danger-300: $ibo-color-red-300 !default;
@@ -73,6 +79,7 @@ $ibo-caselog-highlight-color-4: $ibo-color-orange-400 !default;
$ibo-caselog-highlight-color-5: $ibo-color-cyan-200 !default;
$ibo-caselog-highlight-colors: ($ibo-caselog-highlight-color-1, $ibo-caselog-highlight-color-2, $ibo-caselog-highlight-color-3, $ibo-caselog-highlight-color-4, $ibo-caselog-highlight-color-5) !default;
/* CSS variables */
:root {
--ibo-color-primary-100: #{$ibo-color-primary-100};
--ibo-color-primary-200: #{$ibo-color-primary-200};