@ng-zen/cli 20.3.0-next.2 → 20.3.0-next.3

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [20.3.0-next.3](https://github.com/kstepien3/ng-zen/compare/v20.3.0-next.2...v20.3.0-next.3) (2025-09-15)
+
+### 🐛 Bug Fixes
+
+* **avatar:** improve css variables ([#323](https://github.com/kstepien3/ng-zen/issues/323)) ([eef614a](https://github.com/kstepien3/ng-zen/commit/eef614a0e2060fe32f72e00809b66009ae24832f))
+* **input:** resolve problem with wrong variables ([#322](https://github.com/kstepien3/ng-zen/issues/322)) ([30f5d10](https://github.com/kstepien3/ng-zen/commit/30f5d10c4c559f01ed3445b77e174340b4f2fb6f))
+
+### 🛠️ Code Refactor
+
+* **button:** improve css variables ([#321](https://github.com/kstepien3/ng-zen/issues/321)) ([4ed1310](https://github.com/kstepien3/ng-zen/commit/4ed1310450dde749164c419ec6b5da0a4fbb98bc))
+* **checkbox:** improve css variables ([#317](https://github.com/kstepien3/ng-zen/issues/317)) ([bbe1437](https://github.com/kstepien3/ng-zen/commit/bbe143704163394a9c9ce446aa9d749a57f9c62c))
+* **divider:** improve css variables ([#316](https://github.com/kstepien3/ng-zen/issues/316)) ([7a19ce7](https://github.com/kstepien3/ng-zen/commit/7a19ce72db58e8d23a4786aae2787db6bcfdbf6d))
+
 ## [20.3.0-next.2](https://github.com/kstepien3/ng-zen/compare/v20.3.0-next.1...v20.3.0-next.2) (2025-09-11)
 
 ### 🛠️ Code Refactor

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "20.3.0-next.2",
+  "version": "20.3.0-next.3",
   "description": "A CLI tool for generating customizable, modern Angular UI components using schematics.",
   "license": "BSD-2-Clause",
   "private": false,

package/schematics/components/files/avatar/avatar.scss

@@ -1,20 +1,23 @@
-$size: var(--zen-avatar-size, 2rem);
-$bg-color: var(--zen-avatar-bg-color, hsl(0deg 0% 80%));
-$color: var(--zen-avatar-color, hsl(0deg 0% 20%));
-$font-size: var(--zen-avatar-font-size, small);
+:host {
+  --zen-avatar-size: 2rem;
+  --zen-avatar-bg-color: hsl(0deg 0% 80%);
+  --zen-avatar-color: hsl(0deg 0% 20%);
+  --zen-avatar-font-size: small;
+}
 
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
 :host {
+  height: var(--zen-avatar-size);
+  width: var(--zen-avatar-size);
   display: flex;
-  height: $size;
-  width: $size;
   border-radius: 50%;
   overflow: hidden;
   position: relative;
 
   // Content styles
-  background-color: $bg-color;
-  color: $color;
-  font-size: $font-size;
+  background-color: var(--zen-avatar-bg-color);
+  color: var(--zen-avatar-color);
+  font-size: var(--zen-avatar-font-size);
   justify-content: center;
   align-items: center;
   font-weight: bold;

package/schematics/components/files/button/button.scss

@@ -1,26 +1,31 @@
-$bg-color-hover: var(--zen-button-bg-color-hover, hsl(0deg 0% 20%));
-$bg-color: var(--zen-button-bg-color, hsl(0deg 0% 0%));
-$color: var(--zen-button-color, hsl(0deg 0% 100%));
-$padding: var(--zen-button-padding, 0.5rem 1rem);
-$shadow: var(--zen-button-shadow, 0 2px 4px hsl(0deg 0% 0% / 10%));
+// Globals
 $transition-duration: var(--zen-transition-duration, 0.4s);
 $outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
 
 :host {
+  --zen-button-padding: 0.5rem 1rem;
+  --zen-button-bg-color: hsl(0deg 0% 0%);
+  --zen-button-bg-color-hover: hsl(0deg 0% 20%);
+  --zen-button-color: hsl(0deg 0% 100%);
+  --zen-button-shadow: 0 2px 4px hsl(0deg 0% 0% / 10%);
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
+:host {
+  padding: var(--zen-button-padding);
+  background-color: var(--zen-button-bg-color);
+  color: var(--zen-button-color);
+  box-shadow: var(--zen-button-shadow);
   display: inline-block;
   font-size: 14px;
   font-weight: bold;
   text-align: center;
   cursor: pointer;
   border: none;
-  padding: $padding;
   border-radius: 99999px;
   transition-property: background-color, opacity;
   transition-duration: $transition-duration;
   transition-timing-function: ease;
-  background-color: $bg-color;
-  color: $color;
-  box-shadow: $shadow;
   text-decoration: none;
   overflow: hidden;
   position: relative;
@@ -28,7 +33,7 @@ $outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
 
 /* Hover state */
 :host:hover {
-  background-color: $bg-color-hover;
+  background-color: var(--zen-button-bg-color-hover);
 }
 
 /* Focus state */

package/schematics/components/files/checkbox/checkbox.scss

@@ -1,18 +1,17 @@
-// Component Variables
-$size: var(--zen-checkbox-size, 16px);
-$border-radius: var(--zen-checkbox-border-radius, 6px);
-$focus-shadow: var(--zen-checkbox-focus-shadow, 0 1px 4px hsl(0deg 0% 60% / 20%) inset);
-
-// Color Palette
-$appearance: var(--zen-checkbox-appearance, hsl(0deg 0% 10%));
-$disabled-opacity: var(--zen-checkbox-disabled-opacity, 0.6);
-$border: var(--zen-checkbox-border, 1px solid hsl(0deg 0% 80%));
+// Globals
 $error: var(--zen-error, hsl(0deg 70% 50%));
+$focus-shadow: var(--zen-focus-shadow, 0 1px 4px hsl(0deg 0% 60% / 20%) inset);
 $outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
-
-// Animations
 $transition-duration: var(--zen-transition-duration, 0.2s);
 
+:host {
+  --zen-checkbox-size: 1rem;
+  --zen-checkbox-border-radius: 0.375rem; // 6px
+  --zen-checkbox-appearance: hsl(0deg 0% 10%);
+  --zen-checkbox-disabled-opacity: 0.6;
+  --zen-checkbox-border: 1px solid hsl(0deg 0% 80%);
+}
+
 input {
   position: absolute;
   cursor: pointer;
@@ -25,13 +24,14 @@ input {
   left: 0;
 }
 
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
 :host {
+  border: var(--zen-checkbox-border);
+  border-radius: var(--zen-checkbox-border-radius);
+  height: var(--zen-checkbox-size);
+  width: var(--zen-checkbox-size);
   background-color: white;
   cursor: pointer;
-  border: $border;
-  border-radius: $border-radius;
-  height: $size;
-  width: $size;
   position: relative;
   transition:
     background-color ease,
@@ -42,28 +42,28 @@ input {
   display: grid;
   place-items: center;
   font-size: small;
-}
 
-:host:has(input:checked) {
-  color: white;
-  background-color: $appearance;
-  border-color: $appearance;
-}
+  &:has(input:checked) {
+    color: white;
+    background-color: var(--zen-checkbox-appearance);
+    border-color: var(--zen-checkbox-appearance);
+  }
 
-:host:has(input[type='checkbox']:disabled) {
-  opacity: $disabled-opacity;
+  &:has(input[type='checkbox']:disabled) {
+    opacity: var(--zen-checkbox-disabled-opacity);
 
-  &,
-  input {
-    cursor: not-allowed;
+    &,
+    input {
+      cursor: not-allowed;
+    }
   }
-}
 
-:host:has(input:focus-visible) {
-  outline: $outline;
-  box-shadow: $focus-shadow;
-}
+  &:has(input:focus-visible) {
+    outline: $outline;
+    box-shadow: $focus-shadow;
+  }
 
-:host:has(input:user-invalid) {
-  border-color: $error;
+  &:has(input:user-invalid) {
+    border-color: $error;
+  }
 }

package/schematics/components/files/checkbox/checkbox.ts

@@ -20,9 +20,8 @@ import { ZenFormControl, ZenFormControlProvider } from '../form-control';
  *
  * ```css
  * :root {
- *  --zen-checkbox-size: 16px;
- *  --zen-checkbox-border-radius: 6px;
- *  --zen-checkbox-focus-shadow: 0 1px 4px hsl(0deg 0% 60% / 20%) inset;
+ *  --zen-checkbox-size: 1rem;
+ *  --zen-checkbox-border-radius: 0.375rem;
  *  --zen-checkbox-appearance: hsl(0deg 0% 10%);
  *  --zen-checkbox-disabled-opacity: 0.6;
  *  --zen-checkbox-border: 1px solid hsl(0deg 0% 80%);

package/schematics/components/files/divider/divider.scss

@@ -1,15 +1,18 @@
-$appearance: var(--zen-divider-appearance, hsl(0deg 0% 60%));
-$type: var(--zen-divider-type, solid);
-$align-offset: var(--zen-divider-align-offset, 25%);
-$gap: var(--zen-divider-gap, 0.25rem);
-$thickness: var(--zen-divider-thickness, 1px);
+:host {
+  --zen-divider-appearance: hsl(0deg 0% 60%);
+  --zen-divider-type: solid;
+  --zen-divider-align-offset: 25%;
+  --zen-divider-gap: 0.25rem;
+  --zen-divider-thickness: 1px;
+}
 
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
 :host {
+  color: var(--zen-divider-appearance);
+  gap: var(--zen-divider-gap);
   width: 100%;
   display: flex;
   align-items: center;
-  gap: $gap;
-  color: $appearance;
 
   &::before,
   &::after {
@@ -17,12 +20,12 @@ $thickness: var(--zen-divider-thickness, 1px);
     display: block;
     width: 100%;
     height: 0;
-    border-color: $appearance;
-    border-style: $type;
-    border-width: #{$thickness} 0 0;
+    border-color: var(--zen-divider-appearance);
+    border-style: var(--zen-divider-type);
+    border-width: var(--zen-divider-thickness) 0 0;
   }
 
-  &:not(.has-content) {
+  &:empty {
     gap: 0;
 
     &::after {
@@ -32,7 +35,7 @@ $thickness: var(--zen-divider-thickness, 1px);
 
   &.zen-align-start::before,
   &.zen-align-end::after {
-    width: $align-offset;
+    width: var(--zen-divider-align-offset);
   }
 }
 
@@ -47,11 +50,11 @@ $thickness: var(--zen-divider-thickness, 1px);
     display: block;
     width: unset;
     height: 100%;
-    border-width: 0 #{$thickness} 0 0;
+    border-width: 0 var(--zen-divider-thickness) 0 0;
   }
 
   &.zen-align-start::before,
   &.zen-align-end::after {
-    height: $align-offset;
+    height: var(--zen-divider-align-offset);
   }
 }

package/schematics/components/files/divider/divider.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 /**
  * ZenDivider is a reusable divider component that provides a simple way to
@@ -38,21 +38,10 @@ import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input
   styleUrl: './divider.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
-    '[class.has-content]': 'hasContent()',
     '[class]': '"zen-align-"+align()',
   },
 })
 export class ZenDivider {
   /** Controls the alignment of content within the divider. */
   readonly align = input<'start' | 'end' | 'center'>('center');
-
-  /**
-   * Computed property that determines if the divider contains any content.
-   * Used to apply appropriate styling when content is present.
-   */
-  protected readonly hasContent = computed(() => {
-    return this.elementRef.nativeElement.childNodes.length > 0;
-  });
-
-  private readonly elementRef = inject(ElementRef);
 }

package/schematics/components/files/input/input.scss

@@ -20,12 +20,12 @@ input {
   }
 
   &:focus-visible {
-    outline: var(--zen-outline);
+    outline: $outline;
     box-shadow: var(--zen-input-focus-shadow);
   }
 
   &:user-invalid {
-    border-color: var(--zen-error);
+    border-color: $error;
   }
 
   &::placeholder {