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

package/src/assets/icons/map.vue

@@ -6,7 +6,7 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M6.37124 4.31479C7.86926 2.83176 9.89206 1.99989 12 2C14.1079 1.99989 16.1307 2.83176 17.6288 4.31479C19.1268 5.79782 19.9789 7.81216 20 9.92C20 15.4 13 21.5 12.65 21.76C12.4689 21.9149 12.2384 22.0001 12 22.0001C11.7616 22.0001 11.5311 21.9149 11.35 21.76L11.3484 21.7586C11.0254 21.4787 4 15.3904 4 9.92C4.02108 7.81216 4.87323 5.79782 6.37124 4.31479ZM10.0555 12.4101C10.6311 12.7947 11.3078 13 12 13C12.9283 13 13.8185 12.6313 14.4749 11.9749C15.1313 11.3185 15.5 10.4283 15.5 9.5C15.5 8.80777 15.2947 8.13108 14.9101 7.5555C14.5256 6.97993 13.9789 6.53133 13.3394 6.26642C12.6999 6.00151 11.9961 5.9322 11.3172 6.06725C10.6382 6.2023 10.0146 6.53564 9.52513 7.02513C9.03564 7.51461 8.7023 8.13825 8.56725 8.81718C8.4322 9.49612 8.50151 10.1999 8.76642 10.8394C9.03133 11.4789 9.47993 12.0256 10.0555 12.4101ZM13.5 9.5C13.5 10.3284 12.8284 11 12 11C11.1716 11 10.5 10.3284 10.5 9.5C10.5 8.67157 11.1716 8 12 8C12.8284 8 13.5 8.67157 13.5 9.5Z"
+      d="M6.37124 4.31479C7.86926 2.83176 9.89206 1.99989 12 2C14.1079 1.99989 16.1307 2.83176 17.6288 4.31479C19.1268 5.79782 19.9789 7.81216 20 9.92C20 15.4 13 21.5 12.65 21.76C12.4689 21.9149 12.2384 22.0001 12 22.0001C11.7616 22.0001 11.5311 21.9149 11.35 21.76L11.3484 21.7586C11.0254 21.4787 4 15.3904 4 9.92C4.02108 7.81216 4.87323 5.79782 6.37124 4.31479ZM6 9.92C6 13.65 10.33 18.06 12 19.65C13.67 18.06 18 13.62 18 9.92C18 8.3287 17.3679 6.80258 16.2426 5.67736C15.1174 4.55214 13.5913 3.92 12 3.92C10.4087 3.92 8.88258 4.55214 7.75736 5.67736C6.63214 6.80258 6 8.3287 6 9.92ZM10.0555 6.58986C10.6311 6.20527 11.3078 6 12 6C12.9283 6 13.8185 6.36875 14.4749 7.02513C15.1313 7.6815 15.5 8.57174 15.5 9.5C15.5 10.1922 15.2947 10.8689 14.9101 11.4445C14.5256 12.0201 13.9789 12.4687 13.3394 12.7336C12.6999 12.9985 11.9961 13.0678 11.3172 12.9327C10.6383 12.7977 10.0146 12.4644 9.52513 11.9749C9.03564 11.4854 8.7023 10.8617 8.56725 10.1828C8.4322 9.50388 8.50152 8.80015 8.76642 8.16061C9.03133 7.52107 9.47993 6.97444 10.0555 6.58986ZM11.1666 10.7472C11.4133 10.912 11.7033 11 12 11C12.3978 11 12.7794 10.842 13.0607 10.5607C13.342 10.2794 13.5 9.89782 13.5 9.5C13.5 9.20333 13.412 8.91332 13.2472 8.66665C13.0824 8.41997 12.8481 8.22771 12.574 8.11418C12.2999 8.00065 11.9983 7.97094 11.7074 8.02882C11.4164 8.0867 11.1491 8.22956 10.9393 8.43934C10.7296 8.64912 10.5867 8.91639 10.5288 9.20736C10.4709 9.49834 10.5007 9.79994 10.6142 10.074C10.7277 10.3481 10.92 10.5824 11.1666 10.7472Z"
       fill="currentColor"
     />
   </svg>

package/src/components/DpaMediaItem/DpaMediaItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="mb-px w-full bg-white pt-2 pr-4 pb-3 pl-3 md:pt-3"
+    class="mb-px w-full bg-neutral pt-2 pr-4 pb-3 pl-3 md:pt-3"
     :class="classObject"
     data-testid="rootDiv"
   >
@@ -18,15 +18,15 @@
           <UiIcon
             size="sm"
             :name="genreIcon"
-            class="mr-2 shrink-0 fill-current text-gray-700"
+            class="mr-2 shrink-0 fill-current text-neutral-subtle"
           />
-          <span class="text-xs font-medium text-gray-900">
+          <span class="text-xs font-medium text-neutral-primary">
             <slot name="description" />
           </span>
         </div>
         <span
           v-if="$slots.planning"
-          class="w-16 shrink-0 text-right text-xs text-gray-700"
+          class="w-16 shrink-0 text-right text-xs text-neutral-subtle"
           ><slot name="planning"
         /></span>
       </div>
@@ -42,7 +42,7 @@
             />
             <span
               v-if="imgCount > 1"
-              class="absolute right-1 bottom-1 inline-block h-4 rounded-full bg-gray-900 px-1 align-middle text-xs/4 font-semibold text-white"
+              class="absolute right-1 bottom-1 inline-block h-4 rounded-full bg-neutral-primary px-1 align-middle text-xs/4 font-semibold text-neutral"
               data-testid="imageCount"
               >{{ imgCount }}</span
             >
@@ -63,7 +63,7 @@
         <!-- Text length -->
         <span
           v-if="$slots.textLength"
-          class="text-xs text-gray-700"
+          class="text-xs text-neutral-subtle"
           :class="!isFulfilled ? 'ml-6' : ''"
           ><slot name="textLength"
         /></span>
@@ -72,7 +72,7 @@
       <!-- Time published -->
       <span
         v-if="$slots.timePublished"
-        class="pt-1 text-xs font-medium text-gray-700"
+        class="pt-1 text-xs font-medium text-neutral-subtle"
         ><slot name="timePublished"
       /></span>
     </div>
@@ -131,8 +131,8 @@ const classObject = computed(() => {
     return "cursor-auto";
   }
   return props.disabled
-    ? "cursor-not-allowed transition shadow-sm border border-gray-300"
-    : "cursor-pointer transition shadow-sm hover:shadow-md group border border-gray-300 hover:border-gray-500";
+    ? "cursor-not-allowed transition shadow-sm border border-neutral-faint"
+    : "cursor-pointer transition shadow-sm hover:shadow-md group border border-neutral-faint hover:border-neutral-muted";
 });
 
 onMounted(() => {

package/src/components/UiButton/UiButton.vue

@@ -3,7 +3,7 @@
     :is="typeof to === 'string' ? 'a' : to ? 'RouterLink' : 'button'"
     :class="
       cn(
-        'UiButton inline-flex items-center justify-center gap-2 rounded-full border align-middle leading-normal font-medium whitespace-nowrap not-disabled:cursor-pointer focus:outline-hidden focus-visible:outline-blue disabled:cursor-not-allowed',
+        'UiButton inline-flex items-center justify-center gap-2 rounded-full border align-middle leading-normal font-medium whitespace-nowrap not-disabled:cursor-pointer focus:outline-hidden focus-visible:focus-outline disabled:cursor-not-allowed',
         appearanceClasses,
         BUTTON_SIZE_CLASSES[size],
         $attrs.class,

package/src/components/UiButtonGroup/UiButtonGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex *:rounded-none *:border *:border-r-0 *:border-gray-300 [&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>*:last-child]:border-r"
+    class="flex *:rounded-none *:border *:border-r-0 *:border-neutral-faint [&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>*:last-child]:border-r"
   >
     <slot />
   </div>

package/src/components/UiCard/UiCard.vue

@@ -1,6 +1,6 @@
 <template>
   <li
-    class="mb-4 rounded-2xl bg-gray-100 px-8 py-4 text-sm font-medium sm:w-full md:mr-7 md:w-[45.5%] lg:mr-8 lg:w-[46.5%]"
+    class="mb-4 rounded-2xl bg-neutral-whisper px-8 py-4 text-sm font-medium sm:w-full md:mr-7 md:w-[45.5%] lg:mr-8 lg:w-[46.5%]"
   >
     <slot></slot>
   </li>

package/src/components/UiCollapseNavigation/UiCollapseNavigation.vue

@@ -1,16 +1,18 @@
 <template>
-  <div :class="hasBorderTop ? 'border-t border-t-gray-300' : ''" />
+  <div :class="hasBorderTop ? 'border-t border-t-neutral-faint' : ''" />
   <UiButton
     appearance="secondary"
     class="flex w-full justify-between border-none"
     @click="toggleMenuHandler"
   >
-    <h3 class="text-xs font-semibold tracking-widest text-gray-700 uppercase">
+    <h3
+      class="text-xs font-semibold tracking-widest text-neutral-subtle uppercase"
+    >
       {{ headline }}
     </h3>
     <UiIcon
       name="chevron-down"
-      class="rounded-full text-gray-700 transition-transform duration-500 hover:bg-gray-300"
+      class="rounded-full text-neutral-subtle transition-transform duration-500 hover:bg-neutral-faint"
       :class="{ 'rotate-180': openMenu }"
     />
   </UiButton>

package/src/components/UiDatePicker/UiDatePicker.vue

@@ -64,21 +64,27 @@
     >
       <template #dp-input="{ value }">
         <UiButton
-          class="flex flex-none items-center justify-between"
+          class="flex justify-between"
           :class="{
             'border-neutral-subtle': internalIsOpen,
-            'w-full': triggerWidth == 'full',
+            'w-full min-w-0': triggerWidth === 'full',
+            'flex-none': triggerWidth === 'fit',
           }"
           :appearance="value ? 'primary' : 'secondary-alt'"
           :disabled
           size="sm"
           data-testid="datepicker-trigger"
         >
-          <div class="flex items-center gap-2">
-            <UiIcon v-if="leftTriggerIcon" :name="leftTriggerIcon" size="sm" />
-            {{ value || triggerPlaceholderText }}
+          <div class="flex min-w-0 items-center gap-2">
+            <UiIcon
+              v-if="leftTriggerIcon"
+              class="shrink-0"
+              :name="leftTriggerIcon"
+              size="sm"
+            />
+            <span class="truncate">{{ value || triggerPlaceholderText }}</span>
           </div>
-          <UiIcon name="chevron-down" size="sm" />
+          <UiIcon class="shrink-0" name="chevron-down" size="sm" />
         </UiButton>
       </template>
       <template v-if="leftSidebar" #left-sidebar>

package/src/components/UiFilterBadge/UiFilterBadge.vue

@@ -4,7 +4,7 @@
       class="mr-1 shrink-0"
       :style="{ color: iconColor }"
       :size="size"
-      :name="iconIsFilled ? 'saved-search-fill' : 'saved-search'"
+      :name="iconIsFilled ? 'saved-search-filled' : 'saved-search'"
     />
     <div
       :class="textSizeClass"

package/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/src/components/UiIcon/icons.ts

@@ -1,188 +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"),
-  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-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"),
-  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"),
+  "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/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/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,