jouw-stem__design-system 0.1.0

package/src/components/Timeline/Timeline.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="timeline" :class="additionalClasses">
+    <div
+      v-for="(event, index) in value"
+      :key="index"
+      class="timeline__item"
+      :class="getItemClasses(index)"
+    >
+      <div class="timeline__opposite">
+        <slot name="opposite" :item="event" :index="index">
+          <span v-if="event.date" class="timeline__date">{{ event.date }}</span>
+        </slot>
+      </div>
+      <div class="timeline__separator">
+        <div class="timeline__connector timeline__connector--before" v-if="index > 0" />
+        <div class="timeline__marker" :style="getMarkerStyle(event)">
+          <slot name="marker" :item="event" :index="index">
+            <span class="timeline__marker-dot" />
+          </slot>
+        </div>
+        <div class="timeline__connector timeline__connector--after" v-if="index < value.length - 1" />
+      </div>
+      <div class="timeline__content">
+        <slot name="content" :item="event" :index="index">
+          <div class="timeline__event">
+            <h4 v-if="event.title" class="timeline__title">{{ event.title }}</h4>
+            <p v-if="event.description" class="timeline__description">{{ event.description }}</p>
+          </div>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="./Timeline.scss"></style>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { resolveMarkerStyle, getItemAlignmentClass, type TimelineEvent } from "./timelineUtils";
+
+interface Props {
+  value: unknown[];
+  align?: string;
+  layout?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  align: "left",
+  layout: "vertical",
+});
+
+function getMarkerStyle(event: TimelineEvent) {
+  return resolveMarkerStyle(event);
+}
+
+function getItemClasses(index: number) {
+  const cls = getItemAlignmentClass(index, props.align);
+  return cls ? [cls] : [];
+}
+
+const additionalClasses = computed(() =>
+  [
+    `timeline--align-${props.align}`,
+    `timeline--layout-${props.layout}`,
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>

package/src/components/Timeline/timelineUtils.ts

@@ -0,0 +1,57 @@
+/**
+ * Pure helpers extracted from Timeline.
+ *
+ * The component itself is a `v-for` over events plus a few `v-if`s for
+ * slot fallbacks — but two decisions live in plain TS that benefit from
+ * direct unit coverage:
+ *
+ *   - `resolveMarkerColor` maps a token alias (`primary` / `success` / …)
+ *     to the matching `--timeline-colors-*` CSS var, falls back to the
+ *     raw colour string for arbitrary values, and yields nothing when
+ *     the event carries no `color`.
+ *   - `getItemAlignmentClass` decides — for `align="alternate"` only —
+ *     whether each index renders on the left (even) or right (odd) side.
+ *
+ * No Vue, no DOM — pure data in / data out.
+ */
+
+const COLOR_MAP: Record<string, string> = {
+  primary: 'var(--timeline-colors-primary)',
+  success: 'var(--timeline-colors-success)',
+  warning: 'var(--timeline-colors-warning)',
+  danger: 'var(--timeline-colors-danger)',
+}
+
+export interface TimelineEvent {
+  color?: string
+  [k: string]: unknown
+}
+
+/**
+ * Resolve the inline style for a timeline marker.
+ *   - no color → empty object (let the SCSS default apply)
+ *   - known alias → CSS variable reference from `COLOR_MAP`
+ *   - arbitrary string → passed through verbatim (caller's responsibility)
+ */
+export function resolveMarkerStyle(
+  event: TimelineEvent
+): Record<string, string> {
+  if (!event.color) return {}
+  const resolved = COLOR_MAP[event.color] ?? event.color
+  return { '--timeline-marker-color': resolved }
+}
+
+/**
+ * Per-item alignment class for `align="alternate"`. Other alignments
+ * don't get a per-item modifier — they're composed at the root level.
+ *
+ * Returns `''` when no class should be applied so the caller can join
+ * arrays with a space without conditional spreads.
+ */
+export function getItemAlignmentClass(
+  index: number,
+  align: string
+): '' | 'timeline__item--left' | 'timeline__item--right' {
+  if (align !== 'alternate') return ''
+  return index % 2 === 0 ? 'timeline__item--left' : 'timeline__item--right'
+}

package/src/components/Toast/Toast.scss

@@ -0,0 +1,281 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: toast;
+
+.#{$c}-container {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: var(--toast-container-gap, $toast-container-gap);
+  padding: var(--toast-container-padding, $toast-container-padding);
+  max-width: var(--toast-container-maxWidth, $toast-container-maxWidth);
+  z-index: var(--toast-container-zIndex, $toast-container-zIndex);
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+  }
+}
+
+// Position variants
+.#{$c}-container--top-left {
+  top: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+.#{$c}-container--top-center {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.#{$c}-container--top-right {
+  top: 0;
+  right: 0;
+  align-items: flex-end;
+}
+
+.#{$c}-container--bottom-left {
+  bottom: 0;
+  left: 0;
+  align-items: flex-start;
+  flex-direction: column-reverse;
+}
+
+.#{$c}-container--bottom-center {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+  flex-direction: column-reverse;
+}
+
+.#{$c}-container--bottom-right {
+  bottom: 0;
+  right: 0;
+  align-items: flex-end;
+  flex-direction: column-reverse;
+}
+
+.#{$c}-container--center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  align-items: center;
+}
+
+.#{$c} {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--toast-icon-gap, $toast-icon-gap);
+  width: 100%;
+  padding: var(--toast-padding-y, $toast-padding-y) var(--toast-padding-x, $toast-padding-x);
+  background-color: var(--toast-background-default, $toast-background-default);
+  border: var(--toast-border-width, $toast-border-width) solid var(--toast-border-color-default, $toast-border-color-default);
+  border-radius: var(--toast-radius, $toast-radius);
+  box-shadow: var(--toast-shadow, $toast-shadow);
+  overflow: hidden;
+}
+
+.#{$c}--closable {
+  padding-right: calc(var(--toast-padding-x, $toast-padding-x) + var(--toast-closeButton-size, $toast-closeButton-size) + var(--toast-icon-gap, $toast-icon-gap));
+}
+
+// Severity variants
+.#{$c}--success {
+  background-color: var(--toast-background-success, $toast-background-success);
+  border-color: var(--toast-border-color-success, $toast-border-color-success);
+
+  .#{$c}__icon {
+    color: var(--toast-icon-color-success, $toast-icon-color-success);
+  }
+
+  .#{$c}__summary {
+    color: var(--toast-summary-color-success, $toast-summary-color-success);
+  }
+}
+
+.#{$c}--info {
+  background-color: var(--toast-background-info, $toast-background-info);
+  border-color: var(--toast-border-color-info, $toast-border-color-info);
+
+  .#{$c}__icon {
+    color: var(--toast-icon-color-info, $toast-icon-color-info);
+  }
+
+  .#{$c}__summary {
+    color: var(--toast-summary-color-info, $toast-summary-color-info);
+  }
+}
+
+.#{$c}--warning {
+  background-color: var(--toast-background-warning, $toast-background-warning);
+  border-color: var(--toast-border-color-warning, $toast-border-color-warning);
+
+  .#{$c}__icon {
+    color: var(--toast-icon-color-warning, $toast-icon-color-warning);
+  }
+
+  .#{$c}__summary {
+    color: var(--toast-summary-color-warning, $toast-summary-color-warning);
+  }
+}
+
+.#{$c}--error {
+  background-color: var(--toast-background-error, $toast-background-error);
+  border-color: var(--toast-border-color-error, $toast-border-color-error);
+
+  .#{$c}__icon {
+    color: var(--toast-icon-color-error, $toast-icon-color-error);
+  }
+
+  .#{$c}__summary {
+    color: var(--toast-summary-color-error, $toast-summary-color-error);
+  }
+}
+
+.#{$c}__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--toast-icon-size, $toast-icon-size);
+  height: var(--toast-icon-size, $toast-icon-size);
+  color: var(--toast-icon-color-default, $toast-icon-color-default);
+  flex-shrink: 0;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{$c}__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--toast-content-gap, $toast-content-gap);
+  flex: 1;
+  min-width: 0;
+}
+
+.#{$c}__summary {
+  font-size: var(--toast-summary-fontSize, $toast-summary-fontSize);
+  font-weight: var(--toast-summary-fontWeight, $toast-summary-fontWeight);
+  color: var(--toast-summary-color-default, $toast-summary-color-default);
+  line-height: 1.4;
+}
+
+.#{$c}__detail {
+  font-size: var(--toast-detail-fontSize, $toast-detail-fontSize);
+  color: var(--toast-detail-color, $toast-detail-color);
+  line-height: 1.4;
+}
+
+.#{$c}__close {
+  position: absolute;
+  top: var(--toast-padding-y, $toast-padding-y);
+  right: var(--toast-padding-x, $toast-padding-x);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--toast-closeButton-size, $toast-closeButton-size);
+  height: var(--toast-closeButton-size, $toast-closeButton-size);
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--toast-closeButton-color-default, $toast-closeButton-color-default);
+  border-radius: var(--toast-closeButton-radius, $toast-closeButton-radius);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--toast-closeButton-background-hover, $toast-closeButton-background-hover);
+    color: var(--toast-closeButton-color-hover, $toast-closeButton-color-hover);
+  }
+
+  svg {
+    width: var(--toast-closeButton-iconSize, $toast-closeButton-iconSize);
+    height: var(--toast-closeButton-iconSize, $toast-closeButton-iconSize);
+  }
+}
+
+.#{$c}__progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: var(--toast-progress-height, $toast-progress-height);
+  background-color: var(--toast-progress-background, $toast-progress-background);
+  overflow: hidden;
+}
+
+.#{$c}__progress-bar {
+  height: 100%;
+  background-color: var(--toast-progress-fill-default, $toast-progress-fill-default);
+  animation: toast-progress-shrink linear forwards;
+}
+
+.#{$c}__progress-bar--success {
+  background-color: var(--toast-progress-fill-success, $toast-progress-fill-success);
+}
+
+.#{$c}__progress-bar--info {
+  background-color: var(--toast-progress-fill-info, $toast-progress-fill-info);
+}
+
+.#{$c}__progress-bar--warning {
+  background-color: var(--toast-progress-fill-warning, $toast-progress-fill-warning);
+}
+
+.#{$c}__progress-bar--error {
+  background-color: var(--toast-progress-fill-error, $toast-progress-fill-error);
+}
+
+@keyframes toast-progress-shrink {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+
+// Transition animations
+.#{$c}-slide-enter-active,
+.#{$c}-slide-leave-active {
+  transition: all 0.3s ease;
+}
+
+.#{$c}-slide-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.#{$c}-slide-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+// Adjust slide direction based on position
+.#{$c}-container--top-left,
+.#{$c}-container--bottom-left {
+  .#{$c}-slide-enter-from,
+  .#{$c}-slide-leave-to {
+    transform: translateX(-100%);
+  }
+}
+
+.#{$c}-container--top-center,
+.#{$c}-container--bottom-center,
+.#{$c}-container--center {
+  .#{$c}-slide-enter-from {
+    transform: translateY(-20px);
+  }
+
+  .#{$c}-slide-leave-to {
+    transform: translateY(-20px);
+  }
+}

package/src/components/Toast/Toast.tokens.theme-dark.json

@@ -0,0 +1,281 @@
+{
+  "toast": {
+    "container": {
+      "gap": {
+        "value": "{stack.s}",
+        "type": "dimension",
+        "description": "Gap between stacked toasts"
+      },
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Container padding from screen edge"
+      },
+      "zIndex": {
+        "value": "1200",
+        "type": "number",
+        "description": "Toast container z-index"
+      },
+      "maxWidth": {
+        "value": "400px",
+        "type": "dimension",
+        "description": "Maximum toast width"
+      }
+    },
+    "background": {
+      "default": {
+        "value": "{surface.elevated}",
+        "type": "color",
+        "description": "Default toast background"
+      },
+      "success": {
+        "value": "{feedback.successSubtle}",
+        "type": "color",
+        "description": "Success toast background"
+      },
+      "info": {
+        "value": "{feedback.infoSubtle}",
+        "type": "color",
+        "description": "Info toast background"
+      },
+      "warning": {
+        "value": "{feedback.warningSubtle}",
+        "type": "color",
+        "description": "Warning toast background"
+      },
+      "error": {
+        "value": "{feedback.errorSubtle}",
+        "type": "color",
+        "description": "Error toast background"
+      }
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Toast border width"
+      },
+      "color": {
+        "default": {
+          "value": "{border.subtle}",
+          "type": "color",
+          "description": "Default border color"
+        },
+        "success": {
+          "value": "{feedback.success}",
+          "type": "color",
+          "description": "Success border color"
+        },
+        "info": {
+          "value": "{feedback.info}",
+          "type": "color",
+          "description": "Info border color"
+        },
+        "warning": {
+          "value": "{feedback.warning}",
+          "type": "color",
+          "description": "Warning border color"
+        },
+        "error": {
+          "value": "{feedback.error}",
+          "type": "color",
+          "description": "Error border color"
+        }
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Toast border radius"
+    },
+    "shadow": {
+      "value": "{shadow.l}",
+      "type": "shadow",
+      "description": "Toast elevation shadow"
+    },
+    "padding": {
+      "x": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "20px",
+        "type": "dimension",
+        "description": "Icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Default icon color"
+        },
+        "success": {
+          "value": "{feedback.success}",
+          "type": "color",
+          "description": "Success icon color"
+        },
+        "info": {
+          "value": "{feedback.info}",
+          "type": "color",
+          "description": "Info icon color"
+        },
+        "warning": {
+          "value": "{feedback.warning}",
+          "type": "color",
+          "description": "Warning icon color"
+        },
+        "error": {
+          "value": "{feedback.error}",
+          "type": "color",
+          "description": "Error icon color"
+        }
+      },
+      "gap": {
+        "value": "{inline.s}",
+        "type": "dimension",
+        "description": "Gap between icon and content"
+      }
+    },
+    "content": {
+      "gap": {
+        "value": "{stack.2xs}",
+        "type": "dimension",
+        "description": "Gap between summary and detail"
+      }
+    },
+    "summary": {
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Summary text color"
+        },
+        "success": {
+          "value": "{feedback.successEmphasis}",
+          "type": "color",
+          "description": "Success summary color"
+        },
+        "info": {
+          "value": "{feedback.infoEmphasis}",
+          "type": "color",
+          "description": "Info summary color"
+        },
+        "warning": {
+          "value": "{feedback.warningEmphasis}",
+          "type": "color",
+          "description": "Warning summary color"
+        },
+        "error": {
+          "value": "{feedback.errorEmphasis}",
+          "type": "color",
+          "description": "Error summary color"
+        }
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Summary font size"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "number",
+        "description": "Summary font weight"
+      }
+    },
+    "detail": {
+      "color": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Detail text color"
+      },
+      "fontSize": {
+        "value": "13px",
+        "type": "dimension",
+        "description": "Detail font size"
+      }
+    },
+    "closeButton": {
+      "size": {
+        "value": "28px",
+        "type": "dimension",
+        "description": "Close button size"
+      },
+      "iconSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Close icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Close button color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Close button hover color"
+        }
+      },
+      "background": {
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Close button hover background"
+        }
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension",
+        "description": "Close button border radius"
+      }
+    },
+    "progress": {
+      "height": {
+        "value": "3px",
+        "type": "dimension",
+        "description": "Progress bar height"
+      },
+      "background": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Progress bar track background"
+      },
+      "fill": {
+        "default": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Default progress fill"
+        },
+        "success": {
+          "value": "{feedback.success}",
+          "type": "color",
+          "description": "Success progress fill"
+        },
+        "info": {
+          "value": "{feedback.info}",
+          "type": "color",
+          "description": "Info progress fill"
+        },
+        "warning": {
+          "value": "{feedback.warning}",
+          "type": "color",
+          "description": "Warning progress fill"
+        },
+        "error": {
+          "value": "{feedback.error}",
+          "type": "color",
+          "description": "Error progress fill"
+        }
+      }
+    }
+  }
+}