@iqual/nuxt-icms 1.3.1 → 1.4.1

package/components/Paragraph/FAQ/Element/index.vue

@@ -2,7 +2,9 @@
   <AccordionItem
     :key="index"
     :value="`accordion-${index + 1}`"
-    class="border-none not-last:mb-1 [&>h3]:mb-0"
+    :class="
+      themedClass('accordionItemClass', 'not-last:mb-1 border-none [&>h3]:mb-0')
+    "
     v-bind="computedProps"
   >
     <AccordionTrigger
@@ -12,34 +14,61 @@
     >
       {{ question }}
     </AccordionTrigger>
-    <AccordionContent class="p-4 pb-6 text-base" ref="contentRef">
-      <div v-html="answer" />
+    <AccordionContent
+      :class="themedClass('accordionContentClass', 'p-4 pb-6 text-base')"
+      ref="contentRef"
+    >
+      <div v-html="answer" :class="themedClass('contentClass')" />
       <BlokkliField
         name="field_icms_buttons"
         :list="buttons"
-        class="mt-6 flex flex-wrap gap-6"
-        :class="[{ droptarget: isEditing }]"
+        :class="[
+          themedClass(
+            'buttonsContainerClass',
+            'mt-6 flex flex-wrap items-center gap-6',
+          ),
+          { droptarget: isEditing },
+        ]"
       />
     </AccordionContent>
   </AccordionItem>
 </template>
 
 <script lang="ts" setup>
+import type { ComponentPublicInstance } from 'vue'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { ParagraphIcmsFaqElementFragment } from '#graphql-operations'
 import { tv } from 'tailwind-variants'
 import { useAccordionScroll } from '@iqual/nuxt-icms/composables/useAccordionScroll'
-import type { ComponentPublicInstance } from 'vue'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsFaqElementFragment>()
 
+const themedClass = useTheme('ParagraphFAQElement')
+
 const accordionTrigger = tv({
-  base: 'items-center rounded-lg px-6 py-4 shadow-custom-small hover:no-underline gap-4 text-left text-base',
+  base: themedClass(
+    'accordionTriggerBase',
+    'items-center px-6 py-4 hover:no-underline gap-4 text-left text-base',
+  ),
   variants: {
     colorScheme: {
-      none: 'bg-white text-black',
-      dark: 'bg-gray-900 text-white',
-      light: 'bg-white text-black',
-      accent: 'bg-primary-700 text-white',
+      none: themedClass(
+        'accordionVariantsColorSchemeNone',
+        'bg-gray-50 text-black',
+      ),
+      dark: themedClass(
+        'accordionVariantsColorSchemeDark',
+        'bg-gray-900 text-white',
+      ),
+      light: themedClass(
+        'accordionVariantsColorSchemeLight',
+        'bg-white text-black',
+      ),
+      accent: themedClass(
+        'accordionVariantsColorSchemeAccent',
+        'bg-primary-700 text-white',
+      ),
     },
   },
 })
@@ -53,7 +82,7 @@ const handleClick = (index: number): void => {
   handleAccordionOpen()
 }
 
-const colorScheme = inject<string>('colorScheme')
+const colorScheme = inject<ColorScheme>('colorScheme')
 
 const computedProps = computed(() => {
   if (isEditing) {

package/components/Paragraph/FAQ/Layout/index.vue

@@ -1,41 +1,71 @@
 <template>
-  <DesignSystemAtomsContainer :spacing="spacing" :colorScheme="colorScheme">
-    <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-12">
+  <DesignSystemAtomsContainer
+    :spacing="spacing"
+    :colorScheme="colorScheme"
+    :class="themedClass('containerClass')"
+  >
+    <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
+      <div
+        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-12')"
+      >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
+          :pretitleClass="themedClass('pretitleClass')"
           :title="title"
+          :titleClass="themedClass('titleClass', 'mb-0')"
           :subtitle="subtitle"
+          :subtitleClass="themedClass('subtitleClass')"
           :titleWeight="titleWeight"
           :titleStyle="titleStyle"
-          titleClass="mb-0"
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-5">
+      <div
+        :class="themedClass('secondColumnClass', 'col-span-12 md:col-span-5')"
+      >
         <DesignSystemOrganismsContentBlock
-          :subtitle="subtitle"
           :text="text"
+          :textClass="themedClass('textClass')"
           :media="media"
-          mediaClass="size-full rounded-lg overflow-hidden"
-          mediaSliderClass="mt-0 rounded-lg overflow-hidden"
+          :mediaClass="themedClass('mediaClass')"
+          :mediaContainerClass="themedClass('mediaContainerClass', 'mt-0')"
           :colorScheme="colorScheme"
         />
         <BlokkliField
           name="field_icms_buttons"
           :list="buttons"
-          class="mt-6 flex flex-wrap gap-6"
-          :class="[buttonAlignment, { droptarget: isEditing }]"
+          :class="
+            cn(
+              themedClass(
+                'buttonsContainerClass',
+                'mt-6 flex flex-wrap items-center gap-6',
+              ),
+              buttonAlignment,
+              { droptarget: isEditing },
+            )
+          "
         />
       </div>
       <div
-        class="relative col-span-12 mt-4 md:col-span-6 md:col-start-7 md:mt-0"
+        :class="
+          themedClass(
+            'thirdColumnClass',
+            'relative col-span-12 mt-4 md:col-span-6 md:col-start-7 md:mt-0',
+          )
+        "
       >
-        <Accordion :default-value="defaultValue" :collapsible="true">
+        <Accordion
+          :default-value="defaultValue"
+          :collapsible="true"
+          :class="themedClass('accordionClass')"
+        >
           <BlokkliField
             name="field_icms_faq_elements"
             :list="faqElements"
-            :class="{ droptarget: isEditing }"
+            :class="[
+              themedClass('accordionsContainerClass'),
+              { droptarget: isEditing },
+            ]"
           />
         </Accordion>
       </div>
@@ -45,9 +75,13 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutFaqFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 
 const props = defineProps<ParagraphIcmsLayoutFaqFragment>()
 
+const themedClass = useTheme('ParagraphFAQLayout')
+
 const defaultValue = computed(() => {
   if (!isEditing) {
     return 'accordion-1'

package/components/Paragraph/FlipTeasers/index.vue

@@ -1,20 +1,35 @@
 <template>
-  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
-    <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-12">
+  <DesignSystemAtomsContainer
+    :colorScheme="colorScheme"
+    :spacing="spacing"
+    :class="themedClass('containerClass')"
+  >
+    <DesignSystemAtomsGridRow :class="themedClass('firstRowClass')">
+      <div
+        :class="
+          themedClass('firstRowFirstColumnClass', 'col-span-12 md:col-span-12')
+        "
+      >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
+          :pretitleClass="themedClass('pretitleClass')"
           :title="title"
+          :titleClass="themedClass('titleClass', 'mb-0')"
           :titleWeight="titleWeight"
           :titleStyle="titleStyle"
-          titleClass="mb-0"
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-9">
+      <div
+        :class="
+          themedClass('firstRowSecondColumnClass', 'col-span-12 md:col-span-9')
+        "
+      >
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
+          :subtitleClass="themedClass('subtitleClass')"
           :text="text"
+          :textClass="themedClass('textClass')"
           :titleWeight="titleWeight"
           :titleStyle="titleStyle"
           :colorScheme="colorScheme"
@@ -22,7 +37,9 @@
       </div>
     </DesignSystemAtomsGridRow>
 
-    <DesignSystemAtomsGridRow class="mt-10 md:mt-20">
+    <DesignSystemAtomsGridRow
+      :class="themedClass('secondRowClass', 'mt-10 md:mt-20')"
+    >
       <DesignSystemOrganismsFlipTeaser
         v-for="flipTeaser in flipTeasers"
         :image="flipTeaser?.image || flipTeaser?.mainImage"
@@ -40,9 +57,12 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutFlipTeasersFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 const props = defineProps<ParagraphIcmsLayoutFlipTeasersFragment>()
 
+const themedClass = useTheme('ParagraphFlipTeasers')
+
 const { options, parentType } = useAttrs().blokkliData
 
 const colorScheme = computed(() => {

package/components/Paragraph/Gallery/index.vue

@@ -1,42 +1,71 @@
 <template>
-  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
-    <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-12">
+  <DesignSystemAtomsContainer
+    :colorScheme="colorScheme"
+    :spacing="spacing"
+    :class="themedClass('containerClass')"
+  >
+    <DesignSystemAtomsGridRow :class="themedClass('firstRowClass')">
+      <div
+        :class="
+          themedClass('firstRowFirstColumnClass', 'col-span-12 md:col-span-12')
+        "
+      >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
+          :pretitleClass="themedClass('pretitleClass')"
           :title="title"
+          :titleClass="themedClass('titleClass', 'mb-0')"
           :titleWeight="titleWeight"
           :titleStyle="titleStyle"
-          titleClass="mb-0"
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-9">
+      <div
+        :class="
+          themedClass('firstRowSecondColumnClass', 'col-span-12 md:col-span-9')
+        "
+      >
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
+          :subtitleClass="themedClass('subtitleClass')"
           :text="text"
+          :textClass="themedClass('textClass')"
           :colorScheme="colorScheme"
         />
       </div>
     </DesignSystemAtomsGridRow>
 
-    <DesignSystemAtomsGridRow v-if="media?.length" class="mt-10 md:mt-20">
+    <DesignSystemAtomsGridRow
+      v-if="media?.length"
+      :class="themedClass('secondRowClass', 'mt-10 md:mt-20')"
+    >
       <div
         v-for="(image, index) in media"
         :key="index"
-        class="gallery-item col-span-12 aspect-square overflow-hidden rounded-lg md:col-span-6 lg:col-span-3"
+        :class="[
+          'gallery-item',
+          themedClass(
+            'galleryItemClass',
+            'col-span-12 aspect-square md:col-span-6 lg:col-span-3',
+          ),
+        ]"
         @click="openLightbox(index)"
       >
         <MediaImage
           v-if="image"
           :media="image"
           imageAspectRatios="1/1"
-          imageSizes="xs:100vw sm-100vw md:320px lg:400px"
-          mediaClass="size-full cursor-pointer object-cover object-center"
+          imageSizes="xs:100vw sm:100vw md:320px lg:400px"
+          :mediaClass="themedClass('mediaClass', 'w-full cursor-pointer')"
+          :figcaptionClass="themedClass('figcaptionClass')"
+          :elementClass="themedClass('elementClass')"
         />
       </div>
+
       <DesignSystemMoleculesMediaLightbox
-        :media-objects="(media?.filter((item): item is MediaFragment => Boolean(item)) || [])"
+        :media-objects="
+          media?.filter((item): item is MediaFragment => Boolean(item)) || []
+        "
         :is-open="isOpen"
         :current-index="currentIndex"
         :captions="captions"
@@ -50,12 +79,15 @@
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutGalleryFragment } from '#graphql-operations'
 import type { MediaFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import { useMediaLightbox } from '@iqual/nuxt-icms/composables/useMediaLightbox'
 
 const { options } = useAttrs().blokkliData as any
 
 const props = defineProps<ParagraphIcmsLayoutGalleryFragment>()
 
+const themedClass = useTheme('ParagraphGallery')
+
 const {
   isOpen,
   currentIndex,

package/components/Paragraph/HeroImage/index.vue

@@ -1,22 +1,29 @@
 <template>
   <DesignSystemAtomsContainer
     :spacing="{ top: 'none', bottom: 'none' }"
-    :class="containerClassList"
-    class="relative flex min-h-[400] items-center md:min-h-[700px]"
+    :class="
+      cn(
+        themedClass(
+          'containerClass',
+          'relative flex min-h-[400px] items-center md:min-h-[700px]',
+        ),
+        containerClassList,
+      )
+    "
   >
     <!-- Overlay -->
     <div
       v-if="options.colorMode !== 'none'"
-      class="absolute inset-0 z-10"
-      :class="overlayClass"
+      :class="
+        cn(themedClass('overlayClass', 'absolute inset-0 z-10'), overlayClass)
+      "
     />
 
     <!-- Image/video wrapper -->
-    <div class="absolute inset-0">
+    <div :class="themedClass('mediaContainerClass', 'absolute inset-0')">
       <Media
         v-if="medium"
         :media="medium"
-        mediaClass="size-full object-cover"
         imageAspectRatios="xs:1/1 md:16/9"
         imageSizes="xs:100vw sm:100vw md:100vw lg:100vw xl:100vw xxl:100vw"
         imageLoading="eager"
@@ -24,34 +31,54 @@
         videoAutoplay
         videoMuted
         videoLoop
+        :mediaClass="themedClass('mediaClass')"
+        :elementClass="
+          themedClass('elementClass', 'size-full object-cover object-center')
+        "
+        :figcaptionClass="themedClass('figcaptionClass')"
       />
-      <div class="absolute inset-0" />
     </div>
 
     <!-- Text row -->
     <DesignSystemAtomsGridRow
       v-if="pretitle || title || subtitle"
-      class="relative z-10 px-4 py-12 md:px-12 md:py-32"
+      :class="
+        themedClass('rowClass', 'relative z-10 px-4 py-12 md:px-12 md:py-32')
+      "
     >
-      <div class="col-span-12 md:col-span-6" :class="columnClassList">
+      <div
+        :class="
+          cn(
+            themedClass('columnClass', 'col-span-12 md:col-span-6'),
+            columnClassList,
+          )
+        "
+      >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="textShadow"
+          :pretitleClass="cn(themedClass('pretitleClass'), textShadow)"
           :title="title"
           :titleWeight="titleWeight"
           :titleStyle="titleStyle"
-          :titleClass="textShadow"
+          :titleClass="cn(themedClass('titleClass'), textShadow)"
           :subtitle="subtitle"
-          :subtitleClass="textShadow"
+          :subtitleClass="cn(themedClass('subtitleClass'), textShadow)"
           :text="text"
-          :textClass="textShadow"
+          :textClass="cn(themedClass('textClass'), textShadow)"
         />
-
         <BlokkliField
           name="field_icms_buttons"
           :list="buttons"
-          class="mt-6 flex flex-wrap gap-6"
-          :class="[buttonAlignment, { droptarget: isEditing }]"
+          :class="
+            cn(
+              themedClass(
+                'buttonsContainerClass',
+                'mt-6 flex flex-wrap items-center gap-6',
+              ),
+              buttonAlignment,
+              { droptarget: isEditing },
+            )
+          "
         />
       </div>
     </DesignSystemAtomsGridRow>
@@ -60,9 +87,13 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutHeroImageFragment } from '#graphql-operations'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsLayoutHeroImageFragment>()
 
+const themedClass = useTheme('ParagraphHeroImage')
+
 const prefetch = provide('prefetch', true)
 
 const { options, isEditing } = useAttrs().blokkliData
@@ -152,5 +183,20 @@ const buttonAlignment = computed(() => {
       return 'justify-start'
   }
 })
+
+const elementClass = computed(() => {
+  const classList = ['size-full object-cover']
+  if (options.value.imageAlignment === 'top') {
+    classList.push('object-top')
+  }
+  if (options.value.imageAlignment === 'center') {
+    classList.push('object-center')
+  }
+  if (options.value.imageAlignment === 'bottom') {
+    classList.push('object-bottom')
+  }
+  return classList.join(' ')
+})
+
 provide('colorScheme', options.value.colorMode ?? 'none')
 </script>

package/components/Paragraph/IconText/Element/index.vue

@@ -1,8 +1,10 @@
 <template>
   <DesignSystemMoleculesIconText
     :title="title"
+    :titleClass="themedClass('titleClass')"
     :titleWeight="titleWeight"
     :text="text"
+    :textClass="themedClass('textClass')"
     :icon="icon"
     :colorScheme="colorScheme"
   />
@@ -10,9 +12,13 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsIconTextElementFragment } from '#graphql-operations'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsIconTextElementFragment>()
 
-const colorScheme = inject<string>('colorScheme')
+const themedClass = useTheme('ParagraphIconTextElement')
+
+const colorScheme = inject<ColorScheme>('colorScheme')
 const titleWeight = inject<string>('titleWeight')
 </script>

package/components/Paragraph/IconText/Layout/index.vue

@@ -1,39 +1,62 @@
 <template>
-  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
-    <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-12">
+  <DesignSystemAtomsContainer
+    :colorScheme="colorScheme"
+    :spacing="spacing"
+    :class="themedClass('containerClass')"
+  >
+    <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
+      <div
+        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-12')"
+      >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
+          :pretitleClass="themedClass('pretitleClass')"
           :title="title"
+          :titleClass="themedClass('titleClass', 'mb-0')"
           :subtitle="subtitle"
+          :subtitleClass="themedClass('subtitleClass')"
           :titleWeight="titleWeight"
           :titleStyle="titleStyle"
-          titleClass="mb-0"
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-5">
+      <div
+        :class="themedClass('secondColumnClass', 'col-span-12 md:col-span-5')"
+      >
         <DesignSystemOrganismsContentBlock
-          :subtitle="subtitle"
           :text="text"
+          :textClass="themedClass('textClass')"
           :media="media"
-          mediaClass="size-full rounded-lg overflow-hidden"
-          mediaSliderClass="mt-0 rounded-lg overflow-hidden"
+          :mediaClass="themedClass('mediaClass')"
+          :mediaContainerClass="themedClass('mediaContainerClass', 'mt-0')"
           :colorScheme="colorScheme"
         />
 
         <BlokkliField
           name="field_icms_buttons"
           :list="buttons"
-          class="mt-6 flex flex-wrap gap-6"
-          :class="[buttonAlignment, { droptarget: isEditing }]"
+          :class="
+            cn(
+              themedClass(
+                'buttonsContainerClass',
+                'mt-6 flex flex-wrap items-center gap-6',
+              ),
+              buttonAlignment,
+              { droptarget: isEditing },
+            )
+          "
         />
       </div>
       <BlokkliField
         name="field_icms_icon_text_elements"
         :list="iconTextElements"
-        class="col-span-12 mt-4 flex flex-col gap-6 md:col-span-6 md:col-start-7 md:mt-0"
-        :class="{ droptarget: isEditing }"
+        :class="[
+          themedClass(
+            'iconTextElementsContainerClass',
+            'col-span-12 mt-4 flex flex-col gap-6 md:col-span-6 md:col-start-7 md:mt-0',
+          ),
+          { droptarget: isEditing },
+        ]"
       />
     </DesignSystemAtomsGridRow>
   </DesignSystemAtomsContainer>
@@ -41,9 +64,13 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTextcolIconlistFragment } from '#graphql-operations'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 const props = defineProps<ParagraphIcmsLayoutTextcolIconlistFragment>()
 
+const themedClass = useTheme('ParagraphIconTextLayout')
+
 const { options, isEditing } = useAttrs().blokkliData
 
 const colorScheme = computed(() => {