jouw-stem__design-system 0.1.0

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

@@ -0,0 +1,107 @@
+{
+  "inline-message": {
+    "padding": {
+      "x": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{inset.xs}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "gap": {
+      "value": "{inline.xs}",
+      "type": "dimension",
+      "description": "Gap between icon and text"
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Border radius"
+    },
+    "fontSize": {
+      "value": "14px",
+      "type": "dimension",
+      "description": "Text font size"
+    },
+    "fontWeight": {
+      "value": "500",
+      "type": "fontWeight",
+      "description": "Text font weight"
+    },
+    "iconSize": {
+      "value": "16px",
+      "type": "dimension",
+      "description": "Icon size"
+    },
+    "background": {
+      "success": {
+        "value": "{feedback.successEmphasis}",
+        "type": "color",
+        "description": "Success bg — HC emphasis variant, ~7:1 vs base3 canvas. Previous *Subtle was 1.14:1."
+      },
+      "info": {
+        "value": "{feedback.infoEmphasis}",
+        "type": "color",
+        "description": "Info bg — HC emphasis variant"
+      },
+      "warn": {
+        "value": "{feedback.warningEmphasis}",
+        "type": "color",
+        "description": "Warning bg — HC emphasis variant"
+      },
+      "error": {
+        "value": "{feedback.errorEmphasis}",
+        "type": "color",
+        "description": "Error bg — HC emphasis variant"
+      }
+    },
+    "text": {
+      "success": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Text — base3 on dark severity fill, ~7:1"
+      },
+      "info": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Text — base3 on dark severity fill"
+      },
+      "warn": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Text — base3 on dark severity fill"
+      },
+      "error": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Text — base3 on dark severity fill"
+      }
+    },
+    "icon": {
+      "success": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Icon matches text"
+      },
+      "info": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Icon matches text"
+      },
+      "warn": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Icon matches text"
+      },
+      "error": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Icon matches text"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,107 @@
+{
+  "inline-message": {
+    "padding": {
+      "x": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{inset.xs}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "gap": {
+      "value": "{inline.xs}",
+      "type": "dimension",
+      "description": "Gap between icon and text"
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Border radius"
+    },
+    "fontSize": {
+      "value": "14px",
+      "type": "dimension",
+      "description": "Text font size"
+    },
+    "fontWeight": {
+      "value": "500",
+      "type": "fontWeight",
+      "description": "Text font weight"
+    },
+    "iconSize": {
+      "value": "16px",
+      "type": "dimension",
+      "description": "Icon size"
+    },
+    "background": {
+      "success": {
+        "value": "{feedback.successEmphasis}",
+        "type": "color",
+        "description": "Success bg — darker green, ≥4.5:1 vs white text (WCAG 1.4.3) and ≥3:1 vs white canvas (WCAG 1.4.11). Previous *Subtle was 1.14:1 vs canvas."
+      },
+      "info": {
+        "value": "{feedback.infoEmphasis}",
+        "type": "color",
+        "description": "Info bg — darker blue, same constraints"
+      },
+      "warn": {
+        "value": "{feedback.warningEmphasis}",
+        "type": "color",
+        "description": "Warning bg — darker orange (feedback.warning mid is too light against white canvas)"
+      },
+      "error": {
+        "value": "{feedback.errorEmphasis}",
+        "type": "color",
+        "description": "Error bg — darker red"
+      }
+    },
+    "text": {
+      "success": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Text — white on filled severity bg"
+      },
+      "info": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Text — white on filled severity bg"
+      },
+      "warn": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Text — white on filled severity bg"
+      },
+      "error": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Text — white on filled severity bg"
+      }
+    },
+    "icon": {
+      "success": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Icon matches text — white on filled bg"
+      },
+      "info": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Icon matches text — white on filled bg"
+      },
+      "warn": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Icon matches text — white on filled bg"
+      },
+      "error": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Icon matches text — white on filled bg"
+      }
+    }
+  }
+}

package/src/components/InlineMessage/InlineMessage.vue

@@ -0,0 +1,57 @@
+<template>
+  <span class="inline-message" :class="additionalClasses" role="status">
+    <slot name="icon">
+      <span v-if="hasIcon" class="inline-message__icon">
+        <!-- Success icon -->
+        <svg v-if="severity === 'success'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/>
+        </svg>
+        <!-- Info icon -->
+        <svg v-else-if="severity === 'info'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill="currentColor"/>
+        </svg>
+        <!-- Warning icon -->
+        <svg v-else-if="severity === 'warn'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="currentColor"/>
+        </svg>
+        <!-- Error icon -->
+        <svg v-else-if="severity === 'error'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="currentColor"/>
+        </svg>
+      </span>
+    </slot>
+    <span class="inline-message__text">
+      <slot />
+    </span>
+  </span>
+</template>
+
+<style src="./InlineMessage.scss"></style>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps({
+  /**
+   * Severity level of the message
+   */
+  severity: {
+    type: String,
+    default: "info",
+    validator: (v) => ["success", "info", "warn", "error"].includes(v),
+  },
+  /**
+   * Whether to show the severity icon
+   */
+  icon: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const hasIcon = computed(() => props.icon);
+
+const additionalClasses = computed(() =>
+  [`inline-message--${props.severity}`].join(" ")
+);
+</script>

package/src/components/InputChips/InputChips.matrix.ts

@@ -0,0 +1,29 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.input-chips',
+  baseQuery: { placeholder: 'Add a tag and press Enter' },
+  variants: [
+    {
+      name: 'Size',
+      subvariants: [
+        { name: 'sm', query: { size: 'sm' }, focusable: true },
+        { name: 'md', query: { size: 'md' }, focusable: true },
+        { name: 'lg', query: { size: 'lg' }, focusable: true }
+      ]
+    },
+    {
+      name: 'Content',
+      subvariants: [
+        { name: 'empty',     query: {} },
+        { name: 'with-chips', query: { modelValue: '["alpha","beta","gamma"]' } }
+      ]
+    }
+  ],
+  states: [
+    { name: 'hover',          attr: 'hover' },
+    { name: 'focus-visible',  attr: 'focus-visible' },
+    { name: 'disabled',       props: { isDisabled: 'true' } },
+    { name: 'invalid',        props: { isInvalid: 'true' } }
+  ]
+}

package/src/components/InputChips/InputChips.scss

@@ -0,0 +1,176 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: input-chips;
+
+.#{$c} {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--input-chips-gap, $input-chips-gap);
+  width: 100%;
+  min-height: var(--input-chips-height-md, $input-chips-height-md);
+  padding: var(--input-chips-padding-y, $input-chips-padding-y) var(--input-chips-padding-x, $input-chips-padding-x);
+  background-color: var(--input-chips-background-default, $input-chips-background-default);
+  border: var(--input-chips-border-width, $input-chips-border-width) solid var(--input-chips-border-color-default, $input-chips-border-color-default);
+  border-radius: var(--input-chips-radius, $input-chips-radius);
+  cursor: text;
+  transition: border-color 0.15s ease;
+
+  &:hover:not(.#{$c}--state-disabled),
+  &[data-state~="hover"]:not(.#{$c}--state-disabled) {
+    border-color: var(--input-chips-border-color-hover, $input-chips-border-color-hover);
+  }
+}
+
+.#{$c}--state-focused {
+  outline: var(--input-chips-focus-ringWidth, $input-chips-focus-ringWidth) solid var(--input-chips-focus-ringColor, $input-chips-focus-ringColor);
+  outline-offset: var(--input-chips-focus-ringOffset, $input-chips-focus-ringOffset);
+  border-color: var(--input-chips-border-color-focus, $input-chips-border-color-focus);
+}
+
+.#{$c}--state-disabled {
+  cursor: not-allowed;
+  background-color: var(--input-chips-background-disabled, $input-chips-background-disabled);
+  border-color: var(--input-chips-border-color-disabled, $input-chips-border-color-disabled);
+}
+
+.#{$c}--state-invalid {
+  border-color: var(--input-chips-border-color-error, $input-chips-border-color-error);
+
+  &.#{$c}--state-focused {
+    border-color: var(--input-chips-border-color-error, $input-chips-border-color-error);
+  }
+}
+
+// Sizes
+.#{$c}--size-sm {
+  min-height: var(--input-chips-height-sm, $input-chips-height-sm);
+
+  .#{$c}__input {
+    font-size: var(--input-chips-fontSize-sm, $input-chips-fontSize-sm);
+  }
+
+  .#{$c}__chip {
+    font-size: 12px;
+  }
+}
+
+.#{$c}--size-md {
+  min-height: var(--input-chips-height-md, $input-chips-height-md);
+
+  .#{$c}__input {
+    font-size: var(--input-chips-fontSize-md, $input-chips-fontSize-md);
+  }
+}
+
+.#{$c}--size-lg {
+  min-height: var(--input-chips-height-lg, $input-chips-height-lg);
+
+  .#{$c}__input {
+    font-size: var(--input-chips-fontSize-lg, $input-chips-fontSize-lg);
+  }
+
+  .#{$c}__chip {
+    font-size: 14px;
+    padding: 4px 8px;
+  }
+}
+
+// Chip
+.#{$c}__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--input-chips-chip-gap, $input-chips-chip-gap);
+  padding: var(--input-chips-chip-padding-y, $input-chips-chip-padding-y) var(--input-chips-chip-padding-x, $input-chips-chip-padding-x);
+  background-color: var(--input-chips-chip-background-default, $input-chips-chip-background-default);
+  border-radius: var(--input-chips-chip-radius, $input-chips-chip-radius);
+  font-size: var(--input-chips-chip-fontSize, $input-chips-chip-fontSize);
+  color: var(--input-chips-chip-text, $input-chips-chip-text);
+  line-height: 1.4;
+  user-select: none;
+  transition: background-color 0.15s ease;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--input-chips-chip-background-hover, $input-chips-chip-background-hover);
+  }
+}
+
+.#{$c}__chip-label {
+  white-space: nowrap;
+}
+
+.#{$c}__chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--input-chips-remove-size, $input-chips-remove-size);
+  height: var(--input-chips-remove-size, $input-chips-remove-size);
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  color: var(--input-chips-remove-color-default, $input-chips-remove-color-default);
+  // Slight opacity drop so the close affordance reads as a softer tint
+  // of the chip label rather than a competing element. Hover restores
+  // full opacity for the explicit affordance.
+  opacity: 0.75;
+  cursor: pointer;
+  transition: color 0.15s ease, opacity 0.15s ease;
+  flex-shrink: 0;
+
+  &:hover,
+  &[data-state~="hover"] {
+    color: var(--input-chips-remove-color-hover, $input-chips-remove-color-hover);
+    opacity: 1;
+  }
+
+  &:focus,
+  &[data-state~="focus"] {
+    outline: none;
+  }
+
+  &:focus-visible,
+  &[data-state~="focus-visible"] {
+    outline: 2px solid var(--input-chips-focus-ringColor, $input-chips-focus-ringColor);
+    outline-offset: 1px;
+  }
+}
+
+.#{$c}__chip-remove-icon {
+  width: 12px;
+  height: 12px;
+}
+
+// Input
+.#{$c}__input {
+  flex: 1;
+  min-width: 80px;
+  border: none;
+  background: transparent;
+  padding: 0;
+  color: var(--input-chips-text-default, $input-chips-text-default);
+  font-size: var(--input-chips-fontSize-md, $input-chips-fontSize-md);
+  line-height: 1.5;
+
+  &::placeholder {
+    color: var(--input-chips-text-placeholder, $input-chips-text-placeholder);
+  }
+
+  &:focus,
+  &[data-state~="focus"] {
+    outline: none;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--input-chips-text-disabled, $input-chips-text-disabled);
+  }
+}
+
+// Disabled chip styling
+.#{$c}--state-disabled {
+  .#{$c}__chip {
+    opacity: 0.6;
+  }
+}

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

@@ -0,0 +1,192 @@
+{
+  "input-chips": {
+    "height": {
+      "sm": {
+        "value": "32px",
+        "type": "dimension",
+        "description": "Small container min-height"
+      },
+      "md": {
+        "value": "40px",
+        "type": "dimension",
+        "description": "Medium container min-height (default)"
+      },
+      "lg": {
+        "value": "48px",
+        "type": "dimension",
+        "description": "Large container min-height"
+      }
+    },
+    "padding": {
+      "x": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{inset.xs}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "gap": {
+      "value": "{inline.xs}",
+      "type": "dimension",
+      "description": "Gap between chips and input"
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Container border radius"
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{neutral.300}",
+          "type": "color",
+          "description": "Default border color"
+        },
+        "hover": {
+          "value": "{neutral.400}",
+          "type": "color",
+          "description": "Hover border color"
+        },
+        "focus": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Focus border color"
+        },
+        "disabled": {
+          "value": "{neutral.200}",
+          "type": "color",
+          "description": "Disabled border color"
+        },
+        "error": {
+          "value": "{feedback.error}",
+          "type": "color",
+          "description": "Error/invalid border color"
+        }
+      }
+    },
+    "background": {
+      "default": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Default background"
+      },
+      "disabled": {
+        "value": "{neutral.100}",
+        "type": "color",
+        "description": "Disabled background"
+      }
+    },
+    "text": {
+      "default": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Default text color"
+      },
+      "placeholder": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Placeholder text color"
+      },
+      "disabled": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Disabled text color"
+      }
+    },
+    "fontSize": {
+      "sm": {
+        "value": "14px",
+        "type": "dimension"
+      },
+      "md": {
+        "value": "15px",
+        "type": "dimension"
+      },
+      "lg": {
+        "value": "16px",
+        "type": "dimension"
+      }
+    },
+    "chip": {
+      "padding": {
+        "x": {
+          "value": "{inset.s}",
+          "type": "dimension"
+        },
+        "y": {
+          "value": "{inset.2xs}",
+          "type": "dimension"
+        }
+      },
+      "gap": {
+        "value": "{inline.2xs}",
+        "type": "dimension"
+      },
+      "radius": {
+        "value": "{radius.pill}",
+        "type": "dimension"
+      },
+      "background": {
+        "default": {
+          "value": "{neutral.0}",
+          "type": "color",
+          "description": "Chip bg — white on dark canvas, ~18:1"
+        },
+        "hover": {
+          "value": "{neutral.200}",
+          "type": "color",
+          "description": "Chip hover"
+        }
+      },
+      "text": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Chip text — dark navy on white fill"
+      },
+      "fontSize": {
+        "value": "13px",
+        "type": "dimension"
+      }
+    },
+    "remove": {
+      "size": {
+        "value": "14px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Chip remove icon — matches chip text; SCSS applies opacity:0.75 so it reads as a slightly softer tint than the label."
+        },
+        "hover": {
+          "value": "{text.inverse}",
+          "type": "color",
+          "description": "Chip remove icon hover — same hue, full opacity for the affordance."
+        }
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{brand.primary}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "1px",
+        "type": "dimension"
+      }
+    }
+  }
+}