Better variable helper flow

libs/_internal/styles/src/lib/variable.helper.ts

@@ -34,7 +34,7 @@ export class VariableHelper {
     return this;
   }
 
-  toCss() {
+  public toCss() {
     if (!this.property) {
       return css`
         ${unsafeCSS(this.buildVariableName())}
@@ -61,4 +61,21 @@ export class VariableHelper {
       this.defaultValue
     })`;
   }
+
+  // static builders for convencience
+  public static from(): VariableHelper {
+    return new VariableHelper();
+  }
+
+  public static fromDefaultValue(value: string | CSSResult) {
+    return VariableHelper.from().withDefaultValue(value);
+  }
+
+  public static fromProperty(property: string) {
+    return VariableHelper.from().withProperty(property);
+  }
+
+  public static fromVariableName(name: string) {
+    return VariableHelper.from().withVariableName(name);
+  }
 }

libs/accordion/src/lib/styles/header.styles.ts

@@ -1,9 +1,8 @@
 import { VariableHelper } from '@hijlkema-codes/internal/z-styles';
 import { css } from 'lit';
 
-const iconColor = new VariableHelper()
+const iconColor = VariableHelper.fromVariableName('color')
   .withGroupModifier('accordion', 'icon')
-  .withVariableName('color')
   .withDefaultValue('currentColor')
   .toCss();
 

libs/accordion/src/lib/styles/variables.styles.ts

@@ -3,42 +3,35 @@ import { css } from 'lit';
 
 export const hostVariables = css`
   :host {
-    ${new VariableHelper()
-      .withProperty('--_padding-inline')
+    ${VariableHelper.fromProperty('--_padding-inline')
       .withVariableName('padding-inline')
       .withGroupModifier('accordion')
       .withDefaultValue('1.25rem')
       .toCss()}
 
-    ${new VariableHelper()
-      .withProperty('--_header--border-width')
+    ${VariableHelper.fromProperty('--_header--border-width')
       .withGroupModifier('accordion', 'header')
       .withVariableName('border-width')
       .withDefaultValue('0 0 1px 0')
       .toCss()}
 
-      ${new VariableHelper()
-      .withProperty('--_header--border-color')
+      ${VariableHelper.fromProperty('--_header--border-color')
       .withGroupModifier('accordion', 'header')
       .withVariableName('border-color')
       .withDefaultValue('hsl(0, 0, 2%)')
       .toCss()}
 
-      ${new VariableHelper()
-      .withProperty('--_body--padding-block')
+      ${VariableHelper.fromProperty('--_body--padding-block')
       .withGroupModifier('accordion', 'body')
       .withVariableName('padding-block')
       .withDefaultValue('1rem')
       .toCss()}
-      ${new VariableHelper()
-      .withProperty('--_body--padding-inline')
+      
+      ${VariableHelper.fromProperty('--_body--padding-inline')
       .withGroupModifier('accordion', 'body')
       .withVariableName('padding-inline')
       .withDefaultValue(
-        new VariableHelper()
-          .asPrivate()
-          .withVariableName('padding-inline')
-          .toCss()
+        VariableHelper.fromVariableName('padding-inline').asPrivate().toCss()
       )
       .toCss()}
   }