Better variable helper flow

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()}
   }