@iqual/nuxt-icms 1.3.0 → 1.4.0

package/assets/symbols/chevron-right.svg

@@ -1,3 +1,3 @@
 <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.75 17L14.25 11.5L8.75 6" stroke="#1E1E1E" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.75 17L14.25 11.5L8.75 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/components/Blokkli/HeroImage/index.vue

@@ -9,7 +9,7 @@ const props = defineProps<ParagraphIcmsLayoutHeroImageFragment>()
 
 const blokkliData = defineBlokkli({
   bundle: 'icms_layout_hero_image',
-  globalOptions: ['buttonAlignment', 'textShadow', 'colorMode', 'reverseColumns'],
+  globalOptions: ['buttonAlignment', 'textShadow', 'colorMode', 'reverseColumns', 'imageAlignment'],
 })
 
 </script>

package/components/Blokkli/Teasers/icon.svg

@@ -1,6 +1,6 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
 <title>Teasers (layout)</title>
-<rect x="0.75" y="4.75" width="24.5" height="24.5" rx="1.25" fill="none" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M26 27H27C28.1046 27 29 26.1046 29 25V3C29 1.89543 28.1046 1 27 1H5C3.89543 1 3 1.89543 3 3V4" fill="none" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M11.8 20.6H8.8C8.32261 20.6 7.86477 20.4104 7.52721 20.0728C7.18964 19.7352 7 19.2774 7 18.8V18.2M11.8 20.6L10 22.4M11.8 20.6L10 18.8M14.2 11C14.5183 11 14.8235 11.1264 15.0485 11.3515C15.2736 11.5765 15.4 11.8817 15.4 12.2V14.6C15.4 14.9183 15.2736 15.2235 15.0485 15.4485C14.8235 15.6736 14.5183 15.8 14.2 15.8M17.8 11C18.1183 11 18.4235 11.1264 18.6485 11.3515C18.8736 11.5765 19 11.8817 19 12.2V14.6C19 14.9183 18.8736 15.2235 18.6485 15.4485C18.4235 15.6736 18.1183 15.8 17.8 15.8M15.4 18.2H17.8C18.4627 18.2 19 18.7373 19 19.4V21.8C19 22.4627 18.4627 23 17.8 23H15.4C14.7373 23 14.2 22.4627 14.2 21.8V19.4C14.2 18.7373 14.7373 18.2 15.4 18.2ZM8.2 11H10.6C11.2627 11 11.8 11.5373 11.8 12.2V14.6C11.8 15.2627 11.2627 15.8 10.6 15.8H8.2C7.53726 15.8 7 15.2627 7 14.6V12.2C7 11.5373 7.53726 11 8.2 11Z" fill="none" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="0.75" y="4.75" width="24.5" height="24.5" rx="1.25" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M26 27H27C28.1046 27 29 26.1046 29 25V3C29 1.89543 28.1046 1 27 1H5C3.89543 1 3 1.89543 3 3V4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M11.8 20.6H8.8C8.32261 20.6 7.86477 20.4104 7.52721 20.0728C7.18964 19.7352 7 19.2774 7 18.8V18.2M11.8 20.6L10 22.4M11.8 20.6L10 18.8M14.2 11C14.5183 11 14.8235 11.1264 15.0485 11.3515C15.2736 11.5765 15.4 11.8817 15.4 12.2V14.6C15.4 14.9183 15.2736 15.2235 15.0485 15.4485C14.8235 15.6736 14.5183 15.8 14.2 15.8M17.8 11C18.1183 11 18.4235 11.1264 18.6485 11.3515C18.8736 11.5765 19 11.8817 19 12.2V14.6C19 14.9183 18.8736 15.2235 18.6485 15.4485C18.4235 15.6736 18.1183 15.8 17.8 15.8M15.4 18.2H17.8C18.4627 18.2 19 18.7373 19 19.4V21.8C19 22.4627 18.4627 23 17.8 23H15.4C14.7373 23 14.2 22.4627 14.2 21.8V19.4C14.2 18.7373 14.7373 18.2 15.4 18.2ZM8.2 11H10.6C11.2627 11 11.8 11.5373 11.8 12.2V14.6C11.8 15.2627 11.2627 15.8 10.6 15.8H8.2C7.53726 15.8 7 15.2627 7 14.6V12.2C7 11.5373 7.53726 11 8.2 11Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/components/DesignSystem/Atoms/Button.vue

@@ -1,20 +1,34 @@
 <template>
   <NuxtLink
-    :class="cn(button({ colorScheme, style, textAlignment }), buttonClass)"
+    :class="
+      cn(
+        button({ colorScheme, style, textAlignment }),
+        themedClass('buttonClass'),
+      )
+    "
     :target="targetBlank ? '_blank' : '_self'"
     :to="linkComplete"
     :title="title"
     :prefetch="prefetch"
   >
-    <span class="block">{{ label }}</span>
-    <span v-if="subline" class="block text-sm font-light">{{ subline }}</span>
+    <span class="block" :class="themedClass('labelClass')">{{ label }}</span>
+    <span
+      v-if="subline"
+      class="block"
+      :class="themedClass('sublineClass', 'text-sm font-light')"
+      >{{ subline }}</span
+    >
   </NuxtLink>
 </template>
 
 <script lang="ts" setup>
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import cn from '@iqual/nuxt-icms/composables/useCn'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import { tv } from 'tailwind-variants'
 
+const themedClass = useTheme()
+
 const props = defineProps<{
   label?: string
   subline?: string
@@ -23,108 +37,144 @@ const props = defineProps<{
   params?: string
   targetBlank?: boolean
   style?: string
-  colorScheme?: string
+  colorScheme?: ColorScheme
   textAlignment?: string
   buttonClass?: string
+  labelClass?: string
+  sublineClass?: string
 }>()
 
 const button = tv({
-  base: 'cursor-pointer font-medium py-2 px-3 rounded-lg duration-200 ease-in-out block w-full md:w-fit',
+  base: themedClass(
+    'buttonBase',
+    'cursor-pointer font-medium py-3 px-10 duration-200 ease-in-out block w-full md:w-fit',
+  ),
   variants: {
     colorScheme: {
-      none: '',
-      dark: '',
-      light: '',
-      accent: '',
+      none: themedClass('buttonVariantsColorSchemeNone'),
+      dark: themedClass('buttonVariantsColorSchemeDark'),
+      light: themedClass('buttonVariantsColorSchemeLight'),
+      accent: themedClass('buttonVariantsColorSchemeAccent'),
     },
     style: {
-      normal: '',
-      focus: '',
-      minimal: 'px-0 underline text-current',
+      normal: themedClass('buttonVariantsStyleNormal', 'border'),
+      focus: themedClass('buttonVariantsStyleFocus', 'border'),
+      minimal: themedClass(
+        'buttonVariantsStyleMinimal',
+        'p-0 underline text-current',
+      ),
     },
     textAlignment: {
-      left: 'text-left',
-      center: 'text-center',
-      right: 'text-right',
+      left: themedClass('buttonVariantsTextAlignmentLeft', 'text-left'),
+      center: themedClass('buttonVariantsTextAlignmentCenter', 'text-center'),
+      right: themedClass('buttonVariantsTextAlignmentRight', 'text-right'),
     },
   },
   compoundVariants: [
     {
       colorScheme: 'none',
       style: 'normal',
-      class:
-        'bg-white text-black hover:bg-black hover:text-white border border-black',
+      class: themedClass(
+        'buttonCompoundVariantsNoneNormal',
+        'bg-white text-primary hover:bg-primary hover:text-white border-primary',
+      ),
     },
     {
       colorScheme: 'none',
       style: 'focus',
-      class:
-        'bg-black text-white hover:bg-white hover:text-black border border-black',
+      class: themedClass(
+        'buttonCompoundVariantsNoneFocus',
+        'bg-primary text-white hover:bg-white hover:text-primary border-primary',
+      ),
     },
     {
       colorScheme: 'none',
       style: 'minimal',
-      class: 'hover:text-primary-500',
+      class: themedClass(
+        'buttonCompoundVariantsNoneMinimal',
+        'text-primary hover:text-gray-950',
+      ),
     },
 
     {
       colorScheme: 'light',
       style: 'normal',
-      class:
-        'bg-gray-50 text-black hover:bg-black hover:text-white border border-black',
+      class: themedClass(
+        'buttonCompoundVariantsLightNormal',
+        'bg-gray-50 text-primary hover:bg-primary hover:text-gray-50 border-primary',
+      ),
     },
     {
       colorScheme: 'light',
       style: 'focus',
-      class:
-        'bg-black text-gray-50 hover:bg-gray-50 hover:text-black border border-black',
+      class: themedClass(
+        'buttonCompoundVariantsLightFocus',
+        'bg-primary text-gray-50 hover:bg-gray-50 hover:text-primary border-primary',
+      ),
     },
     {
       colorScheme: 'light',
       style: 'minimal',
-      class: 'hover:text-primary-500',
+      class: themedClass(
+        'buttonCompoundVariantsLightMinimal',
+        'text-primary hover:text-gray-950',
+      ),
     },
 
     {
       colorScheme: 'dark',
       style: 'normal',
-      class:
-        'bg-black text-white hover:bg-white hover:text-black border border-white',
+      class: themedClass(
+        'buttonCompoundVariantsDarkNormal',
+        'bg-gray-950 text-white hover:bg-white hover:text-gray-950 border-white',
+      ),
     },
     {
       colorScheme: 'dark',
       style: 'focus',
-      class:
-        'bg-white text-black hover:bg-black hover:text-white border border-white',
+      class: themedClass(
+        'buttonCompoundVariantsDarkFocus',
+        'bg-primary text-gray-950 hover:bg-gray-950 hover:text-primary border-primary',
+      ),
     },
     {
       colorScheme: 'dark',
       style: 'minimal',
-      class: 'hover:text-primary-500',
+      class: themedClass(
+        'buttonCompoundVariantsDarkMinimal',
+        'text-primary hover:text-white',
+      ),
     },
 
     {
       colorScheme: 'accent',
       style: 'normal',
-      class:
-        'bg-primary-600 text-white hover:bg-white hover:text-black border border-white',
+      class: themedClass(
+        'buttonCompoundVariantsAccentNormal',
+        'bg-primary-600 text-white hover:bg-white hover:text-gray-950 border-white',
+      ),
     },
     {
       colorScheme: 'accent',
       style: 'focus',
-      class:
-        'bg-black text-white hover:bg-white hover:text-black border border-black hover:border-white',
+      class: themedClass(
+        'buttonCompoundVariantsAccentFocus',
+        'bg-gray-950 text-white hover:bg-white hover:text-gray-950 border-gray-950 hover:border-white',
+      ),
     },
     {
       colorScheme: 'accent',
       style: 'minimal',
-      class: 'hover:text-black',
+      class: themedClass(
+        'buttonCompoundVariantsAccentMinimal',
+        'hover:text-gray-950',
+      ),
     },
   ],
   defaultVariants: {
     colorScheme: 'none',
     style: 'normal',
-    textAlignment: 'left',
+    textAlignment: 'center',
   },
 })
 

package/components/DesignSystem/Atoms/Caption.vue

@@ -1,15 +1,15 @@
 <template>
-  <p :class="captionClass">{{ caption }}</p>
+  <p :class="themedClass('captionClass', 'text-lg text-gray-400')">
+    {{ caption }}
+  </p>
 </template>
 
 <script setup lang="ts">
-withDefaults(
-  defineProps<{
-    caption?: string
-    captionClass?: string
-  }>(),
-  {
-    captionClass: 'text-gray-300 text-lg',
-  },
-)
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+const themedClass = useTheme()
+
+defineProps<{
+  caption?: string
+  captionClass?: string
+}>()
 </script>

package/components/DesignSystem/Atoms/Container.vue

@@ -1,13 +1,17 @@
 <template>
-  <section :class="containerClassList">
+  <section :class="themedClass('class', containerClassList)">
     <slot />
   </section>
 </template>
 
 <script lang="ts" setup>
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+const themedClass = useTheme()
+
 const props = withDefaults(
   defineProps<{
-    colorScheme?: string
+    colorScheme?: ColorScheme
     spacing?: {
       top?: string
       bottom?: string
@@ -25,14 +29,14 @@ const props = withDefaults(
 
 const containerClassList = computed(() => {
   const classList = []
-  if (props.class) {
-    classList.push(props.class)
+  if (props.colorScheme === 'none') {
+    classList.push('bg-white text-gray-950')
   }
   if (props.colorScheme === 'dark') {
     classList.push('bg-gray-950 text-white')
   }
   if (props.colorScheme === 'light') {
-    classList.push('bg-gray-50')
+    classList.push('bg-gray-50 text-gray-950')
   }
   if (props.colorScheme === 'accent') {
     classList.push('bg-primary-600 text-white')
@@ -49,6 +53,6 @@ const containerClassList = computed(() => {
   if (props.spacing.bottom === 'large') {
     classList.push('pb-24 md:pb-32')
   }
-  return classList
+  return classList.join(' ')
 })
 </script>

package/components/DesignSystem/Atoms/GridRow.vue

@@ -1,13 +1,14 @@
 <template>
-  <div :class="cn('container mx-auto grid grid-cols-12 gap-6', props.class)">
+  <div :class="themedClass('class', 'container mx-auto grid grid-cols-12 gap-6')">
     <slot />
   </div>
 </template>
 
 <script lang="ts" setup>
-import cn from '@iqual/nuxt-icms/composables/useCn'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+const themedClass = useTheme()
 
-const props = defineProps<{
+defineProps<{
   class?: string
 }>()
 </script>

package/components/DesignSystem/Atoms/LinkListItem.vue

@@ -1,21 +1,44 @@
 <template>
-  <NuxtLink v-if="link && (title || description)"
-    class="block border-b-1 first:border-t-1 py-4"
+  <NuxtLink
+    v-if="link && (title || description)"
+    :class="
+      themedClass(
+        'linkClass',
+        'border-b-1 first:border-t-1 group block border-gray-100 py-4',
+      )
+    "
     :to="link"
     :title="title"
     :prefetch="true"
   >
-    <span v-if="title" class="block">{{ title }}</span>
-    <span v-if="description" class="block text-sm font-light mt-2" v-html="description" />
+    <span
+      v-if="title"
+      :class="
+        themedClass(
+          'titleClass',
+          'group-hover:text-primary block transition-colors duration-200',
+        )
+      "
+      v-text="title"
+    />
+    <span
+      v-if="description"
+      :class="themedClass('descriptionClass', 'mt-2 block text-sm font-light')"
+      v-html="description"
+    />
   </NuxtLink>
 </template>
 
 <script lang="ts" setup>
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+const themedClass = useTheme()
 
-const props = defineProps<{
-  title?: String
-  description?: String
+defineProps<{
+  title?: string
+  description?: string
   link?: string
+  titleClass?: string
+  linkClass?: string
+  descriptionClass?: string
 }>()
-
 </script>

package/components/DesignSystem/Molecules/ButtonGroup.vue

@@ -1,7 +1,12 @@
 <template>
   <div
     v-if="links?.length"
-    :class="cn('mt-6 flex flex-wrap gap-6', wrapperClass, buttonAlignment)"
+    :class="
+      cn(
+        themedClass('containerClass', 'mt-6 flex flex-wrap items-center gap-6'),
+        buttonAlignment,
+      )
+    "
   >
     <DesignSystemAtomsButton
       v-for="link in links"
@@ -13,12 +18,19 @@
       :target-blank="link?.props.targetBlank"
       :title="link?.props.title"
       :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 cn from '@iqual/nuxt-icms/composables/useCn'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme()
 
 type Link = {
   props: {
@@ -38,8 +50,11 @@ type Link = {
 
 defineProps<{
   links?: Array<Link>
-  colorScheme?: string
-  wrapperClass?: string
+  colorScheme?: ColorScheme
   buttonAlignment?: string
+  containerClass?: string
+  buttonClass?: string
+  labelClass?: string
+  sublineClass?: string
 }>()
 </script>

package/components/DesignSystem/Molecules/Card.vue

@@ -1,24 +1,53 @@
 <template>
-  <div class="@container">
-    <div :class="[card({ colorScheme }), { 'pb-20': icon }]">
-      <Media
-        v-if="image"
-        :media="image"
-        imageAspectRatio="4/3"
-        imageSizes="xs:100vw sm:100vw md:50vw lg:380px"
-        elementClass="aspect-4/3 w-full rounded-lg object-cover object-center @xl:w-1/2 @xl:shrink-0"
-      />
-      <DesignSystemOrganismsContentBlock
-        :title="title"
-        :titleWeight="titleWeight"
-        :titleStyle="'heading-5'"
-        titleClass="!mb-2 text-center @xl:text-left font-semibold"
-        :text="text"
-      />
-      <div v-if="icon" :class="cardIconWrapper({ colorScheme })">
+  <div :class="themedClass('containerClass', '@container')">
+    <div :class="card({ colorScheme })">
+      <div
+        :class="
+          cn(
+            themedClass(
+              'mediaContainerClass',
+              '@xl:w-1/2 @xl:shrink-0 relative',
+            ),
+            {
+              [themedClass('iconOffsetClass', '@xl:pb-0 pb-12')]: icon,
+            },
+          )
+        "
+      >
         <Media
-          :media="icon"  
-          mediaClass="icon"
+          v-if="image"
+          :media="image"
+          imageAspectRatios="4/3"
+          imageSizes="xs:100vw sm:100vw md:50vw lg:50vw"
+          :mediaClass="themedClass('mediaClass')"
+          :figcaptionClass="themedClass('figcaptionClass')"
+          :elementClass="themedClass('elementClass')"
+        />
+        <div v-if="icon" :class="cardIconWrapper({ colorScheme })">
+          <Media :media="icon" />
+        </div>
+      </div>
+
+      <div
+        :class="
+          themedClass(
+            'contentContainerClass',
+            '@xl:w-1/2 @xl:shrink-0 @xl:py-6 @xl:px-8 @7xl:p-16 w-full p-6 pt-0',
+          )
+        "
+      >
+        <DesignSystemOrganismsContentBlock
+          :title="title"
+          :titleWeight="titleWeight"
+          :titleStyle="'heading-5'"
+          :titleClass="
+            themedClass(
+              'titleClass',
+              'mb-2 text-center @xl:text-left font-semibold',
+            )
+          "
+          :text="text"
+          :textClass="themedClass('textClass', 'text-center @xl:text-left')"
         />
       </div>
     </div>
@@ -26,8 +55,13 @@
 </template>
 
 <script lang="ts" setup>
-import { tv } from 'tailwind-variants'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { MediaFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import { tv } from 'tailwind-variants'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+
+const themedClass = useTheme()
 
 defineProps<{
   title?: string
@@ -35,17 +69,23 @@ defineProps<{
   text?: string
   image?: MediaFragment
   icon?: MediaFragment
-  colorScheme?: string
+  colorScheme?: ColorScheme
+  containerClass?: string
+  titleClass?: string
+  textClass?: string
 }>()
 
 const card = tv({
-  base: 'relative shadow-custom-small rounded-lg p-6 h-full flex gap-6 flex-col @xl:flex-row @xl:pb-6 @7xl:p-16 @7xl:gap-16',
+  base: themedClass(
+    'cardBase',
+    'flex gap-6 flex-col @xl:flex-row @xl:gap-0 @xl:p-0',
+  ),
   variants: {
     colorScheme: {
-      none: 'bg-white',
-      dark: 'bg-gray-900',
-      light: 'bg-white',
-      accent: 'bg-primary-700',
+      none: themedClass('cardVariantsColorSchemeNone', 'bg-gray-50'),
+      dark: themedClass('cardVariantsColorSchemeDark', 'bg-gray-900'),
+      light: themedClass('cardVariantsColorSchemeLight', 'bg-white'),
+      accent: themedClass('cardVariantsColorSchemeAccent', 'bg-primary-700'),
     },
   },
   defaultVariants: {
@@ -54,13 +94,28 @@ const card = tv({
 })
 
 const cardIconWrapper = tv({
-  base: 'absolute -bottom-12 left-1/2 flex size-24 -translate-x-1/2 items-center justify-center rounded-full p-6 @xl:[left:calc(25%+12px)] @7xl:@xl:[left:calc(25%+32px)]',
+  base: themedClass(
+    'cardIconWrapperBase',
+    'absolute bottom-0 @xl:-bottom-12 left-1/2 flex size-24 -translate-x-1/2 items-center justify-center rounded-full p-6',
+  ),
   variants: {
     colorScheme: {
-      none: 'bg-gray-50',
-      dark: 'bg-gray-800',
-      light: 'bg-gray-100',
-      accent: 'bg-primary-500',
+      none: themedClass(
+        'cardIconWrapperVariantsColorSchemeNone',
+        'bg-white @xl:bg-gray-50',
+      ),
+      dark: themedClass(
+        'cardIconWrapperVariantsColorSchemeDark',
+        'bg-gray-950 @xl:bg-gray-900',
+      ),
+      light: themedClass(
+        'cardIconWrapperVariantsColorSchemeLight',
+        'bg-gray-50 @xl:bg-white',
+      ),
+      accent: themedClass(
+        'cardIconWrapperVariantsColorSchemeAccent',
+        'bg-primary-600 @xl:bg-primary-700',
+      ),
     },
   },
   defaultVariants: {