azion-theme 1.5.0 → 1.5.2

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [1.5.2](https://github.com/aziontech/azion-theme/compare/v1.5.1...v1.5.2) (2024-08-07)
+
+### Bug Fixes
+
+* light/dark mode merge missing colors ([11e8e39](https://github.com/aziontech/azion-theme/commit/11e8e39131911616a6da72e147cd76d2a175f34e))
+
+## [1.5.1](https://github.com/aziontech/azion-theme/compare/v1.5.0...v1.5.1) (2024-08-06)
+
+### Bug Fixes
+
+* fork primevue base theme and remove scss functions ([e6346c8](https://github.com/aziontech/azion-theme/commit/e6346c87edcdd4c777f0ddedea95a8f374c33744))
+* scss variablens + functions ([efe88d3](https://github.com/aziontech/azion-theme/commit/efe88d368e063d697c156ff6642e9552f67f4064))
+
 ## [1.5.0](https://github.com/aziontech/azion-theme/compare/v1.4.3...v1.5.0) (2024-08-05)
 
 ### Features

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "azion-theme",
   "type": "module",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "author": "aziontech",
   "contributors": [
     {

package/src/azion/_variables.scss

@@ -1,53 +1,5 @@
 // Theme Specific Variables
 
-$pc: #f4f4f4;
-$pdc: hsla(0, 0%, 96%, 0.5);
-$pderc: #f4f4f4;
-$ptc: #f4f4f4;
-$highlightBg: rgba($pc, 0.06);
-$overlayContentBg: #171717;
-
-:root.azion-light {
-  $pc: #2b2b2b;
-  $pdc: #000;
-  $pderc: #000;
-  $ptc: #f4f4f4;
-  $highlightBg: rgba($pc, 0.06);
-  $overlayContentBg: #ffffff;
-}
-
-$primaryColor: $pc;
-$primaryDarkColor: $pdc;
-$primaryDarkerColor: $pderc;
-$primaryTextColor: $ptc;
-
-$colors: (
-  "blue": #2196f3,
-  "green": #4caf50,
-  "yellow": #fbc02d,
-  "cyan": #00bcd4,
-  "pink": #e91e63,
-  "indigo": #3f51b5,
-  "teal": #009688,
-  "orange": #f57c00,
-  "bluegray": #607d8b,
-  "purple": #9c27b0,
-  "red": #ff4032,
-  "primary": $primaryColor,
-);
-
-// Mandatory Designer Variables
-@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 {
   --surface-a: #ffffff;
   --surface-b: #f8f9fa;
@@ -80,19 +32,49 @@ $colors: (
 
   --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,
+);
+
+@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;
-  --text-color: #ededed;
-  --text-color-secondary: #b5b5b5;
-  --text-color-link: #93c5fd;
-  --text-color-link-hover: #93c5fd;
 
   --primary-color: #f4f4f4;
-  --primary-color-text: #1e1e1e;
-  --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;
+  --highlight-bg: #f4f4f410;
+
+  --text-color: #ededed;
+  --primary-color-text: #1e1e1e;
+  --text-color-secondary: #b5b5b5;
+  --text-color-link: #93c5fd;
+  --text-color-link-hover: #93c5fd;
 
   --surface-0: #0a0a0a;
   --surface-50: #111111;
@@ -124,21 +106,24 @@ $colors: (
   --surface-border: #282828;
   --surface-hover: #f5f5f516;
 
-  --content-padding: #{$panelContentPadding};
-  --inline-spacing: #{$inlineSpacing};
-  --border-radius: #{$borderRadius};
-  --focus-ring: #{$focusShadow};
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --focus-ring: 0 0 0 0.2rem #f3642b9f;
+  --tabview-header-active-bg: #f4f4f4;
 
-  --maskbg: #{$maskBg};
-  --highlight-bg: rgba(var(--primary-color), 0.06);
-  --highlight-text-color: #{$highlightTextColor};
-  --highlight-focus-bg: rgba(var(--primary-color), 0.08);
+  --maskbg: #1c1c1c80;
+  --highlight-text-color: none;
+  --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);
@@ -147,7 +132,7 @@ $colors: (
   --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;
@@ -159,11 +144,10 @@ $colors: (
   --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;
@@ -198,7 +182,7 @@ $colors: (
   --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;
@@ -210,7 +194,7 @@ $colors: (
   --tooltip-text-color: #1c1c1c;
   --badge-font-weight: 400;
   --tag-padding: 0.25rem 0.5rem;
-  --progress-bar-value-bg: #($primaryColor);
+  --progress-bar-value-bg: #(var(--primary-color));
   --progress-spinner-stroke-color: var(--surface-600);
   --avatar-bg: #363636;
   --chip-bg: #404040;
@@ -223,9 +207,9 @@ $colors: (
   --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),
@@ -236,12 +220,22 @@ $colors: (
 :root.azion.azion-light {
   color-scheme: light;
   --text-color: #1c1c1c;
+  --primary-color-text: #f4f4f4;
   --text-color-secondary: #666666;
   --text-color-link: #3265cb;
   --text-color-link-hover: #2851a4;
 
-  --primary-color: #1e1e1e;
+  --primary-color: #f4f4f4;
+  --primary-dark-color: #000;
+  --primary-darker-color: #000;
+  --primary-text-color: #f4f4f4;
+
+  --overlay-content-bg: #ffffff;
+  --highlight-bg: rgba(244 244 244 0.08);
+
   --primary-color-text: #f4f4f4;
+  --primary-text-color: #f4f4f4;
+  --overlay-content-bg: #ffffff;
 
   --surface-0: #ffffff;
   --surface-50: #f9fafb;
@@ -273,16 +267,19 @@ $colors: (
   --surface-border: #e8e8e8;
   --surface-hover: #3b3b3b16;
 
-  --maskbg: #{$maskBg};
-  --highlight-bg: rgba(var(--primary-color), 0.06);
-  --highlight-text-color: #{$highlightTextColor};
-  --highlight-focus-bg: rgba(var(--primary-color), 0.08);
+  --maskbg: #1e1e1e32;
+  --highlight-text-color: none;
+  --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 @@ $colors: (
   --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 @@ $colors: (
   --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;

package/src/azion/extended-components/_checkbox.scss

@@ -56,12 +56,3 @@
     }
   }
 }
-
-@if ($highlightBg == $checkboxActiveBg) {
-  .p-highlight {
-    .p-checkbox {
-      .p-checkbox-box {
-      }
-    }
-  }
-}

package/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;
         }
       }

package/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;
         }
       }

package/src/azion/theme-base/_colors.scss

@@ -0,0 +1,18 @@
+:root {
+    @if variable-exists(colors) {
+        @each $name, $color in $colors {
+            @for $i from 0 through 5 {
+                @if ($i == 0) {
+                    --#{$name}-50:#{tint($color, (5 - $i) * 19%)};
+                }
+                @else {
+                    --#{$name}-#{$i * 100}:#{tint($color, (5 - $i) * 19%)};
+                }
+            }
+            
+            @for $i from 1 through 4 {
+                --#{$name}-#{($i + 5) * 100}:#{shade($color, $i * 15%)};
+            }
+        }
+    }
+}

package/src/azion/theme-base/_common.scss

@@ -0,0 +1,75 @@
+* {
+	box-sizing: border-box;
+}
+
+.p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: $fontSize;
+    font-weight: $fontWeight;
+}
+
+.p-component-overlay {
+    background-color: $maskBg;
+    transition-duration: $transitionDuration;
+}
+
+.p-disabled, .p-component:disabled {
+    opacity: $disabledOpacity;
+}
+
+.p-error {
+    color: $errorColor;
+}
+
+.p-text-secondary {
+    color: $textSecondaryColor;
+}
+
+.pi {
+    font-size: $primeIconFontSize;
+}
+
+.p-icon {
+    width: $primeIconFontSize;
+    height: $primeIconFontSize;
+}
+
+.p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: $fontSize;
+    border-radius: $borderRadius;
+
+    &:focus-visible {
+        @include focused();
+    }
+}
+
+.p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+.p-component-overlay {
+    @keyframes p-component-overlay-enter-animation {
+        from {
+            background-color: transparent;
+        }
+        to {
+            background-color: var(--maskbg);
+        }
+    }
+    
+    @keyframes p-component-overlay-leave-animation {
+        from {
+            background-color: var(--maskbg);
+        }
+        to {
+            background-color: transparent;
+        }
+    }
+}

package/src/azion/theme-base/_components.scss

@@ -0,0 +1,103 @@
+@import '_mixins';
+@import '_colors';
+
+@import './components/input/_editor';
+
+@layer primevue {
+    @import '_common';
+
+    //Input
+    @import './components/input/_autocomplete';
+    @import './components/input/_calendar';
+    @import './components/input/_cascadeselect';
+    @import './components/input/_checkbox';
+    @import './components/input/_chips';
+    @import './components/input/_colorpicker';
+    @import './components/input/_dropdown';
+    @import './components/input/_inputgroup';
+    @import './components/input/_inputnumber';
+    @import './components/input/_inputswitch';
+    @import './components/input/_inputtext';
+    @import './components/input/_listbox';
+    @import './components/input/_multiselect';
+    @import './components/input/_password';
+    @import './components/input/_radiobutton';
+    @import './components/input/_rating';
+    @import './components/input/_selectbutton';
+    @import './components/input/_slider';
+    @import './components/input/_treeselect';
+    @import './components/input/_togglebutton';
+
+    //Button
+    @import './components/button/_button';
+    @import './components/button/_speeddial';
+    @import './components/button/_splitbutton';
+
+    //Data
+    @import './components/data/_carousel';
+    @import './components/data/_datatable';
+    @import './components/data/_dataview';
+    @import './components/data/_filter';
+    @import './components/data/_orderlist';
+    @import './components/data/_organizationchart';
+    @import './components/data/_paginator';
+    @import './components/data/_picklist';
+    @import './components/data/_timeline';
+    @import './components/data/_tree';
+    @import './components/data/_treetable';
+
+    //Panel
+    @import './components/panel/_accordion';
+    @import './components/panel/_card';
+    @import './components/panel/_fieldset';
+    @import './components/panel/_divider';
+    @import './components/panel/_panel';
+    @import './components/panel/_scrollpanel';
+    @import './components/panel/_splitter';
+    @import './components/panel/_tabview';
+    @import './components/panel/_toolbar';
+
+    //Overlay
+    @import './components/overlay/_confirmpopup';
+    @import './components/overlay/_dialog';
+    @import './components/overlay/_overlaypanel';
+    @import './components/overlay/_sidebar';
+    @import './components/overlay/_tooltip';
+
+    //File
+    @import './components/file/_fileupload';
+
+    //Menu
+    @import './components/menu/_breadcrumb';
+    @import './components/menu/_contextmenu';
+    @import './components/menu/_dock';
+    @import './components/menu/_megamenu';
+    @import './components/menu/_menu';
+    @import './components/menu/_menubar';
+    @import './components/menu/_panelmenu';
+    @import './components/menu/_steps';
+    @import './components/menu/_tabmenu';
+    @import './components/menu/_tieredmenu';
+
+    //Messages
+    @import './components/messages/_inlinemessage';
+    @import './components/messages/_message';
+    @import 'components/messages/toast';
+
+    //MultiMedia
+    @import './components/multimedia/_galleria';
+    @import './components/multimedia/_image';
+
+    //Misc
+    @import './components/misc/_avatar';
+    @import './components/misc/_badge';
+    @import './components/misc/_blockui';
+    @import './components/misc/_chip';
+    @import './components/misc/_inplace';
+    @import './components/misc/_progressbar';
+    @import './components/misc/_progressspinner';
+    @import './components/misc/_scrolltop';
+    @import './components/misc/_skeleton';
+    @import './components/misc/_tag';
+    @import './components/misc/_terminal';
+}