azion-theme 1.4.3 → 1.5.0

package/.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: Publish Package to npm.pkg.github
+name: Publish Package
 
 on:
   repository_dispatch:

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [1.5.0](https://github.com/aziontech/azion-theme/compare/v1.4.3...v1.5.0) (2024-08-05)
+
+### Features
+
+* default theme supporting dark/light mode ([14433c6](https://github.com/aziontech/azion-theme/commit/14433c6814c8ef6601a73106043a4e83b47fc36b))
+
 ## [1.4.3](https://github.com/aziontech/azion-theme/compare/v1.4.2...v1.4.3) (2024-08-01)
 
 ### Bug Fixes

package/CODEOWNERS

@@ -1 +1 @@
-* @cesaroeduardo @gablisb0a
+* @cesaroeduardo @robsongajunior

package/default.js

@@ -0,0 +1 @@
+import './src/azion/theme.scss';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "azion-theme",
   "type": "module",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "author": "aziontech",
   "contributors": [
     {
@@ -18,7 +18,8 @@
   ],
   "exports": {
     "./dark": "./dark.js",
-    "./light": "./light.js"
+    "./light": "./light.js",
+    ".": "./default.js"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/src/azion/_custom.scss

@@ -0,0 +1 @@
+@import './custom/selection'

package/src/azion/_extensions.scss

@@ -0,0 +1,30 @@
+/* Customizations to the designer theme should be defined here */
+@layer primevue {
+  @import './extended-components/button';
+  @import './extended-components/selectbutton';
+  @import './extended-components/tabview';
+  @import './extended-components/tabmenu';
+  @import './extended-components/divider';
+  @import './extended-components/dropdownitem';
+  @import './extended-components/inlinemessage';
+  @import './extended-components/breadcumb';
+  @import './extended-components/sidebar';
+  @import './extended-components/tooltip';
+  @import './extended-components/datatable';
+  @import './extended-components/inputpassword';
+  @import './extended-components/toast';
+  @import './extended-components/inputswitch';
+  @import './extended-components/radiobutton';
+  @import './extended-components/checkbox';
+  @import './extended-components/tag';
+  @import './extended-components/markdown';
+  @import './extended-components/listbox';
+  @import './extended-components/inputnumber';
+  @import './extended-components/calendar';
+  @import './extended-components/badge';
+  @import './extended-components/menuitem';
+  @import './extended-components/progressbar';
+  @import './extended-components/dialog';
+  @import './extended-components/multiselect';
+
+}

package/src/azion/_fonts.scss

@@ -0,0 +1,156 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-light.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-light.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-light.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-light.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-light.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-light.svg#roboto-light') format('svg');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('https://fonts.azion.com/roboto-mono/roboto-mono-regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('https://fonts.azion.com/roboto-mono/roboto-mono-light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-regular.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-regular.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-regular.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-regular.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-regular.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-regular.svg#Roboto-Regular') format('svg');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-italic.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-italic.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-italic.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-italic.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-italic.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-italic.svg#roboto-italic') format('svg');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-medium.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-medium.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-medium.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-medium.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-medium.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-medium.svg#roboto-medium') format('svg');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-mediumitalic.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-mediumitalic.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-mediumitalic.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-mediumitalic.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-mediumitalic.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-mediumitalic.svg#roboto-mediumitalic') format('svg');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-bold.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-bold.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-bold.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-bold.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-bold.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-bold.svg#roboto-bold') format('svg');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-bold.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-bold.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-bold.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-bold.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-bold.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-bold.svg#roboto-bold') format('svg');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-bolditalic.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.svg#roboto-bolditalic') format('svg');
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-bolditalic.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-bolditalic.svg#roboto-bold') format('svg');
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('https://fonts.azion.com/roboto/roboto-black.eot');
+  src:
+    url('https://fonts.azion.com/roboto/roboto-black.eot?#iefix') format('embedded-opentype'),
+    url('https://fonts.azion.com/roboto/roboto-black.woff2') format('woff2'),
+    url('https://fonts.azion.com/roboto/roboto-black.woff') format('woff'),
+    url('https://fonts.azion.com/roboto/roboto-black.ttf') format('truetype'),
+    url('https://fonts.azion.com/roboto/roboto-black.svg#roboto-black') format('svg');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}

package/src/azion/_variables.scss

@@ -0,0 +1,369 @@
+// 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;
+  --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;
+}
+
+: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-darker-color: #f4f4f4;
+  --primary-text-color: #f4f4f4;
+
+  --surface-0: #0a0a0a;
+  --surface-50: #111111;
+  --surface-100: #171717;
+  --surface-200: #222222;
+  --surface-300: #282828;
+  --surface-400: #2e2e2e;
+  --surface-500: #353535;
+  --surface-600: #3e3e3e;
+  --surface-700: #4a4a4a;
+  --surface-800: #5e5e5e;
+  --surface-900: #7d7d7d;
+
+  --gray-50: #282828;
+  --gray-100: #363636;
+  --gray-200: #747474;
+  --gray-300: #939393;
+  --gray-400: #b2b2b2;
+  --gray-500: #9e9e9e;
+  --gray-600: #ebebeb;
+  --gray-700: #f5f5f5;
+  --gray-800: #fafafa;
+  --gray-900: #ffffff;
+
+  --surface-ground: #171717;
+  --surface-section: #171717;
+  --surface-card: #171717;
+  --surface-overlay: #ffffff;
+  --surface-border: #282828;
+  --surface-hover: #f5f5f516;
+
+  --content-padding: #{$panelContentPadding};
+  --inline-spacing: #{$inlineSpacing};
+  --border-radius: #{$borderRadius};
+  --focus-ring: #{$focusShadow};
+
+  --maskbg: #{$maskBg};
+  --highlight-bg: rgba(var(--primary-color), 0.06);
+  --highlight-text-color: #{$highlightTextColor};
+  --highlight-focus-bg: rgba(var(--primary-color), 0.08);
+  --disabled-opacity: 0.5;
+  --error-color: #f26464;
+  --mask-bg: #1c1c1c80;
+  --bg-selection: #fab99e;
+  --table-bg-color: #1c1c1c;
+  --tab-menu-link: #f4f4f4;
+  --paginator-bg: #1c1c1c;
+  --paginator-border: #282828;
+  --paginator-element-hover-bg: hsla(0, 0%, 100%, 0.03);
+  --table-header-font-weight: 500;
+  --table-cell-font-weight: 600;
+  --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-body-row-even-bg: #212121;
+  --table-body-row-hover-bg: #353535;
+  --table-footer-cell-bg: #1c1c1c;
+  --table-footer-border: var(--surface-border);
+  --table-footer-border-width: none;
+  --table-footer-bg: #1c1c1c;
+  --plain-button-active-bg-color: #222222;
+  --secondary-button-bg: #ffffff;
+  --secondary-button-text-color: #222222;
+  --secondary-button-border: #f4f4f4;
+  --secondary-button-hover-bg: #e1e1e1;
+  --secondary-button-text-hover-color: #e1e1e1;
+  --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;
+  --warning-button-text-color: #1e1e1e;
+  --help-button-hover-border-color: #8e24aa;
+  --help-button-active: #7b1fa2;
+  --toggle-button-bg: #1e1e1e;
+  --toggle-button-border: #3e3e3e;
+  --toggle-button-hover-bg: #282828;
+  --input-bg: #292929;
+  --input-placeholder-text-color: #666;
+  --input-filled-bg: #181818;
+  --input-filled-hover-bg: #2b2b2b;
+  --input-filled-focus-bg: #181818;
+  --input-group-bg: #1c1c1c;
+  --input-list-bg: #171717;
+  --input-list-header-bg: #1c1c1c;
+  --input-overlay-shadow: 0px 0px 0px 1px #3b3b3b,
+    0px 5px 10px 0px rgba(0, 0, 0, 0.05);
+  --checkbox-border: #666666;
+  --calendar-bg: #292929;
+  --calendar-cell-date-today-bg: #f4f4f4;
+  --calendar-cell-date-today-text-color: #1e1e1e;
+  --input-switch-slider-off-bg: #a1a1a1;
+  --input-switch-slider-off-hover-bg: #5e5e5e;
+  --input-switch-handle-on-bg: #ffffff;
+  --file-upload-file-border: 1px solid #e7e7e7;
+  --editor-toolbar-border: 1px solid #e7e7e7;
+  --action-icon-border: #3e3e3e;
+  --action-icon-color: $textSecondaryColor;
+  --action-icon-hover-bg: #282828;
+  --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);
+  --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;
+  --splitter-gutter-handle-bg: #3e3e3e;
+  --overlay-container-shadow: 0px 0px 0px 1px #3e3e3e,
+    0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
+    0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  --dialog-header-bg: #1c1c1c;
+  --tooltip-text-color: #1c1c1c;
+  --badge-font-weight: 400;
+  --tag-padding: 0.25rem 0.5rem;
+  --progress-bar-value-bg: #($primaryColor);
+  --progress-spinner-stroke-color: var(--surface-600);
+  --avatar-bg: #363636;
+  --chip-bg: #404040;
+  --chip-focus-bg: #363636;
+  --skeleton-bg: #3131316d;
+  --skeleton-animation-bg: #31313199;
+  --toast-shadow: #3e3e3e;
+  --success-message-bg: #39e4781f;
+  --success-message-icon-color: #39e478;
+  --error-message--bg: #f2646433;
+  --error-message-icon-color: #f26464;
+  --steps-item-bg: #00000000;
+  --steps-item-border: 1px solid #3e3e3e;
+  --menu-bg: #1c1c1c;
+  --menu-border: 1px solid #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),
+    0px 0px 0px 1px #3c3c3c;
+  --horizontal-menu-bg: #1c1c1c;
+}
+
+:root.azion.azion-light {
+  color-scheme: light;
+  --text-color: #1c1c1c;
+  --text-color-secondary: #666666;
+  --text-color-link: #3265cb;
+  --text-color-link-hover: #2851a4;
+
+  --primary-color: #1e1e1e;
+  --primary-color-text: #f4f4f4;
+
+  --surface-0: #ffffff;
+  --surface-50: #f9fafb;
+  --surface-100: #f4f4f4;
+  --surface-200: #eeeeee;
+  --surface-300: #e8e8e8;
+  --surface-400: #e3e3e3;
+  --surface-500: #dddddd;
+  --surface-600: #d3d3d3;
+  --surface-700: #c9c9c9;
+  --surface-800: #b5b5b5;
+  --surface-900: #a7a7a7;
+
+  --gray-50: #fafafa;
+  --gray-100: #f5f5f5;
+  --gray-200: #eeeeee;
+  --gray-300: #e0e0e0;
+  --gray-400: #bdbdbd;
+  --gray-500: #9e9e9e;
+  --gray-600: #757575;
+  --gray-700: #616161;
+  --gray-800: #424242;
+  --gray-900: #212121;
+
+  --surface-ground: #ffffff;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --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);
+  --disabled-opacity: 0.4;
+  --mask-bg: #1e1e1e32;
+  --error-color: #ef4040;
+  --bg-selection: #f7966e;
+  --table-bg-color: #e7e7e7;
+  --tab-menu-link: #1c1c1c;
+  --paginator-bg: #ffffff;
+  --paginator-border: none;
+  --paginator-element-hover-bg: #e9ecef;
+  --table-header-cell-hover-bg: #e9ecef;
+  --table-cell-highlight-hover-bg: #e9ecef;
+  --table-header-font-weight: 600;
+  --table-cell-font-weight: 500;
+  --table-header-cell-bg: #fcfdfd;
+  --table-header-cell-highlight-bg: #f8f9fa;
+  --table-body-row-even-bg: #ffffff;
+  --table-body-row-hover-bg: #f7f7f7;
+  --table-footer-border: #e9ecef;
+  --table-footer-border-width: 0 0 1px 0;
+  --table-footer-bg: #f8f9fa;
+  --plain-button-active-bg-color: #1e1e1e33;
+  --secondary-button-bg: #1e1e1e;
+  --secondary-button-text-color: #f4f4f4;
+  --secondary-button-text-hover-bg: #404040;
+  --secondary-button-text-hover-color: #f4f4f4;
+  --secondary-button-hover-border-color: #323232;
+  --secondary-button-active-bg: #303030;
+  --secondary-button-text-active-color: #ffffff;
+  --secondary-button-active-border-color: #303030;
+  --warning-button-text-color: #1c1c1c;
+  --help-button-hover-border-color: #0953a6;
+  --help-button-active: #0953a6;
+  --toggle-button-bg: #ffffff;
+  --toggle-button-border: #ced4da;
+  --toggle-button-hover-bg: #e9ecef;
+  --input-bg: #f4f4f4;
+  --input-placeholder-text-color: #979797;
+  --input-filled-bg: #f4f4f4;
+  --input-filled-hover-bg: #eaeaea;
+  --input-filled-focus-bg: #f8f9fa;
+  --input-group-bg: #eaeaea;
+  --input-list-bg: #ffffff;
+  --input-list-header-bg: #f8f9fa;
+  --input-overlay-shadow: 0px 0px 0px 1px #e7e7e7,
+    0px 1px 4px 0px rgba(0, 0, 0, 0.04);
+  --checkbox-border: var(--surface-border);
+  --calendar-bg: #ffffff;
+  --calendar-cell-date-today-bg: #1e1e1e;
+  --calendar-cell-date-today-text-color: #f4f4f4;
+  --input-switch-slider-off-bg: #ced4da;
+  --input-switch-slider-off-hover-bg: #c3cad2;
+  --input-switch-handle-on-bg: #1e1e1e;
+  --file-upload-file-border: 1px solid #c3cad2;
+  --editor-toolbar-border: 1px solid #dee2e6;
+  --action-icon-border: #e7e7e7;
+  --action-icon-color: $textColor;
+  --action-icon-hover-bg: #1e1e1e04;
+  --action-icon-hover-border-color: 1px solid #e7e7e7;
+  --panel-content-bg: #ffffff;
+  --panel-header-hover-border-color: #dee2e6;
+  --panel-header-text-hover-color: var(--text-color);
+  --card-shadow: 0px 0px 0px 1px #e7e7e7;
+  --splitter-gutter-handle-bg: #e7e7e7;
+  --overlay-container-shadow: 0px 0px 0px 1px #e7e7e7,
+    0px 5px 10px 0px rgba(0, 0, 0, 0.05);
+  --dialog-header-bg: #ffffff;
+  --tooltip-text-color: #ffffff;
+  --badge-font-weight: 500;
+  --tag-padding: 0.25rem 0.4rem;
+  --progress-bar-value-bg: #f3652b;
+  --progress-spinner-stroke-color: $errorMessageTextColor;
+  --avatar-bg: #e7e7e7;
+  --chip-bg: #dedede;
+  --chip-focus-bg: #dee2e6;
+  --skeleton-bg: #eaeaea;
+  --skeleton-animation-bg: #d6d6d6;
+  --toast-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.08), 0px 0px 0px 1px #e7e7e7;
+  --success-message-bg: #1982361f;
+  --success-message-icon-color: #198236;
+  --error-message--bg: #ef40401f;
+  --error-message-icon-color: #ef4040;
+  --steps-item-bg: #ffffff00;
+  --steps-item-border: 1px solid #e7e7e7;
+  --menu-bg: #ffffff;
+  --menu-border: 1px solid #e7e7e7;
+  --submenu-header-font-weight: 400;
+  --overlay-menu-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04),
+    0px 0px 0px 1px #e7e7e7;
+  --horizontal-menu-bg: #f8f9fa;
+}

package/src/azion/custom/_focus.scss

@@ -0,0 +1,5 @@
+a {
+  &:focus-visible {
+    @include focused();
+  }
+}

package/src/azion/custom/_scrollbehavior.scss

@@ -0,0 +1,6 @@
+/**
+ * Enable smooth scrolling on the whole document
+ */
+ html {
+	scroll-behavior: smooth;
+}

package/src/azion/custom/_selection.scss

@@ -0,0 +1,4 @@
+::selection {
+  color: var(--primary-color-text);
+  background-color: var(--bg-selection);
+}

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

@@ -0,0 +1,53 @@
+// Custom badge
+.p-badge {
+  border: 1px solid var(--surface-border) !important;
+  border-radius: $borderRadius;
+  color: $badgeTextColor;
+  font-size: 0.75rem !important;
+  font-weight: 600 !important;
+  min-width: $badgeMinWidth;
+  height: $badgeHeight;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+
+  &.p-badge-secondary {
+    background-color: $secondaryButtonBg;
+    color: $secondaryButtonTextColor;
+  }
+
+  &.p-badge-success {
+    background-color: $successButtonBg;
+    color: $successButtonTextColor;
+  }
+
+  &.p-badge-info {
+    background-color: $infoButtonBg;
+    color: $infoButtonTextColor;
+  }
+
+  &.p-badge-warning {
+    background-color: $warningButtonBg;
+    color: $warningButtonTextColor;
+  }
+
+  &.p-badge-danger {
+    background-color: $dangerButtonBg;
+    color: $dangerButtonTextColor;
+    border: none !important;
+  }
+
+  &.p-badge-lg {
+    font-size: 1.5 * $badgeFontSize;
+    min-width: 1.5 * $badgeMinWidth;
+    height: 1.5 * $badgeHeight;
+    line-height: 1.5 * $badgeHeight;
+  }
+
+  &.p-badge-xl {
+    font-size: 2 * $badgeFontSize;
+    min-width: 2 * $badgeMinWidth;
+    height: 2 * $badgeHeight;
+    line-height: 2 * $badgeHeight;
+  }
+}