Hijlkema.Codes/z-elements
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases Activity

Better variable helper flow

Browse Source
This commit is contained in:
Mitch Hijlkema
2023-08-24 14:11:30 +02:00
parent a6d98a9d84
commit 82561d8dc7
3 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
libs/_internal/styles/src/lib/variable.helper.ts
View File

@@ -34,7 +34,7 @@ export class VariableHelper {
return this; return this;
} }
toCss() { public toCss() {
if (!this.property) { if (!this.property) {
return css` return css`
${unsafeCSS(this.buildVariableName())} ${unsafeCSS(this.buildVariableName())}
@@ -61,4 +61,21 @@ export class VariableHelper {
this.defaultValue 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);
}
} }

3
libs/accordion/src/lib/styles/header.styles.ts
View File

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

21
libs/accordion/src/lib/styles/variables.styles.ts
View File

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