jouw-stem__design-system 0.1.0

package/src/components/Checkbox/Checkbox.tokens.theme-high-contrast-solarized-dark.json

@@ -0,0 +1,140 @@
+{
+  "checkbox": {
+    "size": {
+      "sm": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Small checkbox"
+      },
+      "md": {
+        "value": "20px",
+        "type": "dimension",
+        "description": "Medium checkbox (default)"
+      },
+      "lg": {
+        "value": "24px",
+        "type": "dimension",
+        "description": "Large checkbox"
+      }
+    },
+    "iconSize": {
+      "sm": {
+        "value": "10px",
+        "type": "dimension"
+      },
+      "md": {
+        "value": "12px",
+        "type": "dimension"
+      },
+      "lg": {
+        "value": "16px",
+        "type": "dimension"
+      }
+    },
+    "radius": {
+      "value": "{radius.subtle}",
+      "type": "dimension",
+      "description": "Checkbox border radius"
+    },
+    "border": {
+      "width": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{border.default}",
+          "type": "color",
+          "description": "Default unchecked border"
+        },
+        "hover": {
+          "value": "{border.strong}",
+          "type": "color"
+        },
+        "checked": {
+          "value": "{intent.action.default}",
+          "type": "color",
+          "description": "Accent color when checked"
+        },
+        "checkedHover": {
+          "value": "{intent.action.hover}",
+          "type": "color",
+          "description": "Checked + hover — keeps filled look so checkmark stays visible (WCAG 1.4.11)"
+        },
+        "focus": {
+          "value": "{focus.ring}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{border.subtle}",
+          "type": "color"
+        },
+        "error": {
+          "value": "{feedback.error}",
+          "type": "color"
+        }
+      }
+    },
+    "background": {
+      "default": {
+        "value": "transparent",
+        "type": "color",
+        "description": "Transparent to inherit page background"
+      },
+      "checked": {
+        "value": "{intent.action.default}",
+        "type": "color",
+        "description": "Brand accent when checked"
+      },
+      "checkedHover": {
+        "value": "{intent.action.hover}",
+        "type": "color",
+        "description": "Checked + hover — keeps filled look so the checkmark remains legible"
+      },
+      "disabled": {
+        "value": "{surface.muted}",
+        "type": "color"
+      },
+      "hover": {
+        "value": "{surface.muted}",
+        "type": "color"
+      }
+    },
+    "checkmark": {
+      "color": {
+        "value": "{surface.canvas}",
+        "type": "color"
+      }
+    },
+    "label": {
+      "gap": {
+        "value": "{inset.s}",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color"
+        }
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{focus.ring}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension"
+      }
+    }
+  }
+}

package/src/components/Checkbox/Checkbox.tokens.theme-high-contrast-solarized-light.json

@@ -0,0 +1,140 @@
+{
+  "checkbox": {
+    "size": {
+      "sm": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Small checkbox"
+      },
+      "md": {
+        "value": "20px",
+        "type": "dimension",
+        "description": "Medium checkbox (default)"
+      },
+      "lg": {
+        "value": "24px",
+        "type": "dimension",
+        "description": "Large checkbox"
+      }
+    },
+    "iconSize": {
+      "sm": {
+        "value": "10px",
+        "type": "dimension"
+      },
+      "md": {
+        "value": "12px",
+        "type": "dimension"
+      },
+      "lg": {
+        "value": "16px",
+        "type": "dimension"
+      }
+    },
+    "radius": {
+      "value": "{radius.subtle}",
+      "type": "dimension",
+      "description": "Checkbox border radius"
+    },
+    "border": {
+      "width": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{border.default}",
+          "type": "color",
+          "description": "Default unchecked border"
+        },
+        "hover": {
+          "value": "{border.strong}",
+          "type": "color"
+        },
+        "checked": {
+          "value": "{intent.action.default}",
+          "type": "color",
+          "description": "Accent color when checked"
+        },
+        "checkedHover": {
+          "value": "{intent.action.hover}",
+          "type": "color",
+          "description": "Checked + hover — keeps filled look so checkmark stays visible (WCAG 1.4.11)"
+        },
+        "focus": {
+          "value": "{focus.ring}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{border.subtle}",
+          "type": "color"
+        },
+        "error": {
+          "value": "{feedback.error}",
+          "type": "color"
+        }
+      }
+    },
+    "background": {
+      "default": {
+        "value": "transparent",
+        "type": "color",
+        "description": "Transparent to inherit page background"
+      },
+      "checked": {
+        "value": "{intent.action.default}",
+        "type": "color",
+        "description": "Brand accent when checked"
+      },
+      "checkedHover": {
+        "value": "{intent.action.hover}",
+        "type": "color",
+        "description": "Checked + hover — keeps filled look so the checkmark remains legible"
+      },
+      "disabled": {
+        "value": "{surface.muted}",
+        "type": "color"
+      },
+      "hover": {
+        "value": "{surface.muted}",
+        "type": "color"
+      }
+    },
+    "checkmark": {
+      "color": {
+        "value": "{surface.canvas}",
+        "type": "color"
+      }
+    },
+    "label": {
+      "gap": {
+        "value": "{inset.s}",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color"
+        }
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{focus.ring}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension"
+      }
+    }
+  }
+}

package/src/components/Checkbox/Checkbox.tokens.theme-light.json

@@ -0,0 +1,140 @@
+{
+  "checkbox": {
+    "size": {
+      "sm": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Small checkbox"
+      },
+      "md": {
+        "value": "20px",
+        "type": "dimension",
+        "description": "Medium checkbox (default)"
+      },
+      "lg": {
+        "value": "24px",
+        "type": "dimension",
+        "description": "Large checkbox"
+      }
+    },
+    "iconSize": {
+      "sm": {
+        "value": "10px",
+        "type": "dimension"
+      },
+      "md": {
+        "value": "12px",
+        "type": "dimension"
+      },
+      "lg": {
+        "value": "16px",
+        "type": "dimension"
+      }
+    },
+    "radius": {
+      "value": "{radius.subtle}",
+      "type": "dimension",
+      "description": "Checkbox border radius"
+    },
+    "border": {
+      "width": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{border.default}",
+          "type": "color",
+          "description": "Default unchecked border"
+        },
+        "hover": {
+          "value": "{border.strong}",
+          "type": "color"
+        },
+        "checked": {
+          "value": "{intent.action.default}",
+          "type": "color",
+          "description": "Accent color when checked"
+        },
+        "checkedHover": {
+          "value": "{intent.action.hover}",
+          "type": "color",
+          "description": "Checked + hover — keeps filled look so checkmark stays visible (WCAG 1.4.11)"
+        },
+        "focus": {
+          "value": "{focus.ring}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{border.subtle}",
+          "type": "color"
+        },
+        "error": {
+          "value": "{feedback.error}",
+          "type": "color"
+        }
+      }
+    },
+    "background": {
+      "default": {
+        "value": "transparent",
+        "type": "color",
+        "description": "Transparent to inherit page background"
+      },
+      "checked": {
+        "value": "{intent.action.default}",
+        "type": "color",
+        "description": "Brand accent when checked"
+      },
+      "checkedHover": {
+        "value": "{intent.action.hover}",
+        "type": "color",
+        "description": "Checked + hover — keeps filled look so the white checkmark remains legible"
+      },
+      "disabled": {
+        "value": "{surface.muted}",
+        "type": "color"
+      },
+      "hover": {
+        "value": "{surface.muted}",
+        "type": "color"
+      }
+    },
+    "checkmark": {
+      "color": {
+        "value": "{neutral.0}",
+        "type": "color"
+      }
+    },
+    "label": {
+      "gap": {
+        "value": "{inset.s}",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color"
+        }
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{focus.ring}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension"
+      }
+    }
+  }
+}

package/src/components/Checkbox/Checkbox.vue

@@ -0,0 +1,102 @@
+<template>
+  <label class="checkbox" :class="additionalClasses">
+    <input
+      type="checkbox"
+      class="checkbox__input"
+      :checked="modelValue"
+      :disabled="isDisabled"
+      :name="name"
+      :value="value"
+      :aria-invalid="isInvalid || undefined"
+      :data-state="(attrs['data-state'] as string) || null"
+      @change="onChange"
+    />
+    <span class="checkbox__box">
+      <svg
+        class="checkbox__icon"
+        viewBox="0 0 12 12"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          v-if="!indeterminate"
+          d="M10 3L4.5 8.5L2 6"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          v-else
+          d="M2.5 6H9.5"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+      </svg>
+    </span>
+    <span v-if="label || $slots.default" class="checkbox__label">
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>
+
+<style src="./Checkbox.scss"></style>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+
+const attrs = useAttrs();
+
+export type CheckboxSize = "sm" | "md" | "lg";
+export type CheckboxValue = string | number | boolean | object;
+export interface CheckboxChangeEvent {
+  checked: boolean;
+  originalEvent: Event;
+}
+
+interface Props {
+  modelValue?: boolean;
+  label?: string;
+  name?: string;
+  value?: CheckboxValue;
+  size?: CheckboxSize;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  indeterminate?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  label: undefined,
+  name: undefined,
+  value: true,
+  size: "md",
+  isDisabled: false,
+  isInvalid: false,
+  indeterminate: false,
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "change", payload: CheckboxChangeEvent): void;
+}>();
+
+function onChange(event: Event) {
+  const checked = (event.target as HTMLInputElement).checked;
+  emit("update:modelValue", checked);
+  emit("change", { checked, originalEvent: event });
+}
+
+const additionalClasses = computed(() =>
+  [
+    `checkbox--size-${props.size}`,
+    props.isDisabled && "checkbox--state-disabled",
+    props.isInvalid && "checkbox--state-invalid",
+    props.modelValue && "checkbox--state-checked",
+    props.indeterminate && "checkbox--state-indeterminate",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>

package/src/components/Chip/Chip.matrix.ts

@@ -0,0 +1,20 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.chip',
+  baseQuery: { label: 'Sample' },
+  // Layout is the only meaningful axis — chip has no severity/size system.
+  // The remove button is a child control with its own focus/hover state,
+  // but matrix-level state forcing doesn't usefully reach it.
+  variants: [
+    {
+      name: 'Layout',
+      subvariants: [
+        { name: 'label-only', query: {} },
+        { name: 'with-icon',  query: { icon: 'pi pi-star' } },
+        { name: 'removable',  query: { removable: 'true' } },
+        { name: 'removable + icon', query: { icon: 'pi pi-star', removable: 'true' } }
+      ]
+    }
+  ]
+}

package/src/components/Chip/Chip.scss

@@ -0,0 +1,87 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: chip;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--chip-gap, $chip-gap);
+  padding: var(--chip-padding-y, $chip-padding-y) var(--chip-padding-x, $chip-padding-x);
+  background-color: var(--chip-background-default, $chip-background-default);
+  border-radius: var(--chip-radius, $chip-radius);
+  font-size: var(--chip-text-fontSize, $chip-text-fontSize);
+  color: var(--chip-text-color, $chip-text-color);
+  line-height: 1.4;
+  user-select: none;
+}
+
+.#{$c}--has-image {
+  padding-left: var(--chip-padding-y, $chip-padding-y);
+}
+
+.#{$c}__image {
+  width: var(--chip-image-size, $chip-image-size);
+  height: var(--chip-image-size, $chip-image-size);
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.#{$c}__icon {
+  font-size: var(--chip-icon-size, $chip-icon-size);
+  color: var(--chip-icon-color, $chip-icon-color);
+  flex-shrink: 0;
+}
+
+.#{$c}__label {
+  white-space: nowrap;
+}
+
+.#{$c}__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--chip-remove-size, $chip-remove-size);
+  height: var(--chip-remove-size, $chip-remove-size);
+  padding: 0;
+  margin-left: var(--chip-gap, $chip-gap);
+  background: transparent;
+  border: none;
+  border-radius: var(--chip-remove-radius, $chip-remove-radius);
+  color: var(--chip-remove-color-default, $chip-remove-color-default);
+  cursor: pointer;
+  transition: background-color 150ms ease, color 150ms ease;
+  flex-shrink: 0;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--chip-remove-background-hover, $chip-remove-background-hover);
+    color: var(--chip-remove-color-hover, $chip-remove-color-hover);
+  }
+
+  &:focus,
+  &[data-state~="focus"] {
+    outline: none;
+  }
+
+  &:focus-visible,
+  &[data-state~="focus-visible"] {
+    outline: 2px solid var(--chip-remove-color-hover, $chip-remove-color-hover);
+    outline-offset: 1px;
+  }
+}
+
+.#{$c}__remove-icon {
+  width: 14px;
+  height: 14px;
+}
+
+// Removable chip hover state
+.#{$c}--removable {
+  cursor: default;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--chip-background-hover, $chip-background-hover);
+  }
+}