initial commit

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

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

@@ -0,0 +1,13 @@
+import { css } from 'lit';
+
+export const bodyStyles = css`
+  div {
+    padding-inline: var(--_body--padding-inline);
+    padding-block: var(--_body--padding-block);
+    display: none;
+  }
+
+  :host([open]) div {
+    display: block;
+  }
+`;

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

@@ -0,0 +1,142 @@
+import { VariableHelper } from '@hijlkema-codes/internal/z-styles';
+import { css } from 'lit';
+
+const iconColor = new VariableHelper()
+  .withGroupModifier('accordion', 'icon')
+  .withVariableName('color')
+  .withDefaultValue('currentColor')
+  .toCss();
+
+export const headerStyles = css`
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    padding-inline: var(--_padding-inline);
+    border-width: var(--_header--border-width);
+    border-style: solid;
+    border-color: var(--_header--border-color);
+  }
+`;
+
+export const chevronStyles = css`
+  .o-icon__chevron-down {
+    width: 1rem;
+    height: 1rem;
+    display: block;
+    position: relative;
+  }
+
+  .o-icon__chevron-down::before,
+  .o-icon__chevron-down::after {
+    content: '';
+    background-color: ${iconColor};
+    position: absolute;
+    top: 50%;
+    height: 1px;
+    width: 50%;
+    border: 1px solid ${iconColor};
+    transition: transform 0.3s ease-out;
+  }
+
+  .o-icon__chevron-down::before {
+    transform: translateY(-50%)
+      rotate(calc(var(--_rotation-displacement, 1) * 45deg));
+    left: 0;
+  }
+
+  .o-icon__chevron-down::after {
+    transform: translateY(-50%)
+      rotate(calc(var(--_rotation-displacement, 1) * -45deg));
+    right: 0;
+  }
+
+  :host([open]) .o-icon__chevron-down {
+    --_rotation-displacement: -1;
+  }
+
+  :host([open]) .o-icon__chevron-down::before,
+  :host([open]) .o-icon__chevron-down::after {
+    transition-timing-function: ease-in;
+  }
+`;
+
+export const plustoMinusStyles = css`
+  .o-icon__plus-to-minus {
+    width: 1rem;
+    height: 1rem;
+    display: block;
+    position: relative;
+  }
+
+  .o-icon__plus-to-minus::before,
+  .o-icon__plus-to-minus::after {
+    content: '';
+    background-color: ${iconColor};
+    position: absolute;
+    top: 50%;
+    height: 1px;
+    width: 100%;
+    border: 1px solid ${iconColor};
+    transition: transform 0.3s ease-out;
+  }
+
+  .o-icon__plus-to-minus::before {
+    transform: translateY(-50%)
+      rotate(calc(var(--_rotation-displacement, 1) * 90deg));
+  }
+
+  .o-icon__plus-to-minus::after {
+    transform: translateY(-50%);
+  }
+
+  :host([open]) .o-icon__plus-to-minus {
+    --_rotation-displacement: 2;
+  }
+
+  :host([open]) .o-icon__plus-to-minus::before,
+  :host([open]) .o-icon__plus-to-minus::after {
+    transition-timing-function: ease-in;
+  }
+`;
+
+export const plusToCrossStyles = css`
+  .o-icon__plus-to-cross {
+    width: 1rem;
+    height: 1rem;
+    display: block;
+    position: relative;
+  }
+
+  .o-icon__plus-to-cross::before,
+  .o-icon__plus-to-cross::after {
+    content: '';
+    background-color: ${iconColor};
+    position: absolute;
+    top: 50%;
+    height: 1px;
+    width: 100%;
+    border: 1px solid ${iconColor};
+    transition: transform 0.3s ease-out;
+  }
+
+  .o-icon__plus-to-cross::before {
+    transform: translateY(-50%)
+      rotate(calc(var(--_rotation-displacement, 2) * 135deg));
+  }
+
+  .o-icon__plus-to-cross::after {
+    transform: translateY(-50%)
+      rotate(calc(var(--_rotation-displacement, 0) * 45deg));
+  }
+
+  :host([open]) .o-icon__plus-to-cross {
+    --_rotation-displacement: 1;
+  }
+
+  :host([open]) .o-icon__plus-to-cross::before,
+  :host([open]) .o-icon__plus-to-cross::after {
+    transition-timing-function: ease-in;
+  }
+`;

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

@@ -0,0 +1,3 @@
+export * from './body.styles';
+export * from './header.styles';
+export * from './variables.styles';

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

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