@iqual/nuxt-icms 1.3.1 → 1.4.0

package/components/Media/RemoteVideo/index.vue

@@ -1,35 +1,50 @@
 <template>
-  <VuepalRemoteVideo v-slot="{ embedUrl }" :url="media?.link">
-    <figure class="w-full max-w-[1920px]" :class="mediaClass">
+  <VuepalRemoteVideo
+    v-slot="{ embedUrl }"
+    :url="media?.link"
+    :class="themedClass('containerClass')"
+  >
+    <figure :class="themedClass('mediaClass', 'w-full max-w-[1920px]')">
       <iframe
         v-if="embedUrl && isPlaying"
         :src="embedUrl"
         :title="media?.title"
         allow="autoplay; encrypted-media; picture-in-picture"
         allowfullscreen
-        class="aspect-video w-full"
-        :class="elementClass"
+        :class="themedClass('elementClass', 'aspect-video w-full')"
       />
 
       <button
         v-if="!isPlaying"
-        class="relative flex aspect-video w-full cursor-pointer items-center justify-center"
-        :class="elementClass"
         @click.prevent="isPlaying = true"
+        :class="
+          themedClass(
+            'playButtonClass',
+            'relative flex aspect-video w-full cursor-pointer items-center justify-center',
+          )
+        "
       >
         <img
           :src="thumbnailUrl"
-          class="absolute left-0 top-0 aspect-video size-full object-cover"
           :alt="thumbnailAlt"
+          :class="
+            themedClass(
+              'thumbnailClass',
+              'absolute left-0 top-0 aspect-video size-full object-cover',
+            )
+          "
         />
 
-        <SpriteSymbol name="play" class="z-10 size-[75px]" />
+        <SpriteSymbol
+          name="play"
+          :class="themedClass('playButtonIconClass', 'z-10 size-[75px]')"
+        />
       </button>
 
       <figcaption
         v-if="showCaption && media?.caption"
         v-text="media?.caption"
-        :class="figcaptionClass"
+        :class="themedClass('figcaptionClass', 'mt-2 text-center italic')"
       />
     </figure>
   </VuepalRemoteVideo>
@@ -37,19 +52,17 @@
 
 <script lang="ts" setup>
 import type { MediaRemoteVideoFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme()
 
-const props = withDefaults(
-  defineProps<{
-    media: MediaRemoteVideoFragment
-    mediaClass?: string
-    elementClass?: string
-    showCaption?: boolean
-    figcaptionClass?: string
-  }>(),
-  {
-    figcaptionClass: 'mt-2 italic text-center',
-  },
-)
+const props = defineProps<{
+  media: MediaRemoteVideoFragment
+  mediaClass?: string
+  elementClass?: string
+  showCaption?: boolean
+  figcaptionClass?: string
+}>()
 
 const isPlaying = ref(false)
 

package/components/Media/Video/index.vue

@@ -1,13 +1,12 @@
 <template>
-  <figure :class="mediaClass">
+  <figure :class="themedClass('mediaClass')">
     <video
       :controls="videoControls"
       :muted="videoMuted"
       :autoplay="videoAutoplay"
       :loop="videoLoop"
       :poster="media?.thumbnail?.entity?.uri?.first?.url"
-      class="w-full"
-      :class="elementClass"
+      :class="themedClass('elementClass', 'w-full')"
     >
       <source v-if="media?.url?.path" :src="media.url.path" type="video/mp4" />
       Your browser does not support the video tag.
@@ -15,13 +14,16 @@
     <figcaption
       v-if="showCaption && media?.caption"
       v-text="media?.caption"
-      :class="figcaptionClass"
+      :class="themedClass('figcaptionClass', 'mt-2 text-center italic')"
     />
   </figure>
 </template>
 
 <script lang="ts" setup>
 import type { MediaVideoFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme()
 
 withDefaults(
   defineProps<{
@@ -40,7 +42,6 @@ withDefaults(
     videoMuted: true,
     videoAutoplay: true,
     videoLoop: false,
-    figcaptionClass: 'mt-2 italic text-center',
   },
 )
 </script>

package/components/Node/Icms/Page/Teaser/index.vue

@@ -12,9 +12,11 @@
 </template>
 
 <script lang="ts" setup>
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { NodeIcmsPageTeaserFragment } from '#graphql-operations'
-const props = defineProps<NodeIcmsPageTeaserFragment>()
-const { $texts } = useNuxtApp()
-const colorScheme = inject<string>('colorScheme')
+
+defineProps<NodeIcmsPageTeaserFragment>()
+
+const colorScheme = inject<ColorScheme>('colorScheme')
 const titleWeight = inject<string>('titleWeight')
-</script>
+</script>

package/components/Node/Icms/Page/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <main>
     <BlokkliProvider v-slot="{ entity }" v-bind="blokkliProps" :entity="props">
       <BlokkliField :list="paragraphs" name="field_icms_paragraphs" />
     </BlokkliProvider>
-  </div>
+  </main>
 </template>
 
 <script lang="ts" setup>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full md:w-auto">
+  <div :class="themedClass('containerClass', 'w-full md:w-auto')">
     <DesignSystemAtomsButton
       :label="label"
       :subline="subline"
@@ -10,14 +10,21 @@
       :style="buttonStyle"
       :textAlignment="textAlignment"
       :colorScheme="colorScheme"
+      :buttonClass="themedClass('buttonClass')"
+      :labelClass="themedClass('labelClass')"
+      :sublineClass="themedClass('sublineClass')"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { ParagraphIcmsButtonElementFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme()
 
 defineProps<ParagraphIcmsButtonElementFragment>()
 
-const colorScheme = inject<string>('colorScheme')
+const colorScheme = inject<ColorScheme>('colorScheme')
 </script>

package/components/Paragraph/CallToAction/index.vue

@@ -2,34 +2,64 @@
   <DesignSystemAtomsContainer
     :colorScheme="colorScheme"
     :spacing="{ top: 'none', bottom: 'none' }"
-    :class="containerClassList"
+    :class="cn(themedClass('containerClass'), containerClassList)"
   >
-    <DesignSystemAtomsGridRow class="pb-14 md:pb-0">
-      <div class="col-span-12 flex justify-center md:col-span-12 xl:col-span-3">
+    <DesignSystemAtomsGridRow :class="themedClass('rowClass', 'pb-14 md:pb-0')">
+      <div
+        :class="
+          themedClass(
+            'firstColumnClass',
+            'col-span-12 flex justify-center md:col-span-12 xl:col-span-3',
+          )
+        "
+      >
         <Media
           v-if="image"
           :media="image"
           imageSizes="xs:175px xl:350px"
           imageAspectRatios="1/1"
-          mediaClass="-mt-12 xl:w-full"
-          elementClass="size-full object-cover object-center aspect-square rounded-lg xl:rounded-none xl:rounded-t-lg"
+          :mediaClass="themedClass('mediaClass', '-mt-12 xl:w-full')"
+          :figcaptionClass="themedClass('figcaptionClass')"
+          :elementClass="themedClass('elementClass')"
         />
       </div>
-      <div class="col-span-12 flex items-center md:col-span-9 xl:col-span-6">
+      <div
+        :class="
+          themedClass(
+            'secondColumnClass',
+            'col-span-12 flex items-center md:col-span-9 xl:col-span-6',
+          )
+        "
+      >
         <div
           v-if="text"
-          class="ck-content py-8 text-lg md:pr-8 xl:p-8 xl:text-2xl"
+          :class="
+            themedClass(
+              'textClass',
+              'ck-content py-8 text-lg md:pr-8 xl:p-8 xl:text-2xl',
+            )
+          "
           v-html="text"
         />
       </div>
       <div
-        class="col-span-12 flex items-center justify-center md:col-span-3 xl:col-span-3"
+        :class="
+          themedClass(
+            'thirdColumnClass',
+            'col-span-12 flex items-center justify-center md:col-span-3 xl:col-span-3',
+          )
+        "
       >
         <BlokkliField
           name="field_icms_buttons"
           :list="buttons"
-          class="flex flex-wrap items-center justify-center gap-4"
-          :class="{ droptarget: isEditing }"
+          :class="[
+            themedClass(
+              'buttonsContainerClass',
+              'flex flex-wrap items-center justify-center gap-4',
+            ),
+            { droptarget: isEditing },
+          ]"
         />
       </div>
     </DesignSystemAtomsGridRow>
@@ -38,6 +68,9 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutCallToActionFragment } from '#graphql-operations'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+const themedClass = useTheme()
 
 defineProps<ParagraphIcmsLayoutCallToActionFragment>()
 

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

@@ -10,10 +10,11 @@
 </template>
 
 <script lang="ts" setup>
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { ParagraphIcmsCardElementFragment } from '#graphql-operations'
 
 defineProps<ParagraphIcmsCardElementFragment>()
 
-const colorScheme = inject<string>('colorScheme')
+const colorScheme = inject<ColorScheme>('colorScheme')
 const titleWeight = inject<string>('titleWeight')
 </script>

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

@@ -1,22 +1,34 @@
 <template>
-  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
-    <DesignSystemAtomsGridRow v-if="pretitle || title">
-      <div class="col-span-12 md:col-span-12">
+  <DesignSystemAtomsContainer
+    :colorScheme="colorScheme"
+    :spacing="spacing"
+    :class="themedClass('containerClass')"
+  >
+    <DesignSystemAtomsGridRow
+      v-if="pretitle || title"
+      :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')"
           :titleWeight="titleWeight"
           :titleStyle="titleStyle"
-          titleClass="mb-0"
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-9">
+      <div
+        :class="themedClass('secondColumnClass', 'col-span-12 md:col-span-9')"
+      >
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
+          :subtitleClass="themedClass('subtitleClass')"
           :text="text"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
+          :textClass="themedClass('textClass')"
           :colorScheme="colorScheme"
         />
       </div>
@@ -25,11 +37,16 @@
     <BlokkliField
       name="field_icms_card_elements"
       :list="cards"
-      class="container mx-auto grid gap-x-6 gap-y-20"
       :class="[
-        'grid-3-col',
+        themedClass(
+          'cardsContainerClass',
+          'grid-3-col container mx-auto grid gap-x-6 gap-y-12',
+        ),
         { droptarget: isEditing },
-        { 'mt-10 md:mt-20': pretitle || title },
+        {
+          [themedClass('buttonsContainerOffsetClass', 'mt-10 md:mt-20')]:
+            pretitle || title,
+        },
       ]"
     />
   </DesignSystemAtomsContainer>
@@ -37,6 +54,8 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutCardsFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+const themedClass = useTheme()
 
 const props = defineProps<ParagraphIcmsLayoutCardsFragment>()
 

package/components/Paragraph/Contact/index.vue

@@ -1,39 +1,65 @@
 <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="{ droptarget: isEditing }"
+          :class="[
+            themedClass(
+              'buttonsContainerClass',
+              'mt-6 flex flex-wrap items-center gap-6',
+            ),
+            { droptarget: isEditing },
+          ]"
         />
       </div>
-      <div class="col-span-12 md:col-span-6 md:col-start-7">
+      <div
+        :class="
+          themedClass(
+            'thirdColumnClass',
+            'col-span-12 md:col-span-6 md:col-start-7',
+          )
+        "
+      >
         <DrupalWebform
           v-if="contactWebform?.id"
           :form-id="contactWebform?.id"
-          class="mt-4 md:mt-0"
+          :wrapperClass="themedClass('wrapperClass', 'mt-4 md:mt-0')"
+          :formWrapperClass="themedClass('formWrapperClass')"
+          :messagesClass="themedClass('messagesClass')"
+          :elementWrapperClass="themedClass('elementWrapperClass')"
+          :elementClass="themedClass('elementClass')"
         />
       </div>
     </DesignSystemAtomsGridRow>
@@ -42,11 +68,14 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutContactFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsLayoutContactFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
+const themedClass = useTheme()
+
 const colorScheme = computed(() => {
   return options.value.colorScheme
 })

package/components/Paragraph/Downloads/index.vue

@@ -1,40 +1,66 @@
 <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')"
           :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
           :media="media"
-          mediaClass="size-full rounded-lg overflow-hidden"
-          mediaSliderClass="mt-0 rounded-lg overflow-hidden"
+          :mediaClass="themedClass('mediaClass')"
+          :mediaContainerClass="themedClass('mediaContainerClass', 'mt-0')"
           :text="text"
+          :textClass="themedClass('textClass')"
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:order-last md:col-span-7 md:col-start-7">
-        <div v-if="documents && documents.length">
-          <div v-for="(document, index) in documents" :key="index">
-            <a
-              :href="document.mediaFileUrl?.path"
-              target="_blank"
-              rel="noopener noreferrer"
-              :class="download({ colorScheme })"
-            >
-              <div :class="downloadIcon({ colorScheme })">
-                <SpriteSymbol name="download" class="size-5" />
-              </div>
-              <DesignSystemOrganismsContentBlock :text="document.name" />
-            </a>
-          </div>
+      <div
+        :class="
+          themedClass(
+            'thirdColumnClass',
+            'col-span-12 md:order-last md:col-span-7 md:col-start-7',
+          )
+        "
+      >
+        <div
+          v-if="documents && documents.length"
+          :class="themedClass('downloadsContainer')"
+        >
+          <a
+            v-for="(document, index) in documents"
+            :key="index"
+            :href="document?.mediaFileUrl?.path"
+            target="_blank"
+            rel="noopener noreferrer"
+            :class="download({ colorScheme })"
+          >
+            <div :class="downloadIconContainer({ colorScheme })">
+              <SpriteSymbol
+                name="download"
+                :class="themedClass('downloadIcon', 'size-5')"
+              />
+            </div>
+            <DesignSystemOrganismsContentBlock
+              :text="document?.name"
+              :class="themedClass('downloadFileNameClass')"
+            />
+          </a>
         </div>
       </div>
     </DesignSystemAtomsGridRow>
@@ -44,10 +70,12 @@
 <script lang="ts" setup>
 import { tv } from 'tailwind-variants'
 import type { ParagraphIcmsLayoutDownloadsFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsLayoutDownloadsFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
+const themedClass = useTheme()
 
 const colorScheme = computed(() => options.value.colorScheme)
 
@@ -56,13 +84,19 @@ const spacing = computed(() => {
 })
 
 const download = tv({
-  base: 'flex items-center gap-4 rounded-lg mb-4 py-4 px-5 shadow-custom-small',
+  base: themedClass('downloadBase', 'flex items-center gap-4 mb-4 py-4 px-5'),
   variants: {
     colorScheme: {
-      none: 'bg-white',
-      dark: 'bg-gray-900 text-white',
-      light: 'bg-white',
-      accent: 'bg-primary-700 text-white',
+      none: themedClass('downloadVariantsColorSchemeNone', 'bg-gray-50'),
+      dark: themedClass(
+        'downloadVariantsColorSchemeDark',
+        'bg-gray-900 text-white',
+      ),
+      light: themedClass('downloadVariantsColorSchemeLight', 'bg-white'),
+      accent: themedClass(
+        'downloadVariantsColorSchemeAccent',
+        'bg-primary-700 text-white',
+      ),
     },
   },
   defaultVariants: {
@@ -70,14 +104,29 @@ const download = tv({
   },
 })
 
-const downloadIcon = tv({
-  base: 'w-10 shrink-0 rounded-full flex justify-center items-center aspect-square',
+const downloadIconContainer = tv({
+  base: themedClass(
+    'downloadIconContainerBase',
+    'w-10 shrink-0 rounded-full flex justify-center items-center aspect-square',
+  ),
   variants: {
     colorScheme: {
-      none: 'bg-gray-50',
-      dark: 'bg-gray-400',
-      light: 'bg-gray-50',
-      accent: 'bg-primary-400',
+      none: themedClass(
+        'downloadIconContainerVariantsColorSchemeNone',
+        'bg-white',
+      ),
+      dark: themedClass(
+        'downloadIconContainerVariantsColorSchemeDark',
+        'bg-gray-950',
+      ),
+      light: themedClass(
+        'downloadIconContainerVariantsColorSchemeLight',
+        'bg-gray-50',
+      ),
+      accent: themedClass(
+        'downloadIconContainerVariantsColorSchemeAccent',
+        'bg-primary-600',
+      ),
     },
   },
   defaultVariants: {