@iqual/nuxt-icms 1.3.1 → 1.4.1

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

@@ -1,18 +1,33 @@
 <template>
-  <DesignSystemAtomsContainer :spacing="spacing" :colorScheme="colorScheme">
-    <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-4">
+  <DesignSystemAtomsContainer
+    :spacing="spacing"
+    :colorScheme="colorScheme"
+    :class="themedClass('containerClass')"
+  >
+    <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
+      <div
+        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-4')"
+      >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
+          :pretitleClass="themedClass('pretitleClass')"
           :title="title"
+          :titleClass="themedClass('titleClass', 'mb-0')"
           :titleWeight="titleWeight"
           :titleStyle="titleStyle"
-          titleClass="mb-0"
           :subtitle="subtitle"
+          :subtitleClass="themedClass('subtitleClass')"
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-7 md:col-start-6">
+      <div
+        :class="
+          themedClass(
+            'secondColumnClass',
+            'col-span-12 md:col-span-7 md:col-start-6',
+          )
+        "
+      >
         <!-- Slider -->
         <Carousel :class="carousel({ colorScheme })">
           <BlokkliField
@@ -30,21 +45,37 @@
             proxy-mode
             v-else
           >
-            <CarouselContent>
+            <CarouselContent :class="themedClass('carouselContent')">
               <BlokkliItem v-for="item in items" v-bind="item" />
             </CarouselContent>
           </BlokkliField>
           <CarouselPrevious
-            class="left-3 xl:left-16"
-            :class="carouselButton({ colorScheme })"
+            :class="
+              cn(
+                themedClass('carouselButtonPrevClass', 'left-3 xl:left-16'),
+                carouselButton({ colorScheme }),
+              )
+            "
           >
-            <ChevronLeft :size="24" :stroke-width="1" />
+            <ChevronLeft
+              :size="24"
+              :stroke-width="1"
+              :class="themedClass('carouselButtonPrevIconClass')"
+            />
           </CarouselPrevious>
           <CarouselNext
-            class="right-3 xl:right-16"
-            :class="carouselButton({ colorScheme })"
+            :class="
+              cn(
+                themedClass('carouselButtonNextClass', 'right-3 xl:right-16'),
+                carouselButton({ colorScheme }),
+              )
+            "
           >
-            <ChevronRight :size="24" :stroke-width="1" />
+            <ChevronRight
+              :size="24"
+              :stroke-width="1"
+              :class="themedClass('carouselButtonNextIconClass')"
+            />
           </CarouselNext>
         </Carousel>
       </div>
@@ -54,21 +85,31 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTestimonialsFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import { tv } from 'tailwind-variants'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
 
 const props = defineProps<ParagraphIcmsLayoutTestimonialsFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
+const themedClass = useTheme('ParagraphTestimonialLayout')
+
 const carousel = tv({
-  base: 'rounded-lg px-16 py-8 shadow-custom xl:px-40 xl:py-12',
+  base: themedClass('carouselBase', 'px-16 py-8 xl:px-40 xl:py-12'),
   variants: {
     colorScheme: {
-      none: 'bg-white',
-      dark: 'bg-gray-900 text-white',
-      light: 'bg-white',
-      accent: 'bg-primary-700 text-white',
+      none: themedClass('carouselVariantsColorSchemeNone', 'bg-gray-50'),
+      dark: themedClass(
+        'carouselVariantsColorSchemeDark',
+        'bg-gray-900 text-white',
+      ),
+      light: themedClass('carouselVariantsColorSchemeLight', 'bg-white'),
+      accent: themedClass(
+        'carouselVariantsColorSchemeAccent',
+        'bg-primary-700 text-white',
+      ),
     },
   },
   defaultVariants: {
@@ -77,15 +118,28 @@ const carousel = tv({
 })
 
 const carouselButton = tv({
-  base: 'size-10 border-none disabled:opacity-40 @sm:size:12 @md:size-16 [&_svg]:size-auto',
+  base: themedClass(
+    'carouselButtonBase',
+    'shadow-none size-10 border-none disabled:opacity-40 @sm:size:12 @md:size-16 [&_svg]:size-auto',
+  ),
   variants: {
     colorScheme: {
-      none: 'bg-gray-50 text-black hover:bg-black hover:text-white dark:bg-gray-50 dark:text-black hover:dark:bg-black hover:dark:text-white',
-      dark: 'bg-black text-white hover:bg-gray-50 hover:text-black dark:bg-black dark:text-white hover:dark:bg-gray-50 hover:dark:text-black',
-      light:
-        'bg-gray-50 text-black hover:bg-black hover:text-white dark:bg-gray-50 dark:text-black hover:dark:bg-black hover:dark:text-white',
-      accent:
-        'bg-primary-600 text-white hover:bg-primary-800 hover:text-white dark:bg-primary-600 dark:text-white hover:dark:bg-primary-800 hover:dark:text-white',
+      none: themedClass(
+        'carouselButtonVariantsColorSchemeNone',
+        'bg-white text-black hover:bg-gray-100 dark:bg-white dark:text-black hover:dark:bg-gray-100',
+      ),
+      dark: themedClass(
+        'carouselButtonVariantsColorSchemeDark',
+        'bg-gray-800 text-white hover:bg-gray-950 dark:bg-gray-800 dark:text-white hover:dark:bg-gray-950',
+      ),
+      light: themedClass(
+        'carouselButtonVariantsColorSchemeLight',
+        'bg-gray-50 text-black hover:bg-gray-100 dark:bg-gray-50 dark:text-black hover:dark:bg-gray-100',
+      ),
+      accent: themedClass(
+        'carouselButtonVariantsColorSchemeAccent',
+        'bg-primary-600 text-white hover:bg-primary-800 dark:bg-primary-600 dark:text-white hover:dark:bg-primary-800',
+      ),
     },
   },
   defaultVariants: {

package/components/Paragraph/Text/index.vue

@@ -1,12 +1,20 @@
 <template>
-  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
-    <DesignSystemAtomsGridRow>
-      <div :class="textWrapperClassList">
+  <DesignSystemAtomsContainer
+    :colorScheme="colorScheme"
+    :spacing="spacing"
+    :class="themedClass('containerClass')"
+  >
+    <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
+      <div :class="themedClass('columnClass', textWrapperClassList)">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
+          :pretitleClass="themedClass('pretitleClass')"
           :title="title"
+          :titleClass="themedClass('titleClass')"
           :subtitle="subtitle"
+          :subtitleClass="themedClass('subtitleClass')"
           :text="text"
+          :textClass="themedClass('textClass')"
           :titleWeight="titleWeight"
           :titleStyle="titleStyle"
           :text-columns="textColumns"
@@ -15,8 +23,16 @@
         <BlokkliField
           name="field_icms_buttons"
           :list="buttons"
-          class="mt-8 flex flex-wrap gap-6"
-          :class="[buttonAlignment, { droptarget: isEditing }]"
+          :class="
+            cn(
+              themedClass(
+                'buttonsContainerClass',
+                'mt-8 flex flex-wrap items-center gap-6',
+              ),
+              buttonAlignment,
+              { droptarget: isEditing },
+            )
+          "
         />
       </div>
     </DesignSystemAtomsGridRow>
@@ -25,16 +41,22 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTextFragment } from '#graphql-operations'
-const props = defineProps<ParagraphIcmsLayoutTextFragment>()
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+
+defineProps<ParagraphIcmsLayoutTextFragment>()
+
+const themedClass = useTheme('ParagraphText')
+
 const { options, isEditing } = useAttrs().blokkliData
 
 const textWrapperClassList = computed(() => {
   if (options.value.textWidth === 'medium') {
-    return ['col-span-8', 'col-start-3']
+    return 'col-span-8 col-start-3'
   } else if (options.value.textWidth === 'narrow') {
-    return ['col-span-8', 'col-start-3', 'md:col-span-6', 'md:col-start-4']
+    return 'col-span-8 col-start-3 md:col-span-6 md:col-start-4'
   }
-  return ['col-span-12']
+  return 'col-span-12'
 })
 
 const textColumns = computed(() => {
@@ -63,4 +85,4 @@ const buttonAlignment = computed(() => {
 })
 
 provide('colorScheme', colorScheme)
-</script>
+</script>

package/components/Paragraph/TextMedia/index.vue

@@ -1,33 +1,60 @@
 <template>
-  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
-    <DesignSystemAtomsGridRow>
-      <div :class="textColumnClassList">
+  <DesignSystemAtomsContainer
+    :colorScheme="colorScheme"
+    :spacing="spacing"
+    :class="themedClass('containerClass')"
+  >
+    <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
+      <div :class="themedClass('firstColumnClass', textColumnClassList)">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          pretitleClass="mb-2.5"
+          :pretitleClass="themedClass('pretitleClass', 'mb-2.5')"
           :title="title"
+          :titleClass="themedClass('titleClass', 'mb-5')"
           :subtitle="subtitle"
+          :subtitleClass="themedClass('subtitleClass')"
           :titleWeight="titleWeight"
           :titleStyle="titleStyle"
-          titleClass="mb-5"
           :text="text"
+          :textClass="themedClass('textClass')"
           :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="imageColumnClassList">
+      <div :class="themedClass('secondColumnClass', imageColumnClassList)">
         <DesignSystemMoleculesMediaSlider
           v-if="media && media.length"
           :media="media"
-          :colorScheme="colorScheme"
-          mediaClass="size-full rounded-lg overflow-hidden"
-          sliderClass="my-0 rounded-lg overflow-hidden"
           imageSizes="xs:100vw sm:100vw md:50vw lg:640px"
+          :containerClass="themedClass('containerClass', 'my-0')"
+          :mediaClass="themedClass('mediaClass')"
+          :elementClass="themedClass('elementClass')"
+          :figcaptionClass="themedClass('figcaptionClass')"
+          :carouselClass="themedClass('carouselClass')"
+          :carouselContentClass="themedClass('carouselContentClass')"
+          :carouselItemClass="themedClass('carouselItemClass')"
+          :carouselButtonPrevClass="themedClass('carouselButtonPrevClass')"
+          :carouselButtonPrevIconClass="
+            themedClass('carouselButtonPrevIconClass')
+          "
+          :carouselButtonNextClass="themedClass('carouselButtonNextClass')"
+          :carouselButtonNextIconClass="
+            themedClass('carouselButtonNextIconClass')
+          "
+          colorScheme="none"
         />
       </div>
     </DesignSystemAtomsGridRow>
@@ -36,11 +63,15 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTextMediaFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 
 defineProps<ParagraphIcmsLayoutTextMediaFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
+const themedClass = useTheme('ParagraphTextMedia')
+
 const reverseColumns = ref(false)
 
 watch(
@@ -75,7 +106,7 @@ const textColumnClassList = computed(() => {
     }
   }
 
-  return classList
+  return classList.join(' ')
 })
 
 const imageColumnClassList = computed(() => {
@@ -104,7 +135,7 @@ const imageColumnClassList = computed(() => {
     }
   }
 
-  return classList
+  return classList.join(' ')
 })
 
 const colorScheme = computed(() => {

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

@@ -2,30 +2,46 @@
   <DesignSystemOrganismsTimelineElement
     :pretitle="pretitle"
     :title="title"
-    :title-style="titleStyle"
-    :title-weight="titleWeight"
+    :titleStyle="titleStyle"
+    :titleWeight="titleWeight"
     :subtitle="subtitle"
     :text="text"
     :media="media"
     :buttons="buttons"
-    :color-scheme="colorScheme"
-    :has-decorative-line="false"
-    :reverse-columns="reverseColumns"
-    :is-editing="isEditing"
+    :colorCcheme="colorScheme"
+    :hasDecorativeLine="false"
+    :reverseColumns="reverseColumns"
+    :isEditing="isEditing"
+    :containerClass="themedClass('containerClass')"
+    :firstColumnClass="themedClass('firstColumnClass')"
+    :secondColumnClass="themedClass('secondColumnClass')"
+    :pretitleClass="themedClass('pretitleClass')"
+    :titleClass="themedClass('titleClass')"
+    :subtitleClass="themedClass('subtitleClass')"
+    :textClass="themedClass('textClass')"
+    :buttonsContainerClass="themedClass('buttonsContainerClass')"
+    :mediaContainerClass="themedClass('mediaContainerClass')"
+    :mediaClass="themedClass('mediaClass')"
+    :figcaptionClass="themedClass('figcaptionClass')"
+    :elementClass="themedClass('elementClass')"
   />
 </template>
 
 <script lang="ts" setup>
 import type { ParagraphIcmsTimelineElementFragment } from '#graphql-operations'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsTimelineElementFragment>()
 
+const themedClass = useTheme('ParagraphTimelineElement')
+
 const { options, isEditing } = useAttrs().blokkliData
 
 const reverseColumns = computed(() => {
   return Boolean(Number(options.value.reverseColumns))
 })
 
-const colorScheme = inject<string>('colorScheme')
+const colorScheme = inject<ColorScheme>('colorScheme')
 const titleWeight = inject<string>('titleWeight')
 </script>