jouw-stem__design-system 0.1.0

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

@@ -0,0 +1,100 @@
+{
+  "chip": {
+    "padding": {
+      "x": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{inset.2xs}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "gap": {
+      "value": "{inline.2xs}",
+      "type": "dimension",
+      "description": "Gap between chip elements"
+    },
+    "radius": {
+      "value": "{radius.pill}",
+      "type": "dimension",
+      "description": "Border radius (pill shape)"
+    },
+    "background": {
+      "default": {
+        "value": "{neutral.0}",
+        "type": "color",
+        "description": "Default chip background — white. ~18:1 vs dark canvas (WCAG 1.4.11 ≥3:1). Previous surface.muted was 1.04:1 — invisible."
+      },
+      "hover": {
+        "value": "{neutral.200}",
+        "type": "color",
+        "description": "Hover background — lifted off white"
+      }
+    },
+    "text": {
+      "color": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Chip text — dark navy on white fill"
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Chip text size"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Icon size"
+      },
+      "color": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Icon color — dark navy on white chip"
+      }
+    },
+    "image": {
+      "size": {
+        "value": "24px",
+        "type": "dimension",
+        "description": "Avatar/image size"
+      }
+    },
+    "remove": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Remove button size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Remove icon — dark on white chip"
+        },
+        "hover": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Remove icon hover — stays dark; hover affordance is the button-bg below"
+        }
+      },
+      "background": {
+        "hover": {
+          "value": "{neutral.300}",
+          "type": "color",
+          "description": "Remove button hover background"
+        }
+      },
+      "radius": {
+        "value": "{radius.pill}",
+        "type": "dimension",
+        "description": "Remove button border radius"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+{
+  "chip": {
+    "padding": {
+      "x": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{inset.2xs}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "gap": {
+      "value": "{inline.2xs}",
+      "type": "dimension",
+      "description": "Gap between chip elements"
+    },
+    "radius": {
+      "value": "{radius.pill}",
+      "type": "dimension",
+      "description": "Border radius (pill shape)"
+    },
+    "background": {
+      "default": {
+        "value": "{intent.action.default}",
+        "type": "color",
+        "description": "Default chip background — brightened Solarized blue (~7:1 vs base03 canvas, exceeds WCAG 1.4.11 3:1; the previous intent.action.disabled was 2.79:1)"
+      },
+      "hover": {
+        "value": "{intent.action.hover}",
+        "type": "color",
+        "description": "Hover background"
+      }
+    },
+    "text": {
+      "color": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Chip text — Solarized base03 on light-blue fill, ~7:1"
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Chip text size"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Icon size"
+      },
+      "color": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Icon color — matches text on light-blue fill"
+      }
+    },
+    "image": {
+      "size": {
+        "value": "24px",
+        "type": "dimension",
+        "description": "Avatar/image size"
+      }
+    },
+    "remove": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Remove button size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Remove icon — base03 on light-blue chip"
+        },
+        "hover": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Remove icon hover — stays dark, hover affordance is the bg"
+        }
+      },
+      "background": {
+        "hover": {
+          "value": "{intent.action.hover}",
+          "type": "color",
+          "description": "Remove button hover background"
+        }
+      },
+      "radius": {
+        "value": "{radius.pill}",
+        "type": "dimension",
+        "description": "Remove button border radius"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+{
+  "chip": {
+    "padding": {
+      "x": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{inset.2xs}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "gap": {
+      "value": "{inline.2xs}",
+      "type": "dimension",
+      "description": "Gap between chip elements"
+    },
+    "radius": {
+      "value": "{radius.pill}",
+      "type": "dimension",
+      "description": "Border radius (pill shape)"
+    },
+    "background": {
+      "default": {
+        "value": "{intent.action.default}",
+        "type": "color",
+        "description": "Default chip background — darkened Solarized blue (~7:1 vs base3 canvas, exceeds WCAG 1.4.11 3:1; the previous intent.action.disabled was 2.79:1)"
+      },
+      "hover": {
+        "value": "{intent.action.hover}",
+        "type": "color",
+        "description": "Hover background"
+      }
+    },
+    "text": {
+      "color": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Chip text — Solarized base3 on dark-blue fill, ~7:1"
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Chip text size"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Icon size"
+      },
+      "color": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Icon color — matches text on dark-blue fill"
+      }
+    },
+    "image": {
+      "size": {
+        "value": "24px",
+        "type": "dimension",
+        "description": "Avatar/image size"
+      }
+    },
+    "remove": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Remove button size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Remove icon — Solarized base3 on dark-blue chip"
+        },
+        "hover": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Remove icon hover — stays light, hover affordance is the bg"
+        }
+      },
+      "background": {
+        "hover": {
+          "value": "{intent.action.hover}",
+          "type": "color",
+          "description": "Remove button hover background"
+        }
+      },
+      "radius": {
+        "value": "{radius.pill}",
+        "type": "dimension",
+        "description": "Remove button border radius"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+{
+  "chip": {
+    "padding": {
+      "x": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{inset.2xs}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "gap": {
+      "value": "{inline.2xs}",
+      "type": "dimension",
+      "description": "Gap between chip elements"
+    },
+    "radius": {
+      "value": "{radius.pill}",
+      "type": "dimension",
+      "description": "Border radius (pill shape)"
+    },
+    "background": {
+      "default": {
+        "value": "{intent.secondary.border}",
+        "type": "color",
+        "description": "Default chip background — nu.nl navy. ~14.9:1 vs white canvas (WCAG 1.4.11 ≥3:1). The previous surface.muted tint was 1.13:1 — boundary invisible."
+      },
+      "hover": {
+        "value": "{intent.action.hover}",
+        "type": "color",
+        "description": "Hover background — lifted navy"
+      }
+    },
+    "text": {
+      "color": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Chip text — white on navy fill, ~14.9:1 (WCAG 1.4.3 ≥4.5:1)"
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Chip text size"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Icon size"
+      },
+      "color": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Icon color — white to match label on navy chip"
+      }
+    },
+    "image": {
+      "size": {
+        "value": "24px",
+        "type": "dimension",
+        "description": "Avatar/image size"
+      }
+    },
+    "remove": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Remove button size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Remove icon — white on navy chip"
+        },
+        "hover": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Remove icon hover — stays white; hover affordance is the button-bg change below"
+        }
+      },
+      "background": {
+        "hover": {
+          "value": "{intent.action.hover}",
+          "type": "color",
+          "description": "Remove button hover background — lifted navy"
+        }
+      },
+      "radius": {
+        "value": "{radius.pill}",
+        "type": "dimension",
+        "description": "Remove button border radius"
+      }
+    }
+  }
+}

package/src/components/Chip/Chip.vue

@@ -0,0 +1,82 @@
+<template>
+  <div v-if="visible" class="chip" :class="additionalClasses">
+    <img
+      v-if="image"
+      :src="image"
+      :alt="label || 'chip image'"
+      class="chip__image"
+    />
+    <i v-if="icon" :class="icon" class="chip__icon"></i>
+    <span v-if="label" class="chip__label">{{ label }}</span>
+    <slot />
+    <button
+      v-if="removable"
+      type="button"
+      class="chip__remove"
+      aria-label="Remove"
+      @click="onRemove"
+      @keydown="onKeydown"
+    >
+      <svg
+        class="chip__remove-icon"
+        viewBox="0 0 14 14"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4.5 4.5L9.5 9.5M9.5 4.5L4.5 9.5"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style src="./Chip.scss"></style>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+interface Props {
+  label?: string;
+  icon?: string;
+  image?: string;
+  removable?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
+  icon: undefined,
+  image: undefined,
+  removable: false,
+});
+const emit = defineEmits<{
+  (e: "remove", ...args: unknown[]): void;
+}>();
+const visible = ref(true);
+
+const onRemove = (event) => {
+  visible.value = false;
+  emit("remove", event);
+};
+
+const onKeydown = (event) => {
+  if (event.key === "Enter" || event.key === "Backspace") {
+    onRemove(event);
+  }
+};
+
+const additionalClasses = computed(() => {
+  const classes = [];
+  if (props.removable) {
+    classes.push("chip--removable");
+  }
+  if (props.image) {
+    classes.push("chip--has-image");
+  }
+  return classes.join(" ");
+});
+</script>

package/src/components/ColorPicker/ColorPicker.matrix.ts

@@ -0,0 +1,22 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.color-picker',
+  // Inline mode shows the full picker UI (saturation field + hue slider)
+  // inside the matrix cell. Trigger-popup mode hides the picker behind
+  // position:fixed and is covered by behavioural specs.
+  baseQuery: { inline: 'true' },
+  variants: [
+    {
+      name: 'Size',
+      subvariants: [
+        { name: 'sm', query: { size: 'sm' } },
+        { name: 'md', query: { size: 'md' } },
+        { name: 'lg', query: { size: 'lg' } }
+      ]
+    }
+  ],
+  states: [
+    { name: 'disabled', props: { isDisabled: 'true' } }
+  ]
+}