From 50efcb2d2c3e682ca2319ed81267eec121a51fc4 Mon Sep 17 00:00:00 2001 From: Yonas Habteab Date: Mon, 11 Jul 2022 14:58:25 +0200 Subject: [PATCH] WIP --- .../ProvidedHook/LessVarsLoader.php | 345 ++++++++++++++---- 1 file changed, 276 insertions(+), 69 deletions(-) diff --git a/library/Icinga/Application/ProvidedHook/LessVarsLoader.php b/library/Icinga/Application/ProvidedHook/LessVarsLoader.php index de5f3bf1e..6645bac86 100644 --- a/library/Icinga/Application/ProvidedHook/LessVarsLoader.php +++ b/library/Icinga/Application/ProvidedHook/LessVarsLoader.php @@ -11,84 +11,291 @@ class LessVarsLoader extends LessVarsLoaderHook public function getVariables(): array { return [ - '@black' => '#535353', - '@white' => '#fff', - '@gray' => '#c4c4c4', - '@gray-semilight' => '#888', - '@gray-light' => '#5c5c5c', - '@gray-lighter' => '#4b4b4b', - '@gray-lightest' => '#3a3a3a', - '@disabled-gray' => '#9a9a9a', + '@black' => [ + 'value' => '#535353', + 'description' => 'Icinga Web 2 base color. You most likely won\'t use this variable directly but other variables are often derived from this one.' + ], + '@white' => [ + 'value' => '#fff', + 'description' => 'Icinga Web 2 base color. You most likely won\'t use this variable directly but other variables are often derived from this one.' + ], + '@gray' => [ + 'value' => '#c4c4c4', + 'description' => 'Icinga Web 2 base gray color.' + ], + '@gray-semilight' => [ + 'value' => '#888', + 'description' => 'Usually used to visualize borders but sometimes also for text colors.' + ], + '@gray-light' => [ + 'value' => '#5c5c5c', + 'description' => 'Usually used to visualize borders but sometimes also for text colors.' + ], + '@gray-lighter' => [ + 'value' => '#4b4b4b', + 'description' => 'Used to visualize borders, background and text colors.' + ], + '@gray-lightest' => [ + 'value' => '#3a3a3a', + 'description' => 'Mostly used for background colors.' + ], + '@disabled-gray' => [ + 'value' => '#9a9a9a', + 'description' => 'Used to display for disabled elements, like disabled input fields or disabled buttons.' + ], // Colors - '@color-ok' => '#44bb77', - '@color-up' => '@color-ok', - '@color-warning' => '#ffaa44', - '@color-warning-handled' => '#ffcc66', - '@color-critical' => '#ff5566', - '@color-critical-handled' => '#ff99aa', - '@color-critical-accentuated' => 'darken(@color-critical, 10%)', - '@color-down' => '@color-critical', - '@color-down-handled' => '@color-critical-handled', - '@color-unknown' => '#aa44ff', - '@color-unknown-handled' => '#cc77ff', - '@color-unreachable' => '@color-unknown', - '@color-unreachable-handled' => '@color-unknown-handled', - '@color-pending' => '#77aaff', - '@icinga-blue' => '#00C3ED', - '@icinga-secondary' => '#EF4F98', - '@icinga-secondary-dark' => 'darken(@icinga-secondary, 10%)', - '@low-sat-blue' => '#404d72', - '@low-sat-blue-dark' => '#434374', - '@icinga-blue-light' => 'fade(@icinga-blue, 50%)', - '@icinga-blue-dark' => '#0081a6', + '@color-ok' => [ + 'value' => '#44bb77', + 'description' => 'Used to display OK Service states.' + ], + '@color-up' => [ + 'value' => '@color-ok', + 'description' => 'Used to display healthy running hosts (UP states).' + ], + '@color-warning' => [ + 'value' => '#ffaa44', + 'description' => 'Used to visualize services which are in a WARING state.' + ], + '@color-warning-handled' => [ + 'value' => '#ffcc66', + 'description' => 'Used to visualize services which are in a WARING state and are handled. These services are either in a downtime or are acknowledged by the user.' + ], + '@color-critical' => [ + 'value' => '#ff5566', + 'description' => 'Used to visualize services which are in a CRITICAL state.' + ], + '@color-critical-handled' => [ + 'value' => '#ff99aa', + 'description' => 'Used to visualize services which are in a CRITICAL state and are handled. These services are either in a downtime or are acknowledged by the user.' + ], + '@color-critical-accentuated' => [ + 'value' => 'darken(@color-critical, 10%)', + 'description' => '' + ], + '@color-down' => [ + 'value' => '@color-critical', + 'description' => 'Used to visualize hosts which are in a DOWN state.' + ], + '@color-down-handled' => [ + 'value' => '@color-critical-handled', + 'description' => 'Used to visualize hosts which are in a DOWN state and are handled by the user.' + ], + '@color-unknown' => [ + 'value' => '#aa44ff', + 'description' => 'Used to visualize services which are in an UNKNOWN state.' + ], + '@color-unknown-handled' => [ + 'value' => '#cc77ff', + 'description' => 'Used to visualize services which are in an UNKNOWN state and handled by the user.' + ], + '@color-unreachable' => [ + 'value' => '@color-unknown', + 'description' => 'Used to visualize hosts which are in an UNREACHABLE state.' + ], + '@color-unreachable-handled' => [ + 'value' => '@color-unknown-handled', + 'description' => 'Used to visualize hosts which are in an UNREACHABLE state and handled by the user.' + ], + '@color-pending' => [ + 'value' => '#77aaff', + 'description' => 'Used to visualize Hosts/Services which are in a PENDING state.' + ], + '@icinga-blue' => [ + 'value' => '#00C3ED', + 'description' => 'Icinga Web 2 blue color and is used mostly everywhere in Icinga Web 2 and by other modules.' + ], + '@icinga-secondary' => [ + 'value' => '#EF4F98', + 'description' => 'Icinga Web 2 secondary color. Used only for background colors e.g for the login page of Icinga Web 2.' + ], + '@icinga-secondary-dark' => [ + 'value' => 'darken(@icinga-secondary, 10%)', + 'description' => 'Used mostly for background colors e.g for the submit button on the login page of Icinga Web 2.' + ], + '@low-sat-blue' => [ + 'value' => '#404d72', + 'description' => 'All Icinga Web 2 and other modules input fields use this as background color.' + ], + '@low-sat-blue-dark' => [ + 'value' => '#434374', + 'description' => 'Used as a background color or for visualizing borders.' + ], + '@icinga-blue-light' => [ + 'value' => 'fade(@icinga-blue, 50%)', + 'description' => 'The light version of Icinga Web 2 blue color.' + ], + '@icinga-blue-dark' => [ + 'value' => '#0081a6', + 'description' => 'Used to highlight button hovers and sometimes for background colors.' + ], // Notification colors - '@color-notification-error' => '@color-critical', - '@color-notification-info' => '@color-pending', - '@color-notification-success' => '@color-ok', - '@color-notification-warning' => '@color-warning', + '@color-notification-error' => [ + 'value' => '@color-critical', + 'description' => '' + ], + '@color-notification-info' => [ + 'value' => '@color-pending', + 'description' => '' + ], + '@color-notification-success' => [ + 'value' => '@color-ok', + 'description' => '' + ], + '@color-notification-warning' => [ + 'value' => '@color-warning', + 'description' => '' + ], // Background color for - '@body-bg-color' => '#282E39', - '@body-bg-color-transparent' => 'fade(@body-bg-color, 0)', + '@body-bg-color' => [ + 'value' => '#282E39', + 'description' => '' + ], + '@body-bg-color-transparent' => [ + 'value' => 'fade(@body-bg-color, 0)', + 'description' => '' + ], // Text colors - '@text-color' => '@white', - '@text-color-inverted' => '@body-bg-color', - '@text-color-light' => 'fade(@text-color, 75%)', - '@text-color-on-icinga-blue' => '@body-bg-color', - '@light-text-bg-color' => 'fade(@gray, 5%)', + '@text-color' => [ + 'value' => '@white', + 'description' => '' + ], + '@text-color-inverted' => [ + 'value' => '@body-bg-color', + 'description' => '' + ], + '@text-color-light' => [ + 'value' => 'fade(@text-color, 75%)', + 'description' => '' + ], + '@text-color-on-icinga-blue' => [ + 'value' => '@body-bg-color', + 'description' => '' + ], + '@light-text-bg-color' => [ + 'value' => 'fade(@gray, 5%)', + 'description' => '' + ], // Text color on - '@link-color' => '@text-color', - '@tr-active-color' => 'fade(@icinga-blue, 25)', - '@tr-hover-color' => 'fade(@icinga-blue, 5)', + '@link-color' => [ + 'value' => '@text-color', + 'description' => '' + ], + '@tr-active-color' => [ + 'value' => 'fade(@icinga-blue, 25)', + 'description' => '' + ], + '@tr-hover-color' => [ + 'value' => 'fade(@icinga-blue, 5)', + 'description' => '' + ], // Menu colors - '@menu-bg-color' => '#06062B', - '@menu-hover-bg-color' => 'lighten(@menu-bg-color, 5%)', - '@menu-search-hover-bg-color' => '@menu-hover-bg-color', - '@menu-active-bg-color' => '#181742', - '@menu-active-hover-bg-color' => 'lighten(@menu-active-bg-color, 5%)', - '@menu-color' => '#DBDBDB', - '@menu-active-color' => '@text-color', - '@menu-highlight-color' => '@icinga-blue', - '@menu-highlight-hover-bg-color' => '@icinga-blue-dark', - '@menu-2ndlvl-color' => '#c4c4c4', - '@menu-2ndlvl-highlight-bg-color' => '@tr-hover-color', - '@menu-2ndlvl-active-bg-color' => '@menu-highlight-color', - '@menu-2ndlvl-active-color' => '@text-color-inverted', - '@menu-2ndlvl-active-hover-bg-color' => 'darken(@menu-2ndlvl-active-bg-color, 5%)', - '@menu-2ndlvl-active-hover-color' => '@menu-2ndlvl-active-color', - '@menu-flyout-bg-color' => '@body-bg-color', - '@menu-flyout-color' => '@text-color', - '@tab-hover-bg-color' => 'fade(@body-bg-color, 50%)', + '@menu-bg-color' => [ + 'value' => '#06062B', + 'description' => '' + ], + '@menu-hover-bg-color' => [ + 'value' => 'lighten(@menu-bg-color, 5%)', + 'description' => '' + ], + '@menu-search-hover-bg-color' => [ + 'value' => '@menu-hover-bg-color', + 'description' => '' + ], + '@menu-active-bg-color' => [ + 'value' => '#181742', + 'description' => '' + ], + '@menu-active-hover-bg-color' => [ + 'value' => 'lighten(@menu-active-bg-color, 5%)', + 'description' => '' + ], + '@menu-color' => [ + 'value' => '#DBDBDB', + 'description' => '' + ], + '@menu-active-color' => [ + 'value' => '@text-color', + 'description' => '' + ], + '@menu-highlight-color' => [ + 'value' => '@icinga-blue', + 'description' => '' + ], + '@menu-highlight-hover-bg-color' => [ + 'value' => '@icinga-blue-dark', + 'description' => '' + ], + '@menu-2ndlvl-color' => [ + 'value' => '#c4c4c4', + 'description' => '' + ], + '@menu-2ndlvl-highlight-bg-color' => [ + 'value' => '@tr-hover-color', + 'description' => '' + ], + '@menu-2ndlvl-active-bg-color' => [ + 'value' => '@menu-highlight-color', + 'description' => '' + ], + '@menu-2ndlvl-active-color' => [ + 'value' => '@text-color-inverted', + 'description' => 'Used to highlight sub items of a main navigation menus.' + ], + '@menu-2ndlvl-active-hover-bg-color' => [ + 'value' => 'darken(@menu-2ndlvl-active-bg-color, 5%)', + 'description' => '' + ], + '@menu-2ndlvl-active-hover-color' => [ + 'value' => '@menu-2ndlvl-active-color', + 'description' => '' + ], + '@menu-flyout-bg-color' => [ + 'value' => '@body-bg-color', + 'description' => '' + ], + '@menu-flyout-color' => [ + 'value' => '@text-color', + 'description' => '' + ], + '@tab-hover-bg-color' => [ + 'value' => 'fade(@body-bg-color, 50%)', + 'description' => '' + ], // Form colors - '@form-info-bg-color' => 'fade(@color-ok, 20%)', - '@form-error-bg-color' => 'fade(@color-critical, 30%)', - '@form-warning-bg-color' => 'fade(@color-warning, 40%)', - '@login-box-background' => 'fade(#0B0B2F, 30%)', + '@form-info-bg-color' => [ + 'value' => 'fade(@color-ok, 20%)', + 'description' => '' + ], + '@form-error-bg-color' => [ + 'value' => 'fade(@color-critical, 30%)', + 'description' => '' + ], + '@form-warning-bg-color' => [ + 'value' => 'fade(@color-warning, 40%)', + 'description' => '' + ], + '@login-box-background' => [ + 'value' => 'fade(#0B0B2F, 30%)', + 'description' => '' + ], // Other colors - '@color-granted' => '#59cd59', - '@color-refused' => '#ee7373', - '@color-restricted' => '#dede7d', + '@color-granted' => [ + 'value' => '#59cd59', + 'description' => '' + ], + '@color-refused' => [ + 'value' => '#ee7373', + 'description' => '' + ], + '@color-restricted' => [ + 'value' => '#dede7d', + 'description' => '' + ], // Light mode - '@light-body-bg-color' => '#F5F9FA' + '@light-body-bg-color' => [ + 'value' => '#F5F9FA', + 'description' => '' + ] ]; } }