@dpa-id-components/dpa-shared-components 22.0.0-next.0 → 22.0.0-next.2

package/dist/src/components/UiFilterButton/UiFilterButton.vue

@@ -13,7 +13,7 @@
     @click="onClick"
   >
     <button
-      class="w-full rounded-full focus:outline-hidden focus-visible:outline-blue"
+      class="w-full rounded-full focus:outline-hidden focus-visible:focus-outline"
       :disabled="disabled"
       type="button"
       data-testid="filter-button"
@@ -119,20 +119,21 @@ const props = withDefaults(
 );
 
 const variants = {
-  "blue-rounded": "bg-blue-default hover:bg-blue-dark",
-  "white-rounded": "bg-white hover:border-gray-700 border border-gray-400",
-  blank: "bg-transparent hover:bg-gray-300",
-  "blue-blank": "bg-transparent hover:bg-gray-300",
+  "blue-rounded": "bg-primary hover:bg-primary-dark",
+  "white-rounded":
+    "bg-neutral hover:border-neutral-subtle border border-neutral-soft",
+  blank: "bg-transparent hover:bg-neutral-faint",
+  "blue-blank": "bg-transparent hover:bg-neutral-faint",
   "transparent-rounded":
-    "bg-transparent border border-gray-400 hover:border-gray-700",
+    "bg-transparent border border-neutral-soft hover:border-neutral-subtle",
 };
 
 const textColors = {
-  "blue-rounded": "text-white",
-  "white-rounded": "text-gray-800 hover:text-gray-900",
-  blank: "text-gray-800 hover:text-gray-900",
-  "blue-blank": "text-blue-default hover:text-blue-dark",
-  "transparent-rounded": "text-gray-800",
+  "blue-rounded": "text-neutral",
+  "white-rounded": "text-neutral-emphasis hover:text-neutral-primary",
+  blank: "text-neutral-emphasis hover:text-neutral-primary",
+  "blue-blank": "text-primary hover:text-primary-dark",
+  "transparent-rounded": "text-neutral-emphasis",
 };
 
 const variantClasses = computed(() => {
@@ -140,23 +141,23 @@ const variantClasses = computed(() => {
     if (props.variant === "blank") {
       return "border border-transparent";
     }
-    return "bg-white border border-gray-400";
+    return "bg-neutral border border-neutral-soft";
   }
   if (props.active) {
     if (variants[props.variant as keyof typeof variants].includes("border")) {
-      return "bg-blue-default hover:bg-blue-dark border border-blue-default hover:border-blue-dark";
+      return "bg-primary hover:bg-primary-dark border border-primary hover:border-primary-dark";
     }
-    return "bg-blue-default hover:bg-blue-dark";
+    return "bg-primary hover:bg-primary-dark";
   }
   return variants[props.variant as keyof typeof variants];
 });
 
 const textColorClass = computed(() => {
   if (props.disabled) {
-    return "text-gray-400";
+    return "text-neutral-soft";
   }
   if (props.active) {
-    return "text-white";
+    return "text-neutral";
   }
   return textColors[props.variant as keyof typeof textColors];
 });

package/dist/src/components/UiIcon/UiIcon.stories.ts

@@ -1,27 +1,24 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-import IconOverview from "./IconOverview.stories.vue";
 import { icons } from "./icons.ts";
 import UiIcon from "./UiIcon.vue";
 
+type PropsAndStoryProps = InstanceType<typeof UiIcon> & {
+  outline: boolean;
+};
+
 const meta = {
-  title: "Ui/UiIcon",
+  title: "icons/UiIcon",
   component: UiIcon,
-  argTypes: {
-    name: {
-      control: "select",
-      options: Object.keys(icons),
-    },
-    size: {
-      control: "select",
-      options: ["xs", "sm", "md", "lg", "xl", "2xl"],
-    },
-  },
   args: {
-    name: "alert",
+    name: "audio",
     size: "lg",
+    outline: false,
   },
-} satisfies Meta<typeof UiIcon>;
+  argTypes: {
+    outline: { control: "boolean" },
+  },
+} satisfies Meta<PropsAndStoryProps>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -32,17 +29,39 @@ export const Default: Story = {
       return { args };
     },
     components: { UiIcon },
-    template: "<UiIcon v-bind='args'></UiIcon>",
+    template: /*html*/ `
+      <UiIcon v-bind="args" />
+    `,
   }),
 };
 
 export const Overview: Story = {
+  argTypes: {
+    name: { control: false },
+  },
   render: (args) => ({
     setup() {
-      const size = args.size || "large";
-      return { args, size };
+      return { args, icons };
     },
-    components: { IconOverview },
-    template: "<IconOverview :size='size'></IconOverview>",
+    components: { UiIcon },
+    template: /*html*/ `
+      <div class="flex flex-wrap gap-2">
+        <div
+          v-for="icon in Object.keys(icons)"
+          :key="icon"
+          class="flex items-center gap-2 border-2 p-2 basis-80"
+        >
+          <UiIcon
+            class="shrink-0"
+            :class="{
+              'outline outline-alert-red-default': args.outline,
+            }"
+            v-bind="args"
+            :name="icon"
+          />
+          <p>{{ icon }}</p>
+        </div>
+      </div>
+    `,
   }),
 };

package/dist/src/components/UiIcon/icons.ts

@@ -1,188 +1,173 @@
+// Turn off prettier to make editing/sorting easier
+// prettier-ignore
 export const icons = {
-  activities: () => import("../../assets/icons/activities.vue"),
-  alert: () => import("../../assets/icons/alert.vue"),
-  "alert-fill": () => import("../../assets/icons/alert-fill.vue"),
+  "activities": () => import("../../assets/icons/activities.vue"),
+  "ai": () => import("../../assets/icons/ai.vue"),
+  "alert": () => import("../../assets/icons/alert.vue"),
+  "alert-filled": () => import("../../assets/icons/alert-filled.vue"),
   "alert-octagon": () => import("../../assets/icons/alert-octagon.vue"),
-  ai: () => import("../../assets/icons/ai.vue"),
-  apps: () => import("../../assets/icons/apps.vue"),
-  archive: () => import("../../assets/icons/archive.vue"),
+  "apps": () => import("../../assets/icons/apps.vue"),
+  "archive": () => import("../../assets/icons/archive.vue"),
+  "arrow-down": () => import("../../assets/icons/arrow-down.vue"),
   "arrow-left": () => import("../../assets/icons/arrow-left.vue"),
   "arrow-nav-left": () => import("../../assets/icons/arrow-nav-left.vue"),
   "arrow-nav-right": () => import("../../assets/icons/arrow-nav-right.vue"),
-  "arrow-up": () => import("../../assets/icons/arrow-up.vue"),
   "arrow-right": () => import("../../assets/icons/arrow-right.vue"),
-  "arrow-down": () => import("../../assets/icons/arrow-down.vue"),
+  "arrow-up": () => import("../../assets/icons/arrow-up.vue"),
   "arrowhead-left": () => import("../../assets/icons/arrowhead-left.vue"),
   "arrowhead-right": () => import("../../assets/icons/arrowhead-right.vue"),
   "arrowhead-top": () => import("../../assets/icons/arrowhead-top.vue"),
-  atmo: () => import("../../assets/icons/atmo.vue"),
-  audio: () => import("../../assets/icons/audio.vue"),
-  bag: () => import("../../assets/icons/bag.vue"),
-  bell: () => import("../../assets/icons/bell.vue"),
-  "bell-fill": () => import("../../assets/icons/bell-fill.vue"),
-  book: () => import("../../assets/icons/book.vue"),
-  bookmark: () => import("../../assets/icons/bookmark.vue"),
-  "bookmark-fill": () => import("../../assets/icons/bookmark-fill.vue"),
-  "bookmark-outlined": () => import("../../assets/icons/bookmark-outlined.vue"),
-  box: () => import("../../assets/icons/box.vue"),
-  bulb: () => import("../../assets/icons/bulb.vue"),
-  call: () => import("../../assets/icons/call.vue"),
-  camera: () => import("../../assets/icons/camera.vue"),
-  check: () => import("../../assets/icons/check.vue"),
-  checklist: () => import("../../assets/icons/checklist.vue"),
-  checkmark: () => import("../../assets/icons/checkmark.vue"),
+  "atmo": () => import("../../assets/icons/atmo.vue"),
+  "audio": () => import("../../assets/icons/audio.vue"),
+  "bag": () => import("../../assets/icons/bag.vue"),
+  "bell": () => import("../../assets/icons/bell.vue"),
+  "bell-filled": () => import("../../assets/icons/bell-filled.vue"),
+  "book": () => import("../../assets/icons/book.vue"),
+  "bookmark": () => import("../../assets/icons/bookmark.vue"),
+  "bookmark-filled": () => import("../../assets/icons/bookmark-filled.vue"),
+  "box": () => import("../../assets/icons/box.vue"),
+  "bulb": () => import("../../assets/icons/bulb.vue"),
+  "call": () => import("../../assets/icons/call.vue"),
+  "camera": () => import("../../assets/icons/camera.vue"),
+  "check": () => import("../../assets/icons/check.vue"),
+  "checklist": () => import("../../assets/icons/checklist.vue"),
+  "checkmark": () => import("../../assets/icons/checkmark.vue"),
   "checkmark-double": () => import("../../assets/icons/checkmark-double.vue"),
   "chevron-down": () => import("../../assets/icons/chevron-down.vue"),
   "chevron-left": () => import("../../assets/icons/chevron-left.vue"),
   "chevron-right": () => import("../../assets/icons/chevron-right.vue"),
   "chevron-up": () => import("../../assets/icons/chevron-up.vue"),
-  clipboard: () => import("../../assets/icons/clipboard.vue"),
-  clock: () => import("../../assets/icons/clock.vue"),
-  close: () => import("../../assets/icons/close.vue"),
+  "clipboard": () => import("../../assets/icons/clipboard.vue"),
+  "clock": () => import("../../assets/icons/clock.vue"),
+  "close": () => import("../../assets/icons/close.vue"),
   "cloud-save": () => import("../../assets/icons/cloud-save.vue"),
-  code: () => import("../../assets/icons/code.vue"),
-  collapse: () => import("../../assets/icons/collapse.vue"),
+  "code": () => import("../../assets/icons/code.vue"),
+  "collapse": () => import("../../assets/icons/collapse.vue"),
   "color-palette": () => import("../../assets/icons/color-palette.vue"),
-  comment: () => import("../../assets/icons/comment.vue"),
-  "comment-fill": () => import("../../assets/icons/comment-fill.vue"),
-  copy: () => import("../../assets/icons/copy.vue"),
+  "comment": () => import("../../assets/icons/comment.vue"),
+  "comment-filled": () => import("../../assets/icons/comment-filled.vue"),
+  "copy": () => import("../../assets/icons/copy.vue"),
   "copy-link": () => import("../../assets/icons/copy-link.vue"),
-  delete: () => import("../../assets/icons/delete.vue"),
-  download: () => import("../../assets/icons/download.vue"),
+  "delete": () => import("../../assets/icons/delete.vue"),
+  "download": () => import("../../assets/icons/download.vue"),
   "dpa-id": () => import("../../assets/icons/dpa-id.vue"),
-  edit: () => import("../../assets/icons/edit.vue"),
+  "edit": () => import("../../assets/icons/edit.vue"),
   "edit-add": () => import("../../assets/icons/edit-add.vue"),
-  eil: () => import("../../assets/icons/eil.vue"),
-  emoji: () => import("../../assets/icons/emoji.vue"),
+  "eil": () => import("../../assets/icons/eil.vue"),
+  "emoji": () => import("../../assets/icons/emoji.vue"),
   "emoji-add": () => import("../../assets/icons/emoji-add.vue"),
-  envelope: () => import("../../assets/icons/envelope.vue"),
-  event: () => import("../../assets/icons/event.vue"),
-  expand: () => import("../../assets/icons/expand.vue"),
+  "envelope": () => import("../../assets/icons/envelope.vue"),
+  "event": () => import("../../assets/icons/event.vue"),
+  "expand": () => import("../../assets/icons/expand.vue"),
   "external-link": () => import("../../assets/icons/external-link.vue"),
-  file: () => import("../../assets/icons/file.vue"),
   "file-pdf": () => import("../../assets/icons/file-pdf.vue"),
-  filter: () => import("../../assets/icons/filter.vue"),
-  "filter-outline": () => import("../../assets/icons/filter-outline.vue"),
-  flag: () => import("../../assets/icons/flag.vue"),
-  "flag-fill": () => import("../../assets/icons/flag-fill.vue"),
+  "file": () => import("../../assets/icons/file.vue"),
+  "filter": () => import("../../assets/icons/filter.vue"),
+  "flag": () => import("../../assets/icons/flag.vue"),
   "flag-filled": () => import("../../assets/icons/flag-filled.vue"),
-  "flag-outline": () => import("../../assets/icons/flag-outline.vue"),
-  flags: () => import("../../assets/icons/flags.vue"),
-  flash: () => import("../../assets/icons/flash.vue"),
-  folder: () => import("../../assets/icons/folder.vue"),
+  "flags": () => import("../../assets/icons/flags.vue"),
+  "flash": () => import("../../assets/icons/flash.vue"),
+  "folder": () => import("../../assets/icons/folder.vue"),
   "folder-add": () => import("../../assets/icons/folder-add.vue"),
-  "folder-fill": () => import("../../assets/icons/folder-fill.vue"),
   "folder-filled": () => import("../../assets/icons/folder-filled.vue"),
-  gallery: () => import("../../assets/icons/gallery.vue"),
-  graphic: () => import("../../assets/icons/graphic.vue"),
-  graphics: () => import("../../assets/icons/graphics.vue"),
+  "gallery": () => import("../../assets/icons/gallery.vue"),
+  "graphic": () => import("../../assets/icons/graphic.vue"),
+  "graphics": () => import("../../assets/icons/graphics.vue"),
   "grid-1": () => import("../../assets/icons/grid-1.vue"),
   "grid-2": () => import("../../assets/icons/grid-2.vue"),
   "grid-3": () => import("../../assets/icons/grid-3.vue"),
   "grid-4": () => import("../../assets/icons/grid-4.vue"),
   "grid-6": () => import("../../assets/icons/grid-6.vue"),
   "grid-9": () => import("../../assets/icons/grid-9.vue"),
-  "grid-masonry": () => import("../../assets/icons/grid-masonry.vue"),
   "grid-masonry-9": () => import("../../assets/icons/grid-masonry-9.vue"),
-  help: () => import("../../assets/icons/help.vue"),
-  home: () => import("../../assets/icons/home.vue"),
-  image: () => import("../../assets/icons/image.vue"),
+  "grid-masonry": () => import("../../assets/icons/grid-masonry.vue"),
+  "help": () => import("../../assets/icons/help.vue"),
+  "home": () => import("../../assets/icons/home.vue"),
+  "image": () => import("../../assets/icons/image.vue"),
   "image-focus-point": () => import("../../assets/icons/image-focus-point.vue"),
   "impact-high": () => import("../../assets/icons/impact-high.vue"),
   "impact-low": () => import("../../assets/icons/impact-low.vue"),
   "impact-medium": () => import("../../assets/icons/impact-medium.vue"),
   "impact-very-high": () => import("../../assets/icons/impact-very-high.vue"),
   "impact-very-low": () => import("../../assets/icons/impact-very-low.vue"),
-  info: () => import("../../assets/icons/info.vue"),
-  "info-fill": () => import("../../assets/icons/info-fill.vue"),
+  "info": () => import("../../assets/icons/info.vue"),
   "info-filled": () => import("../../assets/icons/info-filled.vue"),
-  label: () => import("../../assets/icons/label.vue"),
+  "label": () => import("../../assets/icons/label.vue"),
   "label-filled": () => import("../../assets/icons/label-filled.vue"),
-  language: () => import("../../assets/icons/language.vue"),
-  latest: () => import("../../assets/icons/latest.vue"),
-  lightbulb: () => import("../../assets/icons/lightbulb.vue"),
-  list: () => import("../../assets/icons/list.vue"),
+  "language": () => import("../../assets/icons/language.vue"),
+  "latest": () => import("../../assets/icons/latest.vue"),
+  "lightbulb": () => import("../../assets/icons/lightbulb.vue"),
+  "list": () => import("../../assets/icons/list.vue"),
   "list-search": () => import("../../assets/icons/list-search.vue"),
-  lock: () => import("../../assets/icons/lock.vue"),
+  "lock": () => import("../../assets/icons/lock.vue"),
   "lock-filled": () => import("../../assets/icons/lock-filled.vue"),
-  mail: () => import("../../assets/icons/mail.vue"),
-  map: () => import("../../assets/icons/map.vue"),
-  "map-outline": () => import("../../assets/icons/map-outline.vue"),
-  menu: () => import("../../assets/icons/menu.vue"),
-  minus: () => import("../../assets/icons/minus.vue"),
+  "mail": () => import("../../assets/icons/mail.vue"),
+  "map": () => import("../../assets/icons/map.vue"),
+  "map-filled": () => import("../../assets/icons/map-filled.vue"),
+  "menu": () => import("../../assets/icons/menu.vue"),
+  "minus": () => import("../../assets/icons/minus.vue"),
   "more-horizontal": () => import("../../assets/icons/more-horizontal.vue"),
   "more-vertical": () => import("../../assets/icons/more-vertical.vue"),
-  move: () => import("../../assets/icons/move.vue"),
+  "move": () => import("../../assets/icons/move.vue"),
   "move-up-down": () => import("../../assets/icons/move-up-down.vue"),
-  navigation: () => import("../../assets/icons/navigation.vue"),
-  note: () => import("../../assets/icons/note.vue"),
-  offline: () => import("../../assets/icons/offline.vue"),
-  package: () => import("../../assets/icons/package.vue"),
+  "navigation": () => import("../../assets/icons/navigation.vue"),
+  "note": () => import("../../assets/icons/note.vue"),
+  "offline": () => import("../../assets/icons/offline.vue"),
+  "package": () => import("../../assets/icons/package.vue"),
   "paper-plane": () => import("../../assets/icons/paper-plane.vue"),
-  paperplane: () => import("../../assets/icons/paperplane.vue"),
-  pause: () => import("../../assets/icons/pause.vue"),
-  "pause-circle": () => import("../../assets/icons/pause-circle.vue"),
-  pdf: () => import("../../assets/icons/pdf.vue"),
-  pen: () => import("../../assets/icons/pen.vue"),
+  "pause": () => import("../../assets/icons/pause.vue"),
+  "pdf": () => import("../../assets/icons/pdf.vue"),
+  "pen": () => import("../../assets/icons/pen.vue"),
   "pen-check": () => import("../../assets/icons/pen-check.vue"),
-  people: () => import("../../assets/icons/people.vue"),
-  phone: () => import("../../assets/icons/phone.vue"),
-  picture: () => import("../../assets/icons/picture.vue"),
-  "picture-gallery": () => import("../../assets/icons/picture-gallery.vue"),
-  pin: () => import("../../assets/icons/pin.vue"),
-  planning: () => import("../../assets/icons/planning.vue"),
-  "play-outline": () => import("../../assets/icons/play-outline.vue"),
-  "play-fill": () => import("../../assets/icons/play-fill.vue"),
-  play: () => import("../../assets/icons/play.vue"),
-  plus: () => import("../../assets/icons/plus.vue"),
-  "plus-circle": () => import("../../assets/icons/plus-circle.vue"),
-  print: () => import("../../assets/icons/print.vue"),
-  refresh: () => import("../../assets/icons/refresh.vue"),
-  reset: () => import("../../assets/icons/reset.vue"),
-  responsive: () => import("../../assets/icons/responsive.vue"),
+  "people": () => import("../../assets/icons/people.vue"),
+  "phone": () => import("../../assets/icons/phone.vue"),
+  "picture": () => import("../../assets/icons/picture.vue"),
+  "pin": () => import("../../assets/icons/pin.vue"),
+  "planning": () => import("../../assets/icons/planning.vue"),
+  "play": () => import("../../assets/icons/play.vue"),
+  "play-filled": () => import("../../assets/icons/play-filled.vue"),
+  "plus": () => import("../../assets/icons/plus.vue"),
+  "print": () => import("../../assets/icons/print.vue"),
+  "refresh": () => import("../../assets/icons/refresh.vue"),
+  "reset": () => import("../../assets/icons/reset.vue"),
+  "responsive": () => import("../../assets/icons/responsive.vue"),
   "rubix-thema": () => import("../../assets/icons/rubix-thema.vue"),
-  save: () => import("../../assets/icons/save.vue"),
+  "save": () => import("../../assets/icons/save.vue"),
   "saved-search": () => import("../../assets/icons/saved-search.vue"),
-  "saved-search-fill": () => import("../../assets/icons/saved-search-fill.vue"),
-  search: () => import("../../assets/icons/search.vue"),
-  settings: () => import("../../assets/icons/settings.vue"),
-  share: () => import("../../assets/icons/share.vue"),
+  "saved-search-filled": () => import("../../assets/icons/saved-search-filled.vue"),
+  "search": () => import("../../assets/icons/search.vue"),
+  "settings": () => import("../../assets/icons/settings.vue"),
+  "share": () => import("../../assets/icons/share.vue"),
   "share-alternative": () => import("../../assets/icons/share-alternative.vue"),
-  sidebar: () => import("../../assets/icons/sidebar.vue"),
-  "sidebar-fill": () => import("../../assets/icons/sidebar-fill.vue"),
-  slack: () => import("../../assets/icons/slack.vue"),
+  "sidebar": () => import("../../assets/icons/sidebar.vue"),
+  "sidebar-filled": () => import("../../assets/icons/sidebar-filled.vue"),
+  "slack": () => import("../../assets/icons/slack.vue"),
   "slider-config": () => import("../../assets/icons/slider-config.vue"),
-  spellcheck: () => import("../../assets/icons/spellcheck.vue"),
-  spinner: () => import("../../assets/icons/spinner.vue"),
+  "spellcheck": () => import("../../assets/icons/spellcheck.vue"),
+  "spinner": () => import("../../assets/icons/spinner.vue"),
   "standard-view": () => import("../../assets/icons/standard-view.vue"),
-  star: () => import("../../assets/icons/star.vue"),
-  "star-fill": () => import("../../assets/icons/star-fill.vue"),
+  "star": () => import("../../assets/icons/star.vue"),
   "star-filled": () => import("../../assets/icons/star-filled.vue"),
-  stop: () => import("../../assets/icons/stop.vue"),
-  story: () => import("../../assets/icons/story.vue"),
-  sync: () => import("../../assets/icons/sync.vue"),
-  tasks: () => import("../../assets/icons/tasks.vue"),
-  text: () => import("../../assets/icons/text.vue"),
+  "stop": () => import("../../assets/icons/stop.vue"),
+  "story": () => import("../../assets/icons/story.vue"),
+  "sync": () => import("../../assets/icons/sync.vue"),
+  "tasks": () => import("../../assets/icons/tasks.vue"),
+  "text": () => import("../../assets/icons/text.vue"),
   "thumbs-down": () => import("../../assets/icons/thumbs-down.vue"),
   "thumbs-up": () => import("../../assets/icons/thumbs-up.vue"),
   "thumbs-up-double": () => import("../../assets/icons/thumbs-up-double.vue"),
-  topic: () => import("../../assets/icons/topic.vue"),
-  union: () => import("../../assets/icons/union.vue"),
-  upload: () => import("../../assets/icons/upload.vue"),
-  "user-need-divert-me": () =>
-    import("../../assets/icons/user-need-divert-me.vue"),
-  "user-need-educate-me": () =>
-    import("../../assets/icons/user-need-educate-me.vue"),
-  "user-need-give-me-perspective": () =>
-    import("../../assets/icons/user-need-give-me-perspective.vue"),
+  "topic": () => import("../../assets/icons/topic.vue"),
+  "union": () => import("../../assets/icons/union.vue"),
+  "upload": () => import("../../assets/icons/upload.vue"),
+  "user-need-divert-me": () => import("../../assets/icons/user-need-divert-me.vue"),
+  "user-need-educate-me": () => import("../../assets/icons/user-need-educate-me.vue"),
+  "user-need-give-me-perspective": () => import("../../assets/icons/user-need-give-me-perspective.vue"),
   "user-need-help-me": () => import("../../assets/icons/user-need-help-me.vue"),
-  "user-need-touch-me": () =>
-    import("../../assets/icons/user-need-touch-me.vue"),
-  "user-need-update-me": () =>
-    import("../../assets/icons/user-need-update-me.vue"),
-  video: () => import("../../assets/icons/video.vue"),
+  "user-need-touch-me": () => import("../../assets/icons/user-need-touch-me.vue"),
+  "user-need-update-me": () => import("../../assets/icons/user-need-update-me.vue"),
+  "video": () => import("../../assets/icons/video.vue"),
   "video-overlay": () => import("../../assets/icons/video-overlay.vue"),
-  view: () => import("../../assets/icons/view.vue"),
+  "view": () => import("../../assets/icons/view.vue"),
   "view-off": () => import("../../assets/icons/view-off.vue"),
   "volume-up": () => import("../../assets/icons/volume-up.vue"),
 } as const;

package/dist/src/components/UiIconButton/UiIconButton.spec.ts

@@ -22,7 +22,7 @@ describe("UiIconButton", () => {
       },
     });
 
-    expect(wrapper.classes("bg-blue-default")).toBe(false);
+    expect(wrapper.classes("bg-primary")).toBe(false);
   });
 
   it("should render small sized button by default", () => {

package/dist/src/components/UiIconButton/UiIconButton.vue

@@ -2,7 +2,7 @@
   <button
     :disabled="disabled"
     :aria-label="title"
-    class="group flex flex-none items-center justify-center rounded-full focus:outline-hidden focus-visible:outline-blue"
+    class="group flex flex-none items-center justify-center rounded-full focus:outline-hidden focus-visible:focus-outline"
     :class="[colorClass, backgroundClass, buttonSizeClass]"
     type="button"
     @click="($event) => emit('click', $event)"
@@ -51,15 +51,15 @@ const props = withDefaults(
 );
 
 const backgroundColorVariants = {
-  blue: "hover:bg-blue-dark active:bg-blue-dark bg-blue-default disabled:bg-gray-300 disabled:hover:bg-none",
-  none: "hover:bg-gray-100 active:bg-blue-default disabled:hover:bg-transparent",
-  "gray-hover": "hover:bg-gray-300 disabled:hover:bg-none",
+  blue: "hover:bg-primary-dark active:bg-primary-dark bg-primary disabled:bg-neutral-faint disabled:hover:bg-none",
+  none: "hover:bg-neutral-whisper active:bg-primary disabled:hover:bg-transparent",
+  "gray-hover": "hover:bg-neutral-faint disabled:hover:bg-none",
 };
 
 const iconColorVariants = {
-  blue: "text-blue-default hover:text-blue-dark disabled:text-gray-400 active:text-white",
-  gray: "text-gray-800 hover:text-gray-900 active:text-gray-900 disabled:text-gray-400",
-  white: "text-white disabled:text-gray-400",
+  blue: "text-primary hover:text-primary-dark disabled:text-neutral-soft active:text-neutral",
+  gray: "text-neutral-emphasis hover:text-neutral-primary active:text-neutral-primary disabled:text-neutral-soft",
+  white: "text-neutral disabled:text-neutral-soft",
 };
 
 const sizeVariants = {

package/dist/src/components/UiListItem/UiListItem.vue

@@ -2,7 +2,7 @@
   <li
     :class="
       cn(
-        'flex cursor-pointer list-none items-center gap-2 px-4 py-2 text-sm/normal text-neutral-emphasis select-none hover:text-primary focus:outline-hidden focus-visible:outline-blue focus-visible:-outline-offset-2 [*+&]:border-t',
+        'flex cursor-pointer list-none items-center gap-2 px-4 py-2 text-sm/normal text-neutral-emphasis select-none hover:text-primary focus:outline-hidden focus-visible:focus-outline focus-visible:-outline-offset-2',
         {
           'cursor-default text-neutral-medium': disabled,
           'is-selected': selected,

package/dist/src/components/UiMediaTypeIcon/README.md

@@ -0,0 +1,22 @@
+# UiMediaTypeIcon
+
+## Usage
+
+```vue
+<template>
+  <UiMediaTypeIcon name="alert" />
+</template>
+
+<script setup>
+import { UiMediaTypeIcon } from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### Props
+
+| Name   | Type | Default | Description |
+|--------|------|---------|-------------|
+| `name` | `UiMediaTypeIconName` |  | Icon name |
+| `size` | `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`, or `"2xl"` | `"lg"` | Icon size |

package/dist/src/components/UiMediaTypeIcon/UiMediaTypeIcon.stories.ts

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+import { icons } from "./icons.ts";
+import UiMediaTypeIcon from "./UiMediaTypeIcon.vue";
+
+type PropsAndStoryProps = InstanceType<typeof UiMediaTypeIcon> & {
+  outline: boolean;
+};
+
+const meta = {
+  title: "icons/UiMediaTypeIcon",
+  component: UiMediaTypeIcon,
+  args: {
+    name: "audio",
+    size: "lg",
+    outline: false,
+  },
+  argTypes: {
+    outline: { control: "boolean" },
+  },
+} satisfies Meta<PropsAndStoryProps>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiMediaTypeIcon },
+    template: /*html*/ `
+      <UiMediaTypeIcon v-bind="args" />
+    `,
+  }),
+};
+
+export const Overview: Story = {
+  argTypes: {
+    name: { control: false },
+  },
+  render: (args) => ({
+    setup() {
+      return { args, icons };
+    },
+    components: { UiMediaTypeIcon },
+    template: /*html*/ `
+      <div class="flex flex-wrap gap-2">
+        <div
+          v-for="icon in Object.keys(icons)"
+          :key="icon"
+          class="flex items-center gap-2 border-2 p-2 basis-80"
+        >
+          <UiMediaTypeIcon
+            class="shrink-0"
+            :class="{
+              'outline outline-alert-red-default': args.outline,
+            }"
+            v-bind="args"
+            :name="icon"
+          />
+          <p>{{ icon }}</p>
+        </div>
+      </div>
+    `,
+  }),
+};