@acontplus/ng-components 3.0.1 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acontplus/ng-components",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Comprehensive Angular Material UI component library featuring dynamic Tabulator tables, theme toggle with dark mode, dialog wrappers, autocomplete components, cards, buttons, icons, input chips, spinners, directives, pipes, and SCSS styling utilities.",
   "peerDependencies": {
     "@acontplus/ui-kit": "^1.0.2",
@@ -25,6 +25,9 @@
       "types": "./types/acontplus-ng-components.d.ts",
       "default": "./fesm2022/acontplus-ng-components.mjs"
     },
+    "./global-variables": {
+      "sass": "./src/core/tokens/_global-variables.scss"
+    },
     "./prebuilt-themes/blue": {
       "sass": "./src/core/theming/prebuilt/blue.scss"
     },
@@ -106,7 +109,7 @@
   "homepage": "https://github.com/acontplus/acontplus-libs#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/acontplus/acontplus-libs.git"
+    "url": "https://github.com/acontplus/acontplus-libs.git"
   },
   "release": {
     "branches": [

package/src/_index.scss

@@ -21,6 +21,8 @@
   system-level-elevation, system-level-shape, system-level-motion, system-level-state, theme,
   theme-overrides, m2-theme;
 
+@forward './core/tokens/global-variables';
+@forward './core/style/breakpoints';
 @forward './core/theming/all-theme' show all-component-themes, all-component-bases;
 @forward './core/color/all-color' show all-component-colors;
 @forward './core/typography/all-typography' show all-component-typographies;

package/src/core/style/_breakpoints.scss

@@ -0,0 +1,63 @@
+@use 'sass:map';
+@use 'variables';
+
+/// Returns the minimum width value for a named breakpoint.
+///
+/// @param {String} $name - Breakpoint name (xsmall | small | medium | large | xlarge)
+/// @param {Map} $breakpoints [variables.$breakpoints] - Custom breakpoints map (optional)
+/// @return {Number} Width value in px
+@function bp($name, $breakpoints: variables.$breakpoints) {
+  $min: map.get($breakpoints, $name);
+
+  @return $min;
+}
+
+/// Applies styles when the viewport is **at least** the given breakpoint width (mobile-first).
+///
+/// @param {String} $name - Breakpoint name (xsmall | small | medium | large | xlarge)
+/// @param {Map} $breakpoints [variables.$breakpoints] - Custom breakpoints map (optional)
+///
+/// @example scss
+///   .my-element {
+///     font-size: 1rem;
+///
+///     @include breakpoints.bp-gt(medium) {
+///       font-size: 1.25rem;
+///     }
+///   }
+@mixin bp-gt($name, $breakpoints: variables.$breakpoints) {
+  $min: bp($name, $breakpoints);
+
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+/// Applies styles when the viewport is **at most** the given breakpoint width (max-width).
+///
+/// @param {String} $name - Breakpoint name (xsmall | small | medium | large | xlarge)
+/// @param {Map} $breakpoints [variables.$breakpoints] - Custom breakpoints map (optional)
+///
+/// @example scss
+///   .my-element {
+///     display: block;
+///
+///     @include breakpoints.bp-lt(small) {
+///       display: none;
+///     }
+///   }
+@mixin bp-lt($name, $breakpoints: variables.$breakpoints) {
+  $max: bp($name, $breakpoints) - 1px;
+
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}

package/src/core/style/_variables.scss

@@ -0,0 +1,9 @@
+// Breakpoint values used by the bp-gt and bp-lt mixins.
+// Override these defaults by passing a custom $breakpoints map to the mixins.
+$breakpoints: (
+  xsmall: 0,
+  small: 600px,
+  medium: 960px,
+  large: 1280px,
+  xlarge: 1920px,
+) !default;

package/src/core/theming/_all-theme.scss

@@ -29,14 +29,29 @@
 @mixin custom-component-overrides {
   @include mat.checkbox-overrides(
     (
+      selected-icon-color: var(--acp-theme-primary-color),
       selected-checkmark-color: white,
+      selected-focus-icon-color: var(--acp-theme-primary-color),
+      selected-hover-icon-color: var(--acp-theme-primary-color),
+      selected-focus-state-layer-color: var(--acp-theme-primary-color),
+      selected-hover-state-layer-color: var(--acp-theme-primary-color),
     )
   );
 
   @include mat.fab-overrides(
     (
-      container-color: var(--theme-primary-color),
+      container-color: var(--acp-theme-primary-color),
       foreground-color: white,
     )
   );
+
+  @include mat.radio-overrides(
+    (
+      selected-icon-color: var(--acp-theme-primary-color),
+      selected-focus-icon-color: var(--acp-theme-primary-color),
+      selected-hover-icon-color: var(--acp-theme-primary-color),
+      selected-pressed-icon-color: var(--acp-theme-primary-color),
+      checked-ripple-color: var(--acp-theme-primary-color),
+    )
+  );
 }

package/src/core/theming/prebuilt/aqua.scss

@@ -4,7 +4,7 @@
 @use '../../../core/theming/all-theme' as all-theme;
 
 .theme-aqua {
-  --theme-primary-color: #0074ba;
+  --acp-theme-primary-color: #0074ba;
 
   @include system.theme(
     (

package/src/core/theming/prebuilt/blue.scss

@@ -4,7 +4,7 @@
 @use '../../../core/theming/all-theme' as all-theme;
 
 .theme-blue {
-  --theme-primary-color: #1b84ff;
+  --acp-theme-primary-color: #1b84ff;
 
   @include system.theme(
     (

package/src/core/theming/prebuilt/cyan.scss

@@ -4,7 +4,7 @@
 @use '../../../core/theming/all-theme' as all-theme;
 
 .theme-cyan {
-  --theme-primary-color: #01c0c8;
+  --acp-theme-primary-color: #01c0c8;
 
   @include system.theme(
     (

package/src/core/theming/prebuilt/green.scss

@@ -4,7 +4,7 @@
 @use '../../../core/theming/all-theme' as all-theme;
 
 .theme-green {
-  --theme-primary-color: #0a7ea4;
+  --acp-theme-primary-color: #0a7ea4;
 
   @include system.theme(
     (

package/src/core/theming/prebuilt/orange.scss

@@ -4,7 +4,7 @@
 @use '../../../core/theming/all-theme' as all-theme;
 
 .theme-orange {
-  --theme-primary-color: #fa896b;
+  --acp-theme-primary-color: #fa896b;
 
   @include system.theme(
     (

package/src/core/theming/prebuilt/pink.scss

@@ -4,7 +4,7 @@
 @use '../../../core/theming/all-theme' as all-theme;
 
 .theme-pink {
-  --theme-primary-color: #d200d2;
+  --acp-theme-primary-color: #d200d2;
 
   @include system.theme(
     (

package/src/core/theming/prebuilt/purple.scss

@@ -4,7 +4,7 @@
 @use '../../../core/theming/all-theme' as all-theme;
 
 .theme-purple {
-  --theme-primary-color: #763ebd;
+  --acp-theme-primary-color: #763ebd;
 
   @include system.theme(
     (

package/src/core/theming/prebuilt/rose.scss

@@ -4,7 +4,7 @@
 @use '../../../core/theming/all-theme' as all-theme;
 
 .theme-rose {
-  --theme-primary-color: #e80074;
+  --acp-theme-primary-color: #e80074;
 
   @include system.theme(
     (

package/src/core/tokens/_global-variables.scss

@@ -0,0 +1,53 @@
+// Layout Variables for AcontPlus Applications
+// These variables can be used across different applications
+
+:root {
+  // Typography
+  --acp-body-font-family:
+    'Roboto', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande',
+    sans-serif;
+  --acp-code-font-family: 'Roboto Mono', monospace;
+
+  // Layout spacing
+  --acp-gutter: 1rem;
+  --acp-sidenav-width: 15rem;
+  --acp-sidenav-collapsed-width: 4rem;
+
+  // Background colors
+  --acp-body-background-color: var(--mat-sys-surface-container);
+
+  // Link colors
+  --acp-link-color: var(--mat-sys-primary);
+  --acp-link-hover-color: var(--mat-sys-primary);
+
+  // Code styling
+  --acp-code-border-color: light-dark(rgba(19, 28, 43, 0.08), rgba(218, 226, 249, 0.08));
+  --acp-code-background-color: light-dark(rgba(19, 28, 43, 0.04), rgba(218, 226, 249, 0.04));
+
+  // Header
+  --acp-header-background-color: var(--acp-theme-primary-color);
+
+  // User panel
+  --acp-user-panel-background-color: var(--mat-sys-surface-container);
+  --acp-user-panel-hover-background-color: var(--mat-sys-surface-variant);
+
+  // Side menu
+  --acp-sidemenu-heading-hover-background-color: var(--mat-sys-surface-container-highest);
+  --acp-sidemenu-active-heading-text-color: var(--mat-sys-primary);
+  --acp-sidemenu-active-heading-background-color: var(--mat-sys-primary-container);
+  --acp-sidemenu-active-heading-hover-background-color: var(--mat-sys-primary-container);
+  --acp-sidemenu-expanded-background-color: var(--mat-sys-surface-container);
+
+  // Top menu
+  --acp-topmenu-text-color: var(--mat-sys-on-background);
+  --acp-topmenu-background-color: var(--acp-header-background-color);
+  --acp-topmenu-item-active-background-color: var(--mat-sys-primary-container);
+  --acp-topmenu-dropdown-item-active-text-color: var(--mat-sys-primary);
+
+  // Material toolbar heights
+  --mat-toolbar-standard-height: 4rem;
+  --mat-toolbar-mobile-height: 3.5rem;
+
+  --acp-color-border: var(--mat-sys-outline-variant);
+  --acp-spacing: 0.25rem;
+}

package/src/lib/components/button/v2/button.scss

@@ -3,12 +3,12 @@
 .acp-primary {
   @include mat.button-overrides(
     (
-      filled-container-color: var(--theme-primary-color),
+      filled-container-color: var(--acp-theme-primary-color),
       filled-label-text-color: #ffffff,
-      outlined-label-text-color: var(--theme-primary-color),
-      protected-label-text-color: var(--theme-primary-color),
-      text-label-text-color: var(--theme-primary-color),
-      text-state-layer-color: var(--theme-primary-color),
+      outlined-label-text-color: var(--acp-theme-primary-color),
+      protected-label-text-color: var(--acp-theme-primary-color),
+      text-label-text-color: var(--acp-theme-primary-color),
+      text-state-layer-color: var(--acp-theme-primary-color),
     )
   );
 }
@@ -96,10 +96,10 @@
     (
       filled-container-color: #1f2937,
       filled-label-text-color: #ffffff,
-      outlined-label-text-color: #1f2937,
-      protected-label-text-color: #1f2937,
-      text-label-text-color: #1f2937,
-      text-state-layer-color: #1f2937,
+      outlined-label-text-color: light-dark(#1f2937, #ffffff),
+      protected-label-text-color: light-dark(#1f2937, #ffffff),
+      text-label-text-color: light-dark(#1f2937, #ffffff),
+      text-state-layer-color: light-dark(#1f2937, #ffffff),
     )
   );
 }
@@ -107,7 +107,7 @@
 [matIconButton].acp-primary {
   @include mat.icon-overrides(
     (
-      color: var(--theme-primary-color),
+      color: var(--acp-theme-primary-color),
     )
   );
 }
@@ -161,9 +161,165 @@
 }
 
 [matIconButton].acp-dark {
-  @include mat.icon-overrides(
+  @include mat.icon-overrides(());
+}
+
+[matFab].acp-primary {
+  @include mat.fab-overrides(
+    (
+      container-color: var(--acp-theme-primary-color),
+      foreground-color: #ffffff,
+      state-layer-color: #ffffff,
+    )
+  );
+}
+
+[matFab].acp-secondary {
+  @include mat.fab-overrides(
+    (
+      container-color: var(--mat-sys-secondary),
+      foreground-color: var(--mat-sys-on-secondary),
+      state-layer-color: var(--mat-sys-on-secondary),
+    )
+  );
+}
+
+[matFab].acp-accent {
+  @include mat.fab-overrides(
+    (
+      container-color: var(--mat-sys-tertiary),
+      foreground-color: var(--mat-sys-on-tertiary),
+      state-layer-color: var(--mat-sys-on-tertiary),
+    )
+  );
+}
+
+[matFab].acp-error {
+  @include mat.fab-overrides(
+    (
+      container-color: var(--mat-sys-error),
+      foreground-color: var(--mat-sys-on-error),
+      state-layer-color: var(--mat-sys-on-error),
+    )
+  );
+}
+
+[matFab].acp-success {
+  @include mat.fab-overrides(
+    (
+      container-color: #4caf50,
+      foreground-color: #ffffff,
+      state-layer-color: #ffffff,
+    )
+  );
+}
+
+[matFab].acp-warning {
+  @include mat.fab-overrides(
+    (
+      container-color: #f59e0b,
+      foreground-color: #ffffff,
+      state-layer-color: #ffffff,
+    )
+  );
+}
+
+[matFab].acp-info {
+  @include mat.fab-overrides(
+    (
+      container-color: #3b82f6,
+      foreground-color: #ffffff,
+      state-layer-color: #ffffff,
+    )
+  );
+}
+
+[matFab].acp-dark {
+  @include mat.fab-overrides(
+    (
+      container-color: #1f2937,
+      foreground-color: #ffffff,
+      state-layer-color: #ffffff,
+    )
+  );
+}
+
+[matMiniFab].acp-primary {
+  @include mat.fab-overrides(
+    (
+      small-container-color: var(--acp-theme-primary-color),
+      small-foreground-color: #ffffff,
+      small-state-layer-color: #ffffff,
+    )
+  );
+}
+
+[matMiniFab].acp-secondary {
+  @include mat.fab-overrides(
+    (
+      small-container-color: var(--mat-sys-secondary),
+      small-foreground-color: var(--mat-sys-on-secondary),
+      small-state-layer-color: var(--mat-sys-on-secondary),
+    )
+  );
+}
+
+[matMiniFab].acp-accent {
+  @include mat.fab-overrides(
+    (
+      small-container-color: var(--mat-sys-tertiary),
+      small-foreground-color: var(--mat-sys-on-tertiary),
+      small-state-layer-color: var(--mat-sys-on-tertiary),
+    )
+  );
+}
+
+[matMiniFab].acp-error {
+  @include mat.fab-overrides(
+    (
+      small-container-color: var(--mat-sys-error),
+      small-foreground-color: var(--mat-sys-on-error),
+      small-state-layer-color: var(--mat-sys-on-error),
+    )
+  );
+}
+
+[matMiniFab].acp-success {
+  @include mat.fab-overrides(
+    (
+      small-container-color: #4caf50,
+      small-foreground-color: #ffffff,
+      small-state-layer-color: #ffffff,
+    )
+  );
+}
+
+[matMiniFab].acp-warning {
+  @include mat.fab-overrides(
+    (
+      small-container-color: #f59e0b,
+      small-foreground-color: #ffffff,
+      small-state-layer-color: #ffffff,
+    )
+  );
+}
+
+[matMiniFab].acp-info {
+  @include mat.fab-overrides(
+    (
+      small-container-color: #3b82f6,
+      small-foreground-color: #ffffff,
+      small-state-layer-color: #ffffff,
+    )
+  );
+}
+
+[matMiniFab].acp-dark {
+  @include mat.fab-overrides(
     (
-      color: #1f2937,
+      small-container-color: #1f2937,
+      small-foreground-color: #ffffff,
+      small-state-layer-color: #ffffff,
     )
   );
 }
@@ -181,6 +337,10 @@
   --mat-icon-button-container-shape: 8px;
 }
 
+.acp-block {
+  width: 100%;
+}
+
 .acp-medium {
   @include mat.theme(
     (