From 11e8e39131911616a6da72e147cd76d2a175f34e Mon Sep 17 00:00:00 2001 From: Luis Igreja <lfsigreja@gmail.com> Date: Tue, 6 Aug 2024 21:30:34 -0300 Subject: [PATCH] fix: light/dark mode merge missing colors --- src/azion/_variables.scss | 157 +++++++++--------- src/azion/extended-components/_tabmenu.scss | 2 +- src/azion/extended-components/_tabview.scss | 2 +- .../theme-base/components/panel/_tabview.scss | 6 +- src/azion/variables/_button.scss | 2 +- src/azion/variables/_form.scss | 6 +- src/azion/variables/_menu.scss | 8 +- src/azion/variables/_panel.scss | 2 +- 8 files changed, 91 insertions(+), 94 deletions(-) diff --git a/src/azion/_variables.scss b/src/azion/_variables.scss index 9a278f7..195feae 100644 --- a/src/azion/_variables.scss +++ b/src/azion/_variables.scss @@ -1,80 +1,70 @@ // Theme Specific Variables +:root { + --surface-a: #ffffff; + --surface-b: #f8f9fa; + --surface-c: #e9ecef; + --surface-d: #dee2e6; + --surface-e: #ffffff; + --surface-f: #ffffff; - $highlightBg: #f4f4f410; + --green-50: #f4fcf7; + --green-100: #caf1d8; + --green-200: #a0e6ba; + --green-300: #76db9b; + --green-400: #4cd07d; + --green-500: #22c55e; + --green-600: #1da750; + --green-700: #188a42; + --green-800: #136c34; + --green-900: #0e4f26; - $pc: #2b2b2b; - $pdc: #000; - $pderc: #000; - $ptc: #f4f4f4; - $highlightBg: rgba($pc, 0.06); - $overlayContentBg: #ffffff; + --red-50: #fff5f5; + --red-100: #ffd0ce; + --red-200: #ffaca7; + --red-300: #ff8780; + --red-400: #ff6259; + --red-500: #ff3d32; + --red-600: #d9342b; + --red-700: #b32b23; + --red-800: #8c221c; + --red-900: #661814; - :root { - --surface-a: #ffffff; - --surface-b: #f8f9fa; - --surface-c: #e9ecef; - --surface-d: #dee2e6; - --surface-e: #ffffff; - --surface-f: #ffffff; - - --green-50: #f4fcf7; - --green-100: #caf1d8; - --green-200: #a0e6ba; - --green-300: #76db9b; - --green-400: #4cd07d; - --green-500: #22c55e; - --green-600: #1da750; - --green-700: #188a42; - --green-800: #136c34; - --green-900: #0e4f26; - - --red-50: #fff5f5; - --red-100: #ffd0ce; - --red-200: #ffaca7; - --red-300: #ff8780; - --red-400: #ff6259; - --red-500: #ff3d32; - --red-600: #d9342b; - --red-700: #b32b23; - --red-800: #8c221c; - --red-900: #661814; - - --font-family: "Roboto", sans-serif; - } - // Mandatory Designer Variables + --font-family: "Roboto", sans-serif; +} +// Mandatory Designer Variables - $colors: ( - "blue": #2196f3, - "green": #4caf50, - "yellow": #fbc02d, - "cyan": #00bcd4, - "pink": #e91e63, - "indigo": #3f51b5, - "teal": #009688, - "orange": #f57c00, - "bluegray": #607d8b, - "purple": #9c27b0, - "red": #ff4032, - "primary": #f4f4f4 - ); +$colors: ( + "blue": #2196f3, + "green": #4caf50, + "yellow": #fbc02d, + "cyan": #00bcd4, + "pink": #e91e63, + "indigo": #3f51b5, + "teal": #009688, + "orange": #f57c00, + "bluegray": #607d8b, + "purple": #9c27b0, + "red": #ff4032, + "primary": #f4f4f4, +); - @import "./variables/general"; - @import "./variables/form"; - @import "./variables/button"; - @import "./variables/panel"; - @import "./variables/_data"; - @import "./variables/_overlay"; - @import "./variables/_message"; - @import "./variables/_menu"; - @import "./variables/_media"; - @import "./variables/_misc"; +@import "./variables/general"; +@import "./variables/form"; +@import "./variables/button"; +@import "./variables/panel"; +@import "./variables/_data"; +@import "./variables/_overlay"; +@import "./variables/_message"; +@import "./variables/_menu"; +@import "./variables/_media"; +@import "./variables/_misc"; :root.azion.azion-dark { color-scheme: dark; --primary-color: #f4f4f4; - --primary-dark-color: #hsla(0, 0%, 96%, 0.5);; + --primary-dark-color: #hsla(0, 0%, 96%, 0.5); --primary-darker-color: #f4f4f4; --primary-text-color: #f4f4f4; --overlay-content-bg: #171717; @@ -120,16 +110,20 @@ --inline-spacing: 0.5rem; --border-radius: 6px; --focus-ring: 0 0 0 0.2rem #f3642b9f; + --tabview-header-active-bg: #f4f4f4; --maskbg: #1c1c1c80; --highlight-text-color: none; - --highlight-focus-bg: rgba(var(--primary-color), 0.08); + --highlight-focus-bg: var(--surface-hover); + --dropdown-hover-bg: var(--surface-hover); --disabled-opacity: 0.5; --error-color: #f26464; --mask-bg: #1c1c1c80; --bg-selection: #fab99e; --table-bg-color: #1c1c1c; - --tab-menu-link: #f4f4f4; + --highlight-tabview-nav-link: #1e1e1e; + --bg-tabview-nav-link: var(--surface-section); + --highlight-tab-menu-link: #1c1c1c; --paginator-bg: #1c1c1c; --paginator-border: #282828; --paginator-element-hover-bg: hsla(0, 0%, 100%, 0.03); @@ -138,7 +132,7 @@ --table-header-cell-hover-bg: #ffffff0d; --table-header-cell-bg: #1c1c1c; --table-header-cell-highlight-bg: #1c1c1c; - --table-cell-highlight-hover-bg: rgba(var(--primary-color), 0.16); + --table-cell-highlight-hover-bg: rgba(244, 244, 244, 0.16); --table-body-row-even-bg: #212121; --table-body-row-hover-bg: #353535; --table-footer-cell-bg: #1c1c1c; @@ -150,11 +144,10 @@ --secondary-button-text-color: #222222; --secondary-button-border: #f4f4f4; --secondary-button-hover-bg: #e1e1e1; - --secondary-button-text-hover-color: #e1e1e1; + --secondary-button-text-hover-color: #1e1e1e; --secondary-button-hover-border-color: #e1e1e1; --secondary-button-active-bg: #d9d9d9; --secondary-button-active-border-color: #d9d9d9; - --secondary-button-text-hover-color: #1e1e1e; --secondary-button-hover-border-color: #e1e1e1; --secondary-button-text-active-color: #1e1e1e; --secondary-button-active-border-color: #d9d9d9; @@ -189,7 +182,7 @@ --action-icon-hover-border-color: 1px solid #3e3e3e; --panel-content-bg: #171717; --panel-header-hover-border-color: #171717; - --panel-header-text-hover-color: rgba(var(--primary-color), 0.04); + --panel-header-text-hover-color: rgba(244, 244, 244, 0.04); --card-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.02), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px #3c3c3c; @@ -214,9 +207,9 @@ --error-message--bg: #f2646433; --error-message-icon-color: #f26464; --steps-item-bg: #00000000; - --steps-item-border: 1px solid #3e3e3e; + --steps-item-border: #3e3e3e; --menu-bg: #1c1c1c; - --menu-border: 1px solid #3e3e3e; + --menu-border: #3e3e3e; --submenu-header-font-weight: 500; --overlay-menu-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.2), @@ -232,13 +225,13 @@ --text-color-link: #3265cb; --text-color-link-hover: #2851a4; - --primary-color: #2b2b2b; + --primary-color: #f4f4f4; --primary-dark-color: #000; --primary-darker-color: #000; --primary-text-color: #f4f4f4; --overlay-content-bg: #ffffff; - --highlight-bg: rgba(var(--primary-color), 0.06); + --highlight-bg: rgba(244 244 244 0.08); --primary-color-text: #f4f4f4; --primary-text-color: #f4f4f4; @@ -276,13 +269,17 @@ --maskbg: #1e1e1e32; --highlight-text-color: none; - --highlight-focus-bg: rgba(var(--primary-color), 0.08); + --highlight-focus-bg: var(--surface-hover); + --highlight-tabview-nav-link: #f4f4f4; + --dropdown-hover-bg: var(--surface-hover); + --bg-tabview-nav-link: var(--surface-hover); + --tabview-header-active-bg: #1e1e1e; --disabled-opacity: 0.4; --mask-bg: #1e1e1e32; --error-color: #ef4040; --bg-selection: #f7966e; --table-bg-color: #e7e7e7; - --tab-menu-link: #1c1c1c; + --highlight-tab-menu-link: #f4f4f4; --paginator-bg: #ffffff; --paginator-border: none; --paginator-element-hover-bg: #e9ecef; @@ -300,7 +297,7 @@ --plain-button-active-bg-color: #1e1e1e33; --secondary-button-bg: #1e1e1e; --secondary-button-text-color: #f4f4f4; - --secondary-button-text-hover-bg: #404040; + --secondary-button-hover-bg: #404040; --secondary-button-text-hover-color: #f4f4f4; --secondary-button-hover-border-color: #323232; --secondary-button-active-bg: #303030; @@ -359,9 +356,9 @@ --error-message--bg: #ef40401f; --error-message-icon-color: #ef4040; --steps-item-bg: #ffffff00; - --steps-item-border: 1px solid #e7e7e7; + --steps-item-border: #e7e7e7; --menu-bg: #ffffff; - --menu-border: 1px solid #e7e7e7; + --menu-border: #e7e7e7; --submenu-header-font-weight: 400; --overlay-menu-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 0px 0px 1px #e7e7e7; diff --git a/src/azion/extended-components/_tabmenu.scss b/src/azion/extended-components/_tabmenu.scss index 09c2b9d..6bce576 100644 --- a/src/azion/extended-components/_tabmenu.scss +++ b/src/azion/extended-components/_tabmenu.scss @@ -12,7 +12,7 @@ } &.p-highlight { .p-menuitem-link { - color: var(--tab-menu-link) !important; + color: var(--highlight-tab-menu-link) !important; font-weight: 500 !important; } } diff --git a/src/azion/extended-components/_tabview.scss b/src/azion/extended-components/_tabview.scss index 4f3dba7..b8f84f7 100644 --- a/src/azion/extended-components/_tabview.scss +++ b/src/azion/extended-components/_tabview.scss @@ -13,7 +13,7 @@ } &.p-highlight { .p-tabview-nav-link { - color: #1e1e1e !important; + color: var(--highlight-tabview-nav-link) !important; font-weight: 700 !important; } } diff --git a/src/azion/theme-base/components/panel/_tabview.scss b/src/azion/theme-base/components/panel/_tabview.scss index b8a4b59..bb8594b 100644 --- a/src/azion/theme-base/components/panel/_tabview.scss +++ b/src/azion/theme-base/components/panel/_tabview.scss @@ -35,14 +35,14 @@ &.p-highlight { .p-tabview-nav-link { - background: $tabviewHeaderActiveBg; - border-color: $tabviewHeaderActiveBorderColor; + background: $tabviewHeaderActiveBg; + border-color: $tabviewHeaderActiveBorderColor; color: $tabviewHeaderTextActiveColor; } } } } - + .p-tabview-nav-btn.p-link { background: $tabviewHeaderActiveBg; color: $tabviewHeaderTextActiveColor; diff --git a/src/azion/variables/_button.scss b/src/azion/variables/_button.scss index b09c983..b22dcf8 100644 --- a/src/azion/variables/_button.scss +++ b/src/azion/variables/_button.scss @@ -95,7 +95,7 @@ $secondaryButtonBorder: 1px solid var(--secondary-button-bg); /// Background of a secondary button in hover state /// @group button -$secondaryButtonHoverBg: var(--secondary-button-text-hover-bg); +$secondaryButtonHoverBg: var(--secondary-button-hover-bg); /// Text color of a secondary button in hover state /// @group button diff --git a/src/azion/variables/_form.scss b/src/azion/variables/_form.scss index 2090b7b..99b5bf0 100644 --- a/src/azion/variables/_form.scss +++ b/src/azion/variables/_form.scss @@ -92,7 +92,7 @@ $inputListItemTextColor: $textColor; /// Hover state background for an individual itrem of an input list /// @group form -$inputListItemHoverBg: rgba(var(--primary-color), 0.06); +$inputListItemHoverBg: var(--dropdown-hover-bg); /// Hover state text color for an individual itrem of an input list /// @group form @@ -100,7 +100,7 @@ $inputListItemTextHoverColor: $textColor; /// Focus state background for an individual itrem of an input list /// @group form -$inputListItemFocusBg: rgba(var(--primary-color), 0.06); +$inputListItemFocusBg: var(--highlight-focus-bg); /// Focus state text color for an individual itrem of an input list /// @group form @@ -412,7 +412,7 @@ $calendarCellDateBorder: 1px solid transparent; /// Background of a calendar date cell in hover state /// @group form -$calendarCellDateHoverBg: rgba(var(--primary-color), 0.06); +$calendarCellDateHoverBg: var(--surface-hover); /// Background of a calendar date cell indicating today /// @group form diff --git a/src/azion/variables/_menu.scss b/src/azion/variables/_menu.scss index 7064945..aac8e17 100644 --- a/src/azion/variables/_menu.scss +++ b/src/azion/variables/_menu.scss @@ -76,7 +76,7 @@ $menuitemIconHoverColor: $textColor; /// Background of a menuitem in hover state /// @group menu -$menuitemHoverBg: rgba(var(--primary-color), 0.06); +$menuitemHoverBg: var(--surface-hover); /// Text color of a menuitem in focus state /// @group menu @@ -88,7 +88,7 @@ $menuitemIconFocusColor: $textColor; /// Background of a menuitem in focus state /// @group menu -$menuitemFocusBg: rgba(var(--primary-color), 0.06); +$menuitemFocusBg: var(--surface-hover); /// Text color of a menuitem in active state /// @group menu @@ -100,11 +100,11 @@ $menuitemIconActiveColor: $textSecondaryColor; /// Background of a menuitem in active state /// @group menu -$menuitemActiveBg: rgba(var(--primary-color), 0.08); +$menuitemActiveBg: var(--surface-hover); /// Background of a menuitem in active and focus states /// @group menu -$menuitemActiveFocusBg: rgba(var(--primary-color), 0.06); +$menuitemActiveFocusBg: var(--surface-hover); /// Font size of an icon indicating the item has a submenu /// @group menu diff --git a/src/azion/variables/_panel.scss b/src/azion/variables/_panel.scss index 55e698c..83775c0 100644 --- a/src/azion/variables/_panel.scss +++ b/src/azion/variables/_panel.scss @@ -216,7 +216,7 @@ $tabviewHeaderTextHoverColor: $textColor; /// Background of a tabview header in selected state /// @group panel -$tabviewHeaderActiveBg: var(--primary-color); +$tabviewHeaderActiveBg: var(--tabview-header-active-bg); /// Border of a tabview header in selected state /// @group panel