initial commit

Signed-off-by: Mitch Hijlkema <mitch@hijlkema.codes>

libs/_internal/styles/src/index.ts

@@ -0,0 +1,3 @@
+export * from './lib/normalize';
+
+export * from './lib/variable.helper';

libs/_internal/styles/src/lib/normalize.ts

@@ -0,0 +1,72 @@
+import { css } from 'lit';
+
+export const normalize = css`
+  blockquote,
+  dl,
+  dd,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  hr,
+  figure,
+  p,
+  pre {
+    margin: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  ol,
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+    vertical-align: middle;
+  }
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  *,
+  ::before,
+  ::after {
+    border-width: 0;
+    border-style: solid;
+    border-color: currentColor;
+  }
+
+  i,
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  :host {
+    display: block;
+  }
+`;

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

@@ -0,0 +1,64 @@
+import { CSSResult, css, unsafeCSS } from 'lit';
+
+export class VariableHelper {
+  private property: string | undefined;
+  private variableName: string | undefined;
+  private groupModifier: string | undefined;
+
+  private defaultValue: string | CSSResult = '/*! */';
+  private isPrivate = false;
+
+  public asPrivate(isPrivate = true) {
+    this.isPrivate = isPrivate;
+    return this;
+  }
+
+  public withDefaultValue(value: string | CSSResult) {
+    this.defaultValue = value;
+    return this;
+  }
+
+  public withProperty(property: string) {
+    this.property = property;
+    return this;
+  }
+
+  public withVariableName(name: string) {
+    this.variableName = name;
+    return this;
+  }
+
+  public withGroupModifier(modifier: string, ...modifiers: string[]) {
+    this.groupModifier = [modifier, ...modifiers].join('--');
+
+    return this;
+  }
+
+  toCss() {
+    if (!this.property) {
+      return css`
+        ${unsafeCSS(this.buildVariableName())}
+      `;
+    }
+
+    return css`
+      ${unsafeCSS(this.property)}: ${unsafeCSS(this.buildVariableName())};
+    `;
+  }
+
+  private buildVariableName() {
+    const variableName = [];
+
+    if (this.groupModifier) {
+      variableName.push(this.groupModifier);
+    }
+
+    if (this.variableName) {
+      variableName.push(this.variableName);
+    }
+
+    return `var(--${this.isPrivate ? '_' : ''}${variableName.join('--')}, ${
+      this.defaultValue
+    })`;
+  }
+}