@dpa-id-components/dpa-shared-components 21.1.1 → 22.0.0-next.1

package/src/components/UiIcon/icons.ts

@@ -1,199 +1,171 @@
+// 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"),
-  "audio-circled": () => import("../../assets/icons/audio-circled.vue"),
-  "audio-filled": () => import("../../assets/icons/audio-filled.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"),
-  "graphic-circled": () => import("../../assets/icons/graphic-circled.vue"),
-  "graphic-filled": () => import("../../assets/icons/graphic-filled.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"),
-  "image focus point": () => import("../../assets/icons/image focus point.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-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"),
+  "lock": () => import("../../assets/icons/lock.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"),
-  "picture-circled": () => import("../../assets/icons/picture-circled.vue"),
-  "picture-filled": () => import("../../assets/icons/picture-filled.vue"),
-  pin: () => import("../../assets/icons/pin.vue"),
-  planning: () => import("../../assets/icons/planning.vue"),
-  play: () => import("../../assets/icons/play.vue"),
-  "play-circle": () => import("../../assets/icons/play-circle.vue"),
-  "play-fill": () => import("../../assets/icons/play-fill.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"),
+  "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"),
-  "text-circled": () => import("../../assets/icons/text-circled.vue"),
-  "text-filled": () => import("../../assets/icons/text-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"),
   "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"),
-  "video overlay": () => import("../../assets/icons/video overlay.vue"),
-  "video-circled": () => import("../../assets/icons/video-circled.vue"),
-  "video-filled": () => import("../../assets/icons/video-filled.vue"),
-  "video-rounded": () => import("../../assets/icons/video-rounded.vue"),
-  view: () => import("../../assets/icons/view.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-off": () => import("../../assets/icons/view-off.vue"),
   "volume-up": () => import("../../assets/icons/volume-up.vue"),
 } as const;

package/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)"
@@ -15,8 +15,17 @@
   </button>
 </template>
 
+<script lang="ts">
+/**
+ * @deprecated Use `UiButton` instead
+ */
+export default {
+  name: "UiIconButton",
+};
+</script>
+
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, onMounted } from "vue";
 
 import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 
@@ -42,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 = {
@@ -88,7 +97,16 @@ const buttonSizeClass = computed(() => {
 
 const iconSize = computed(() => {
   return sizeVariants[props.size as keyof typeof sizeVariants].iconSize as
-    | "large"
-    | "small";
+    | "lg"
+    | "sm";
+});
+
+onMounted(() => {
+  if (window.location.origin.includes("local")) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "Component is deprecated. It will be removed in a future update.",
+    );
+  }
 });
 </script>

package/src/components/UiInfoContent/README.md

@@ -6,13 +6,14 @@
 <!-- SomeComponent.vue using UiInfoContent -->
 <template>
     <div class="h-screen w-100">
-      <UiInfoContent 
+      <UiInfoContent
           icon-name="search"
+          appearance="success"
         <template #title>Keine Ergebnisse</template>
         Leider konnten wir keine Ergebnisse finden.
         <template #actions>
           <UiButton>Suche speichern</UiButton>
-          <UiButtio>Suche löschen</UiButtio>
+          <UiButton>Suche löschen</UiButton>
         </template>
       </UiInfoContent>
   </div>
@@ -27,12 +28,10 @@
 
 ## Props
 
-| Name             | Description                                |
-|------------------|--------------------------------------------|
-| `iconName`       | icon to be displayed                       |
-| `iconBackground` | Optional prop for background color of icon |
-| `iconSize`       | Optional prop for size of icon             |
-| `iconColor`      | Optional prop for color of icon            |
+| Name          | Description                                                                                    |
+|---------------|------------------------------------------------------------------------------------------------|
+| `iconName`    | icon to be displayed                                                                           |
+| `appearance`  | Visual appearance of the component. One of `"default"`, `"default-alt"`, `"success"`. Defaults to `"default"`. |
 
 ### Slots
 

package/src/components/UiInfoContent/UiInfoContent.vue

@@ -1,27 +1,37 @@
 <template>
-  <div class="flex h-full flex-col items-center justify-center">
+  <div
+    class="flex h-full flex-col items-center justify-center"
+    :class="classes.layout"
+  >
     <div
       v-if="iconName"
       class="rounded-full p-6 shadow-default"
-      :class="[iconBackgroundClass, iconColorClass]"
+      :class="classes.icon"
       data-testid="info-icon"
     >
-      <UiIcon :name="iconName" :size="iconSize" data-testid="icon" />
+      <UiIcon
+        :name="iconName"
+        size-classes="size-6 sm:size-10"
+        data-testid="icon"
+      />
     </div>
+
     <h2
       v-if="$slots.title"
-      class="pt-4 text-center text-2xl font-medium text-gray-900"
+      class="pt-4 text-center text-2xl font-medium text-neutral-primary"
       data-testid="info-title"
     >
       <slot name="title" />
     </h2>
+
     <span
       v-if="$slots.default"
-      class="pt-4 text-center text-base text-gray-800"
+      class="pt-4 text-center text-base text-neutral-emphasis"
       data-testid="info-text"
     >
-      <slot name="default" />
+      <slot />
     </span>
+
     <div
       v-if="$slots.actions"
       class="flex flex-none flex-wrap justify-center gap-x-6 gap-y-2 pt-6"
@@ -36,34 +46,25 @@ import { computed } from "vue";
 
 import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 
-const props = withDefaults(
-  defineProps<{
-    iconBackground?: "white" | "gray" | "green";
-    iconName?: UiIconName | null;
-    iconSize?: "xs" | "small" | "medium" | "large" | "xl";
-    iconColor?: "white" | "gray";
-  }>(),
-  {
-    iconBackground: "white",
-    iconName: null,
-    iconColor: "gray",
-    iconSize: "xl",
+const APPEARANCE_MAP = {
+  default: {
+    layout: "bg-surface-level-1",
+    icon: "bg-surface-base text-neutral-subtle",
+  },
+  "default-alt": {
+    layout: "bg-surface-base",
+    icon: "bg-surface-level-1 text-neutral-subtle",
+  },
+  success: {
+    layout: "bg-surface-base",
+    icon: "bg-secondary-light text-neutral-inverse-primary",
   },
-);
+};
 
-const iconBackgroundClass = computed(() => {
-  if (props.iconBackground === "gray") {
-    return "bg-gray-100";
-  } else if (props.iconBackground === "green") {
-    return "bg-green-neon";
-  }
-  return "bg-white";
-});
+const { appearance = "default", iconName = undefined } = defineProps<{
+  appearance?: keyof typeof APPEARANCE_MAP;
+  iconName?: UiIconName;
+}>();
 
-const iconColorClass = computed(() => {
-  if (props.iconColor === "gray") {
-    return "text-gray-400";
-  }
-  return "text-white";
-});
+const classes = computed(() => APPEARANCE_MAP[appearance]);
 </script>

package/src/components/UiInput/README.md

@@ -21,47 +21,30 @@ import { UiInput } from "@dpa-id-components/dpa-shared-components";
 
 ## API
 
+### Models
+
+| Name      | Type     | Default     | Description          |
+|-----------|----------|-------------|----------------------|
+| _default_ | `string` | `undefined` | Sets the input value |
+
 ### Props
 
 **Note**: This component binds all non-prop attributes (apart from `class`) on its principal element (either an `input` or `textarea` element) instead of the root element. This allows you to add arbitrary HTML attributes (and event listeners) on the principal element without them being explicitly supported by the component.
 
 | Name               | Type                                                                        | Default    | Description                                                                         |
 |--------------------|-----------------------------------------------------------------------------|------------|-------------------------------------------------------------------------------------|
-| `modelValue`       | `String`                                                                    | `""`       | Sets the `value` attribute of the input                                             |
-| `type`             | `text,number,time,date, password`                                           | `text`     | Sets the `type` attribute of the input                                              |
-| `label`            | `String`                                                                    | `""`       | The displayed and aria label of the input                                           |
-| `placeholder`      | `String`                                                                    | `""`       | The placeholder text of the input                                                   |
-| `autofocus`        | `Boolean`                                                                   | `false`    | Whether the input gets focused on mount                                             |
-| `chevron`          | `Boolean`                                                                   | `false`    | Whether a chevron gets displayed on the end of the input (e.g. for custom dropdown) |
-| `disabled`         | `Boolean`                                                                   | `false`    | Sets the disabled attribute of the input                                            |
-| `isDateTimePicker` | `Boolean`                                                                   | `false`    | Changes the appearance to a datetime picker                                         |
-| `autocomplete`     | `Boolean`                                                                   | `false`    | Sets the autocomplete attribute of the input (for browser support only)             |
-| `errorMessage`     | `String`                                                                    | `""`       | Error message to be displayed underneath the input                                  |
-| `warningMessage`   | `String`                                                                    | `""`       | Warning message to be displayed underneath the input                                |
-| `infoText`         | `String`                                                                    | `""`       | Info message to be displayed underneath the input                                   |
-| `isTextarea`       | `Boolean`                                                                   | `false`    | Input gets rendered as textarea                                                     |
-| `inputStatus`      | `"default" | "info" | "readonly" | "warning" | "error"` | `"default` | The status the input is styled for                                                  |
-
-### Events
-
-| Name                | Type            | Description                                                                   |
-|---------------------|-----------------|-------------------------------------------------------------------------------|
-| `input`             | `string`    | Emitted when the value of the input changes. Value is emitted with the event. |
-| `update:modelValue` | `string`        | Same as input, duplicated for use in v-model                                  |
-| `focus`             | `FocusEvent`    | Emitted when the input gets focused                                           |
-| `blur`              | `FocusEvent`    | Emitted when the input gets blurred                                           |
-| `keyup`             | `KeyboardEvent` | Emitted on keyup inside the input                                             |
-
-### Exposes
-
-| Name       | Type               | Description                                                |
-|------------|--------------------|------------------------------------------------------------|
-| `inputRef` | `HTMLInputElement` | Exposes a ref to the input element to the parent component |
+| `type`             | `HTMLInputElement` type | `text`     | Sets the `type` attribute of the input                                              |
+| `label`            | `string`                                                                    | `""`       | The displayed and aria label of the input                                           |
+| `errorMessage`     | `string`                                                                    | `""`       | Error message to be displayed underneath the input                                  |
+| `warningMessage`   | `string`                                                                    | `""`       | Warning message to be displayed underneath the input                                |
+| `infoText`         | `string`                                                                    | `""`       | Info message to be displayed underneath the input                                   |
+| `isTextarea`       | `boolean`                                                                   | `false`    | Input gets rendered as textarea                                                     |
+| `inputStatus`      | `"info"`, `"warning"`, `"error"` | `"default` | The status the input is styled for                                                  |
 
 ### Slots
 
 | Name      | Description                                        |
 |-----------|----------------------------------------------------|
-| `buttons` | slot for rendering a button inside the input field |
+| `buttons` | Render extra content like a “Reveal password” button |
 | `default` | Label content |
-| `errors`  | For validation error content that's associated with the form control via `aria-errormessage` |
+| `errors`  | Validation error content that's associated with the form control via `aria-errormessage` |