azion-theme 1.15.3 → 1.16.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [1.16.0](https://github.com/aziontech/azion-theme/compare/v1.15.3...v1.16.0) (2025-11-06)
+
+### Features
+
+* [ENG-35795] Surfaces Theme Tokens Adjustments ([#61](https://github.com/aziontech/azion-theme/issues/61)) ([4cfbdc6](https://github.com/aziontech/azion-theme/commit/4cfbdc65f8fca7d7befce26d44db9a723fe38f07))
+
 ## [1.15.3](https://github.com/aziontech/azion-theme/compare/v1.15.2...v1.15.3) (2025-11-05)
 
 ### Bug Fixes

package/package.json

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

package/src/azion/_variables.scss

@@ -67,7 +67,7 @@ $colors: (
   --primary-dark-color: #hsla(0, 0%, 96%, 0.5);
   --primary-darker-color: #f4f4f4;
   --primary-text-color: #f4f4f4;
-  --overlay-content-bg: #171717;
+  --overlay-content-bg: var(--surface-section);
   --highlight-bg: #f4f4f410;
   --degrade-primary: 255, 255, 255;
   --degrade-secondary: 0, 0, 0;
@@ -79,6 +79,17 @@ $colors: (
   --text-color-link-hover: #93c5fd;
   --text-color-empty: var(--surface-800);
 
+  --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-0: #0a0a0a;
   --surface-50: #111111;
   --surface-100: #171717;
@@ -91,25 +102,13 @@ $colors: (
   --surface-800: #5e5e5e;
   --surface-900: #7d7d7d;
 
-  --surface-code-highlight: #5e5e5e50;
-
-  --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-ground: var(--surface-0);
+  --surface-section: var(--surface-50);
+  --surface-card: var(--surface-100);
   --surface-overlay: #ffffff;
-  --surface-border: #282828;
+  --surface-border: var(--surface-300);
   --surface-hover: #f5f5f516;
+  --surface-code-highlight: #5e5e5e50;
 
   --content-padding: 1.25rem;
   --inline-spacing: 0.5rem;
@@ -125,21 +124,22 @@ $colors: (
   --error-color: #f26464;
   --mask-bg: #1c1c1c80;
   --bg-selection: #fab99e;
-  --table-bg-color: #1c1c1c;
+  --table-bg-color: var(--surface-0);
+  --table-header-color: var(--surface-50);
   --highlight-tabview-nav-link: #1e1e1e;
-  --bg-tabview-nav-link: var(--surface-section);
+  --bg-tabview-nav-link: var(--surface-100);
   --highlight-tab-menu-link: #1c1c1c;
-  --paginator-bg: #1c1c1c;
-  --paginator-border: #282828;
+  --paginator-bg: var(--surface-50);
+  --paginator-border: var(--surface-border);
   --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(244, 244, 244, 0.16);
-  --table-body-row-even-bg: #212121;
-  --table-body-row-hover-bg: #353535;
+  --table-header-cell-hover-bg: var(--surface-200);
+  --table-header-cell-bg: var(--surface-50);
+  --table-header-cell-highlight-bg: var(--surface-50);
+  --table-cell-highlight-hover-bg: var(--surface-200);
+  --table-body-row-even-bg: var(--surface-100);
+  --table-body-row-hover-bg: var(--surface-200);
   --table-footer-cell-bg: #1c1c1c;
   --table-footer-border: var(--surface-border);
   --table-footer-border-width: none;
@@ -162,7 +162,8 @@ $colors: (
   --toggle-button-bg: #1e1e1e;
   --toggle-button-border: #3e3e3e;
   --toggle-button-hover-bg: #282828;
-  --input-bg: #292929;
+  --input-bg: var(--surface-300);
+  --input-border: var(--surface-500);
   --input-placeholder-text-color: #666;
   --input-filled-bg: #181818;
   --input-filled-hover-bg: #2b2b2b;
@@ -185,17 +186,17 @@ $colors: (
   --action-icon-color: $textSecondaryColor;
   --action-icon-hover-bg: #282828;
   --action-icon-hover-border-color: 1px solid #3e3e3e;
-  --panel-content-bg: #171717;
+  --panel-content-bg: var(--surface-section);
   --panel-header-hover-border-color: #171717;
   --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;
-  --splitter-gutter-handle-bg: #3e3e3e;
+  --splitter-gutter-handle-bg: var(--surface-100);
   --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;
+  --dialog-header-bg: var(--surface-section);
   --tooltip-text-color: #1c1c1c;
   --badge-font-weight: 400;
   --tag-padding: 0.25rem 0.5rem;
@@ -253,12 +254,22 @@ $colors: (
   --primary-darker-color: #000;
   --primary-text-color: #f4f4f4;
 
-  --overlay-content-bg: #ffffff;
-  --highlight-bg: #2b2b2b10;
+  --overlay-content-bg: var(--surface-section);
+  --highlight-bg: var(--surface-100);
 
   --primary-color-text: #f4f4f4;
   --primary-text-color: #f4f4f4;
-  --overlay-content-bg: #ffffff;
+
+  --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-0: #ffffff;
   --surface-50: #f9fafb;
@@ -272,25 +283,13 @@ $colors: (
   --surface-800: #b5b5b5;
   --surface-900: #a7a7a7;
 
-  --surface-code-highlight: #b5b5b550;
-
-  --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-ground: var(--surface-50);
+  --surface-section: var(--surface-0);
+  --surface-card: var(--surface-0);
+  --surface-overlay: var(--surface-0);
+  --surface-border: var(--surface-200);
   --surface-hover: #3b3b3b16;
+  --surface-code-highlight: #b5b5b550;
 
   --maskbg: #1e1e1e32;
   --highlight-text-color: none;
@@ -303,17 +302,18 @@ $colors: (
   --mask-bg: #1e1e1e32;
   --error-color: #ef4040;
   --bg-selection: #f7966e;
-  --table-bg-color: #e7e7e7;
+  --table-bg-color: var(--surface-50);
+  --table-header-color: var(--surface-0);
   --highlight-tab-menu-link: #f4f4f4;
-  --paginator-bg: #ffffff;
+  --paginator-bg: var(--surface-0);
   --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-header-cell-bg: var(--surface-50);
+  --table-header-cell-highlight-bg: var(--surface-100);
   --table-body-row-even-bg: #ffffff;
   --table-body-row-hover-bg: #f7f7f7;
   --table-footer-border: #e9ecef;
@@ -334,7 +334,8 @@ $colors: (
   --toggle-button-bg: #ffffff;
   --toggle-button-border: #ced4da;
   --toggle-button-hover-bg: #e9ecef;
-  --input-bg: #f4f4f4;
+  --input-bg: var(--surface-100);
+  --input-border: var(--surface-300);
   --input-placeholder-text-color: #979797;
   --input-filled-bg: #f4f4f4;
   --input-filled-hover-bg: #eaeaea;
@@ -357,14 +358,14 @@ $colors: (
   --action-icon-color: $textColor;
   --action-icon-hover-bg: #1e1e1e04;
   --action-icon-hover-border-color: 1px solid #e7e7e7;
-  --panel-content-bg: #ffffff;
+  --panel-content-bg: var(--surface-section);
   --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;
+  --dialog-header-bg: var(--surface-section);
   --tooltip-text-color: #ffffff;
   --badge-font-weight: 500;
   --tag-padding: 0.25rem 0.4rem;

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

@@ -4,6 +4,10 @@
   font-size: 0.875rem !important;
   text-wrap: nowrap !important;
 
+  .p-datatable-tbody > tr {
+    background: var(--table-body-row-even-bg);
+  }
+
   .p-paginator {
     border-width: 0px !important;
     border-top-left-radius: 0 !important;
@@ -13,6 +17,7 @@
   .p-datatable-header {
     border-top-right-radius: $borderRadius;
     border-top-left-radius: $borderRadius;
+    background: var(--table-header-color);
   }
 
   .p-datatable-tbody > .p-datatable-emptymessage:hover {
@@ -21,8 +26,8 @@
 
   .p-datatable-tbody {
     .p-frozen-column {
-      background: var(--surface-section);
-      transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s !important;
+      background: var(--table-body-row-bg);
+      transition: background-color 0.2s !important;
     }
   }
 

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

@@ -9,6 +9,9 @@
       font-size: 0.875rem !important;
       font-weight: 500 !important;
     }
+    .p-highlight {
+      opacity: 1;
+    }
     &.p-focus {
       border-color: none !important;
       outline: none !important;

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

@@ -1,6 +1,7 @@
 // Custom Header Sidebar
 .p-sidebar {
   .p-sidebar-header {
+    background: var(--surface-section);
     justify-content: space-between;
     font-size: 1.25rem !important;
     height: 3.5rem !important;

package/src/azion/variables/_data.scss

@@ -148,7 +148,7 @@ $tableSortableColumnBadgeSize: 1.143rem;
 
 /// Background of a table body row
 /// @group data
-$tableBodyRowBg: var(--surface-ground);
+$tableBodyRowBg: var(--table-bg-color);
 
 /// Text color of a table body row
 /// @group data

package/src/azion/variables/_form.scss

@@ -20,7 +20,7 @@ $inputIconColor: $textColor;
 
 /// Border of an input field
 /// @group form
-$inputBorder: 1px solid var(--surface-border);
+$inputBorder: 1px solid var(--input-border);
 
 /// Border of an input field in hover state
 /// @group form

package/src/tokens/colors-surfaces.ts

@@ -0,0 +1,93 @@
+/**
+ * SURFACE COLORS TOKENS
+ *
+ * Surface color tokens for both light and dark themes.
+ * These tokens are used across the application to maintain consistency.
+ */
+
+// Helper function to create rgba colors from hex
+const withAlpha = (hexColor: string, alpha: number) => {
+  // Convert hex to RGB first
+  let r = 0, g = 0, b = 0;
+  
+  // 3 digits
+  if (hexColor.length === 4) {
+    r = parseInt(hexColor[1] + hexColor[1], 16);
+    g = parseInt(hexColor[2] + hexColor[2], 16);
+    b = parseInt(hexColor[3] + hexColor[3], 16);
+  } 
+  // 6 digits
+  else if (hexColor.length === 7) {
+    r = parseInt(hexColor.substring(1, 3), 16);
+    g = parseInt(hexColor.substring(3, 5), 16);
+    b = parseInt(hexColor.substring(5, 7), 16);
+  }
+  
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+// Base surface colors
+export const surfaceColors = {
+  // Light Theme
+  light: {
+    // Surface scale - these are the base values that others reference
+    surface0: '#ffffff',
+    surface50: '#f9fafb',
+    surface100: '#f4f4f4',
+    surface200: '#eeeeee',
+    surface300: '#e8e8e8',
+    surface400: '#e3e3e3',
+    surface500: '#dddddd',
+    surface600: '#d3d3d3',
+    surface700: '#c9c9c9',
+    surface800: '#b5b5b5',
+    surface900: '#a7a7a7',
+
+    // Semantic surfaces - all reference the scale values
+    surfaceGround: 'var(--surface-50, #f9fafb)',
+    surfaceSection: 'var(--surface-0, #ffffff)',
+    surfaceCard: 'var(--surface-0, #ffffff)',
+    surfaceOverlay: 'var(--surface-0, #ffffff)',
+    surfaceBorder: 'var(--surface-100, #f4f4f4)',
+    surfaceHover: withAlpha('var(--surface-900, #a7a7a7)', 0.04), // Using surface-900 with 4% opacity
+    
+    // Additional surface states
+    surfaceCodeHighlight: 'var(--surface-50, #f9fafb)',
+    surfaceDropdownHover: withAlpha('var(--surface-900, #a7a7a7)', 0.04),
+    surfaceHighlightFocus: withAlpha('var(--surface-900, #a7a7a7)', 0.04),
+    surfaceTabviewNavLink: withAlpha('var(--surface-900, #a7a7a7)', 0.04)
+  },
+  
+  // Dark Theme
+  dark: {
+    // Surface scale - base values
+    surface0: '#0a0a0a',
+    surface50: '#111111',
+    surface100: '#171717',
+    surface200: '#222222',
+    surface300: '#282828',
+    surface400: '#2e2e2e',
+    surface500: '#353535',
+    surface600: '#3e3e3e',
+    surface700: '#4a4a4a',
+    surface800: '#5e5e5e',
+    surface900: '#7d7d7d',
+
+    // Semantic surfaces - all reference the scale values
+    surfaceGround: 'var(--surface-0, #0a0a0a)',
+    surfaceSection: 'var(--surface-100, #171717)',
+    surfaceCard: 'var(--surface-200, #222222)',
+    surfaceOverlay: 'var(--surface-0, #0a0a0a)',
+    surfaceBorder: 'var(--surface-300, #282828)',
+    surfaceHover: withAlpha('var(--surface-0, #f5f5f5)', 0.08), // Using surface-0 with 8% opacity
+    
+    // Additional surface states
+    surfaceCodeHighlight: withAlpha('var(--surface-900, #7d7d7d)', 0.5),
+    surfaceDropdownHover: withAlpha('var(--surface-0, #f5f5f5)', 0.08),
+    surfaceHighlightFocus: withAlpha('var(--surface-0, #f5f5f5)', 0.08),
+    surfaceTabviewNavLink: withAlpha('var(--surface-0, #f5f5f5)', 0.08)
+  }
+};
+
+// Export type for better TypeScript support
+export type SurfaceColors = typeof surfaceColors;