@iqual/nuxt-icms 1.3.0 → 1.4.0

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

@@ -2,28 +2,45 @@
   <div :class="[tabContent({ colorScheme }), { 'not-last:mb-10': isEditing }]">
     <DesignSystemOrganismsContentBlock
       :pretitle="pretitle"
+      :pretitleClass="themedClass('pretitleClass')"
       :title="title"
+      :titleClass="themedClass('titleClass')"
       :titleWeight="titleWeight"
       :titleStyle="titleStyle"
       :subtitle="subtitle"
+      :subtitleClass="themedClass('subtitleClass')"
       :media="media"
-      mediaClass="size-full rounded-lg overflow-hidden"
-      mediaSliderClass="max-w-[500px] rounded-lg overflow-hidden"
+      :mediaClass="themedClass('mediaClass')"
+      :mediaContainerClass="themedClass('mediaContainerClass', 'max-w-[500px]')"
       :text="text"
+      :textClass="themedClass('textClass')"
       :colorScheme="colorScheme"
     />
 
     <BlokkliField
       name="field_icms_buttons"
       :list="buttons"
-      class="mt-8 flex flex-wrap gap-6"
-      :class="[buttonAlignmentClass, { droptarget: isEditing }]"
+      :class="
+        cn(
+          themedClass(
+            'buttonsContainerClass',
+            'mt-8 flex flex-wrap items-center gap-6',
+          ),
+          buttonAlignmentClass,
+          {
+            droptarget: isEditing,
+          },
+        )
+      "
     />
   </div>
 </template>
 
 <script lang="ts" setup>
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import { tv } from 'tailwind-variants'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 
 import type { ParagraphIcmsTabElementFragment } from '#graphql-operations'
 
@@ -31,19 +48,36 @@ defineProps<ParagraphIcmsTabElementFragment>()
 
 const { isEditing } = useAttrs().blokkliData as any
 
+const themedClass = useTheme()
+
 const tabContent = tv({
-  base: 'm-0 rounded-b-lg p-8 text-black md:p-16',
+  base: themedClass(
+    'tabContentBase',
+    'm-0 rounded-b-lg p-8 text-black md:p-16',
+  ),
   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(
+        'tabContentVariantsColorSchemeNone',
+        'bg-white text-black',
+      ),
+      dark: themedClass(
+        'tabContentVariantsColorSchemeDark',
+        'bg-gray-900 text-white',
+      ),
+      light: themedClass(
+        'tabContentVariantsColorSchemeLight',
+        'bg-white text-black',
+      ),
+      accent: themedClass(
+        'tabContentVariantsColorSchemeAccent',
+        'bg-primary-700 text-white',
+      ),
     },
   },
 })
 
-const colorScheme = inject<string>('colorScheme')
+const colorScheme = inject<ColorScheme>('colorScheme')
 const buttonAlignment = inject<string>('buttonAlignment')
 const titleWeight = inject<string>('childTitleWeight')
 

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

@@ -1,18 +1,22 @@
 <template>
-  <DesignSystemAtomsContainer :spacing="spacing" :colorScheme="colorScheme">
-    <DesignSystemAtomsGridRow>
-      <div class="col-span-12">
+  <DesignSystemAtomsContainer
+    :spacing="spacing"
+    :colorScheme="colorScheme"
+    :class="themedClass('containerClass')"
+  >
+    <DesignSystemAtomsGridRow :class="themedClass('firstRowClass')">
+      <div :class="themedClass('firstRowColumnClass', 'col-span-12')">
         <DesignSystemOrganismsContentBlock
           :title="title"
           :titleWeight="titleWeight"
           :titleStyle="titleStyle"
-          titleClass="text-center mb-12"
+          :titleClass="themedClass('titleClass', 'text-center mb-12')"
         />
       </div>
     </DesignSystemAtomsGridRow>
-    <DesignSystemAtomsGridRow>
+    <DesignSystemAtomsGridRow :class="themedClass('secondRowClass')">
       <div class="relative col-span-12" v-if="isEditing">
-        <Tabs class="shadow-custom rounded-lg">
+        <Tabs>
           <BlokkliField
             name="field_icms_tab_elements"
             :list="tabElements"
@@ -21,15 +25,16 @@
         </Tabs>
       </div>
 
-      <div class="relative col-span-12" v-else>
+      <div
+        :class="themedClass('secondRowColumnClass', 'relative col-span-12')"
+        v-else
+      >
         <Tabs
           v-if="!isMobile"
           default-value="tab-1"
-          class="shadow-custom rounded-lg"
+          :class="themedClass('tabsClass')"
         >
-          <TabsList
-            class="flex flex-col items-center justify-center bg-transparent p-0 lg:flex-row dark:bg-transparent"
-          >
+          <TabsList :class="tabList({ colorScheme })">
             <TabsTrigger
               v-for="(tabElement, key) in tabElements"
               :key="key"
@@ -47,16 +52,22 @@
           >
             <DesignSystemOrganismsContentBlock
               :pretitle="tabElement?.props?.pretitle"
+              :pretitleClass="themedClass('tabsContentPretitleClass')"
               :title="tabElement?.props?.title"
               :titleWeight="childTitleWeight"
               :titleStyle="tabElement?.props?.titleStyle"
+              :titleClass="themedClass('tabsContentTitleClass')"
               :subtitle="tabElement?.props?.subtitle"
+              :subtitleClass="themedClass('tabsContentSubtitleClass')"
               :media="tabElement?.props?.media"
-              mediaClass="size-full rounded-lg overflow-hidden"
-              mediaSliderClass="max-w-[500px] rounded-lg overflow-hidden"
+              :mediaClass="themedClass('tabsContentMediaClass')"
+              :mediaContainerClass="
+                themedClass('tabsContentMediaContainerClass', 'max-w-[500px]')
+              "
               :text="tabElement?.props?.text"
+              :textClass="themedClass('tabsContentTextClass')"
               :links="tabElement?.props?.buttons"
-              :button-alignment="buttonAlignment"
+              :buttonAlignment="buttonAlignment"
               :colorScheme="colorScheme"
             />
           </TabsContent>
@@ -65,7 +76,7 @@
         <Accordion
           v-else
           type="single"
-          class="w-full"
+          :class="themedClass('accordionClass', 'w-full')"
           collapsible
           default-value="accordion-1"
         >
@@ -73,7 +84,9 @@
             v-for="(tabElement, key) in tabElements"
             :key="key"
             :value="`accordion-${key + 1}`"
-            class="mb-1 border-none [&>h3]:mb-0"
+            :class="
+              themedClass('accordionItemClass', 'mb-1 border-none [&>h3]:mb-0')
+            "
           >
             <AccordionTrigger
               :ref="(el: any) => (triggerRefs[key] = el)"
@@ -82,19 +95,32 @@
             >
               {{ tabElement?.props?.tabTitle }}
             </AccordionTrigger>
-            <AccordionContent class="p-4 pb-6 text-base">
+            <AccordionContent
+              :class="
+                themedClass('accordionContentClass', 'p-4 pb-6 text-base')
+              "
+            >
               <DesignSystemOrganismsContentBlock
                 :pretitle="tabElement?.props?.pretitle"
+                :pretitleClass="themedClass('accordionContentPretitleClass')"
                 :title="tabElement?.props?.title"
+                :titleClass="themedClass('accordionContentTitleClass')"
                 :titleWeight="childTitleWeight"
                 :titleStyle="tabElement?.props?.titleStyle"
                 :subtitle="tabElement?.props?.subtitle"
+                :subtitleClass="themedClass('accordionContentSubtitleClass')"
                 :media="tabElement?.props?.media"
-                mediaClass="size-full rounded-lg overflow-hidden"
-                mediaSliderClass="max-w-[500px] rounded-lg overflow-hidden"
+                :mediaClass="themedClass('accordionContentMediaClass')"
+                :mediaContainerClass="
+                  themedClass(
+                    'accordionContentMediaContainerClass',
+                    'max-w-[500px]',
+                  )
+                "
                 :text="tabElement?.props?.text"
+                :textClass="themedClass('accordionContentTextClass')"
                 :links="tabElement?.props?.buttons"
-                :button-alignment="buttonAlignment"
+                :buttonAlignment="buttonAlignment"
                 :colorScheme="colorScheme"
               />
             </AccordionContent>
@@ -107,6 +133,7 @@
 
 <script lang="ts" setup>
 import { tv } from 'tailwind-variants'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import { useAccordionScroll } from '@iqual/nuxt-icms/composables/useAccordionScroll'
 
 import type { ParagraphIcmsLayoutTabsFragment } from '#graphql-operations'
@@ -115,42 +142,101 @@ const props = defineProps<ParagraphIcmsLayoutTabsFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData as any
 
+const themedClass = useTheme()
 const { isMobile } = useIsMobile()
 
+const tabList = tv({
+  base: themedClass(
+    'tabListBase',
+    'rounded-none flex flex-col items-center justify-center bg-transparent p-0 lg:flex-row dark:bg-transparent border-b',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass('tabListVariantsColorSchemeNone', 'border-gray-200'),
+      dark: themedClass('tabListVariantsColorSchemeDark', 'border-gray-950'),
+      light: themedClass('tabListVariantsColorSchemeLight', 'border-gray-100'),
+      accent: themedClass(
+        'tabListVariantsColorSchemeAccent',
+        'border-primary-900',
+      ),
+    },
+  },
+})
+
 const tabTrigger = tv({
-  base: 'inline-flex w-full flex-1 items-center justify-center whitespace-nowrap rounded-none rounded-t-lg py-4 text-base shadow-custom-inner transition-all disabled:pointer-events-none lg:w-fit data-[state=active]:shadow-none',
+  base: themedClass(
+    'tabTriggerBase',
+    'inline-flex w-full flex-1 items-center justify-center whitespace-nowrap rounded-none data-[state=active]:shadow-none py-4 text-base transition-all disabled:pointer-events-none lg:w-fit not-last:border-r',
+  ),
   variants: {
     colorScheme: {
-      none: 'bg-white dark:bg-white text-black dark:text-black data-[state=active]:bg-white dark:data-[state=active]:bg-white dark:data-[state=active]:text-black',
-      dark: 'bg-gray-700 dark:bg-gray-700 text-white dark:text-white data-[state=active]:bg-gray-900 dark:data-[state=active]:bg-gray-900 data-[state=active]:text-white',
-      light:
-        'bg-white dark:bg-white text-black dark:text-black data-[state=active]:bg-white dark:data-[state=active]:bg-white dark:data-[state=active]:text-black',
-      accent:
-        'bg-primary-600 dark:bg-primary-600 text-white dark:text-white data-[state=active]:bg-primary-700 dark:data-[state=active]:bg-primary-700 data-[state=active]:text-white',
+      none: themedClass(
+        'tabTriggerVariantsColorSchemeNone',
+        'bg-gray-50 dark:bg-gray-50 text-black dark:text-black data-[state=active]:bg-gray-100 dark:data-[state=active]:bg-gray-100 dark:data-[state=active]:text-black border-gray-200',
+      ),
+      dark: themedClass(
+        'tabTriggerVariantsColorSchemeDark',
+        'bg-gray-800 dark:bg-gray-800 text-white dark:text-white data-[state=active]:bg-gray-900 dark:data-[state=active]:bg-gray-900 data-[state=active]:text-white border-gray-950',
+      ),
+      light: themedClass(
+        'tabTriggerVariantsColorSchemeLight',
+        'bg-white dark:bg-white text-black dark:text-black data-[state=active]:bg-gray-100 dark:data-[state=active]:bg-gray-100 dark:data-[state=active]:text-black border-gray-100',
+      ),
+      accent: themedClass(
+        'tabTriggerVariantsColorSchemeAccent',
+        'bg-primary-700 dark:bg-primary-700 text-white dark:text-white data-[state=active]:bg-primary-800 dark:data-[state=active]:bg-primary-800 data-[state=active]:text-white border-primary-900',
+      ),
     },
   },
 })
 
 const tabContent = tv({
-  base: 'm-0 rounded-b-lg p-8 text-black md:p-16',
+  base: themedClass('tabContentBase', 'm-0 p-8 text-black md:p-16'),
   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(
+        'tabContentVariantsColorSchemeNone',
+        'bg-gray-50 text-black',
+      ),
+      dark: themedClass(
+        'tabContentVariantsColorSchemeDark',
+        'bg-gray-900 text-white',
+      ),
+      light: themedClass(
+        'tabContentVariantsColorSchemeLight',
+        'bg-white text-black',
+      ),
+      accent: themedClass(
+        'tabContentVariantsColorSchemeAccent',
+        'bg-primary-700 text-white',
+      ),
     },
   },
 })
 
 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',
+      ),
     },
   },
 })

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

@@ -10,14 +10,31 @@
     :image="image"
     :buttons="buttons"
     :colorScheme="colorScheme"
+    :containerClass="themedClass('containerClass')"
+    :mediaClass="themedClass('mediaClass')"
+    :figcaptionClass="themedClass('figcaptionClass')"
+    :elementClass="themedClass('elementClass')"
+    :textContainerClass="themedClass('textContainerClass')"
+    :titleClass="themedClass('titleClass')"
+    :subtitleClass="themedClass('subtitleClass')"
+    :textClass="themedClass('textClass')"
+    :contactButtonsContainerClass="themedClass('contactButtonsContainerClass')"
+    :buttonsContainerClass="themedClass('buttonsContainerClass')"
+    :buttonClass="themedClass('buttonClass')"
+    :labelClass="themedClass('labelClass')"
+    :sublineClass="themedClass('sublineClass')"
   />
 </template>
 
 <script lang="ts" setup>
 import type { ParagraphIcmsTeamElementFragment } from '#graphql-operations'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsTeamElementFragment>()
 
-const colorScheme = inject<string>('colorScheme')
+const themedClass = useTheme()
+
+const colorScheme = inject<ColorScheme>('colorScheme')
 const titleWeight = inject<string>('titleWeight')
 </script>

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

@@ -1,20 +1,31 @@
 <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-9">
+      <div
+        :class="themedClass('secondColumnClass', 'col-span-12 md:col-span-9')"
+      >
         <DesignSystemOrganismsContentBlock
           :text="text"
+          :textClass="themedClass('textClass')"
           :colorScheme="colorScheme"
         />
       </div>
@@ -23,19 +34,31 @@
     <BlokkliField
       name="field_icms_team_elements"
       :list="teamElements"
-      class="container mx-auto mt-10 grid gap-6 md:mt-20"
-      :class="['grid-3-col', { droptarget: isEditing }]"
+      :class="
+        cn(
+          'grid-3-col',
+          themedClass(
+            'teamElementsContainerClass',
+            'container mx-auto mt-10 grid gap-6 md:mt-20 md:gap-12',
+          ),
+          { droptarget: isEditing },
+        )
+      "
     />
   </DesignSystemAtomsContainer>
 </template>
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTeamFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 
 const props = defineProps<ParagraphIcmsLayoutTeamFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
+const themedClass = useTheme()
+
 const colorScheme = computed(() => {
   return options.value.colorScheme
 })

package/components/Paragraph/Teasers/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,17 +37,28 @@
       </div>
     </DesignSystemAtomsGridRow>
 
-    <DesignSystemAtomsGridRow class="grid-4-col mt-10 md:mt-20">
-      <component v-for="teaser in teasers" :is="teaserComponent(teaser?.bundle)"  v-bind="teaser" />
+    <DesignSystemAtomsGridRow
+      :class="
+        themedClass('secondRowClass', 'grid-4-col mt-10 gap-y-12 md:mt-20')
+      "
+    >
+      <component
+        v-for="teaser in teasers"
+        :is="teaserComponent(teaser?.bundle)"
+        v-bind="teaser"
+      />
     </DesignSystemAtomsGridRow>
   </DesignSystemAtomsContainer>
 </template>
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTeasersFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 const props = defineProps<ParagraphIcmsLayoutTeasersFragment>()
 
+const themedClass = useTheme()
+
 const { options, parentType } = useAttrs().blokkliData as any
 
 const colorScheme = computed(() => {

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

@@ -1,29 +1,54 @@
 <template>
   <CarouselItem
-    class="flex flex-col flex-wrap justify-center"
-    :class="{ 'not-last:mb-10 not-last:border-b-1 not-last:pb-10': isEditing }"
+    :class="
+      cn(
+        themedClass(
+          'carouselItemClass',
+          'flex flex-col flex-wrap justify-center',
+        ),
+        { 'not-last:mb-10 not-last:border-b-1 not-last:pb-10': isEditing },
+      )
+    "
   >
     <DesignSystemOrganismsTestimonial
       :title="title"
       :titleWeight="titleWeight"
       :text="text"
       :image="image"
-      :first-name="firstName"
-      :last-name="lastName"
+      :firstName="firstName"
+      :lastName="lastName"
       :position="position"
       :logo="logo"
       :colorScheme="colorScheme"
+      :containerClass="themedClass('containerClass')"
+      :titleClass="themedClass('titleClass')"
+      :textClass="themedClass('textClass')"
+      :mediaClass="themedClass('mediaClass')"
+      :figcaptionClass="themedClass('figcaptionClass')"
+      :elementClass="themedClass('elementClass')"
+      :authorContainerClass="themedClass('authorContainerClass')"
+      :authorNameContainerClass="themedClass('authorNameContainerClass')"
+      :authorNameClass="themedClass('authorNameClass')"
+      :authorPositionClass="themedClass('authorPositionClass')"
+      :logoMediaClass="themedClass('logoMediaClass')"
+      :logoFigcaptionClass="themedClass('logoFigcaptionClass')"
+      :logoElementClass="themedClass('logoElementClass')"
     />
   </CarouselItem>
 </template>
 
 <script lang="ts" setup>
 import type { ParagraphIcmsTestimonialElementFragment } from '#graphql-operations'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 
 defineProps<ParagraphIcmsTestimonialElementFragment>()
 
+const themedClass = useTheme()
+
 const { isEditing } = useAttrs().blokkliData
 
-const colorScheme = inject<string>('colorScheme')
+const colorScheme = inject<ColorScheme>('colorScheme')
 const titleWeight = inject<string>('titleWeight')
 </script>