spoko-design-system 0.2.95 → 0.2.97

package/uno-config/theme/shortcuts/components.ts

@@ -1,83 +1,92 @@
-// shortcuts/components.ts
-
-import { ASPECT_RATIO } from './constants'
-
-export const componentShortcuts = [
-  // Product related
-  ['product-row','bg-white flex flex-wrap odd:(pr-2.5 pl-3.5 sm:px-0) even:(pl-2.5 pr-3.5 sm:px-0) w-1/2 sm:(w-auto grid grid-cols-3) gap-x-1 gap-y-0 md:(grid-cols-product gap-x-4) justify-start content-start content-start  place-content-start py-4 pb-6 sm:pb-4'],
-
-
-  ['product-row__photo', `${ASPECT_RATIO} mb-2 sm:mb-0 after:(content-empty bg-black bg-opacity-[.03] absolute w-full h-full top-0) w-100 col-span-1 row-span-3 max-w-full text-left overflow-hidden relative bg-neutral-lightest md:(col-span-1 row-span-1) box-content`],
-  ['product-row__description', 'text-xs text-slate-darkest dark:text-neutral-light leading-tight mt-2 font-textlight line-clamp-3 whitespace-normal md:(text-sm mt-0 font-textregular whitespace-pre-wrap)'],
-  ['product-row__main', 'w-full sm:w-auto col-span-2 leading-none relative sm:pl-1 md:(pl-0 row-start-1 col-start-2 col-span-1)'],
-  ['product-number', 'font-novamono content-center flex flex-wrap flex-col content-start pr-5 bg-white'],
-  ['p-number', 'inline-flex leading-none relative'],
-  ['tooltip', 'invisible absolute'],
-  ['has-tooltip', 'hover:(visible z-50)'],
-  ['product-code', 'text-blue-light mr-1 leading-none tracking-wide select-all'],
-  ['product-info', 'text-slate-light text-xxs font-textlight leading-none mt-0.5 md:(mt-0 text-xs)'],
-  ['product-date', 'inline-block text-xxs md:text-xs leading-none mt-1 md:(mt-4 mb-1) mr-2'],
-  ['product-thumb', 'h-full w-full object-cover object-center transform scale-100 group-hover:scale-110 absolute inset-0 will-change-transform bg-neutral-lightest'],
-  ['product-thumb--plp', `${ASPECT_RATIO} flex items-center flex justify-center mb-3 sm:mb-0 after:(content-empty bg-black bg-opacity-[.03] absolute w-full h-full top-0)`],
-  ['product-link--related', 'relative flex w-full bg-white dark:bg-accent-deepBlue after:absolute after:bg-accent-light after:w-full after:left-0 after:h-px after:-bottom-2 after:content-empty after:scale-x-0 after:transition-transform-300 after:origin-top-right hover:after:origin-top-left hover:after:scale-x-100'],
-  ['product-model', 'font-400'],
-  ['product-button', 'text-blue-500 cursor-pointer text-base leading-none inline-flex items-center justify-center w-8 h-8 min-w-8 transition-colors duration-150 bg-white dark:bg-accent-deepBlue focus:(text-blue-500) hover:(text-blue-500)'],
-
-  // Category related
-  ['category-section', 'pb-4 w-full bg-white mb-4 overflow-x-hidden flex flex-wrap max-w-full'],
-  ['category-tile', 'flex-wrap sm:flex-nowrap content-between w-64 min-w-64 lg:(w-28.57% min-w-28.57%) 2xl:(w-24.09% min-w-24.09%) 3xl:(w-19.60% min-w-19.60%) flex ml-1 lg:ml-1.5 first:ml-4'],
-  ['category-toggler', 'sm:bg-opacity-20 pt-1 flex-inline items-center justify-center hover:text-light-blue-500 text-neutral-light hover:text-blue-500 px-4 leading-7 pb-0.5 md:pl-0'],
-  ['category-link', 'w-full sm:w-auto text-neutral-default hover:(bg-gray-50 sm:bg-inherit) py-2 sm:py-0 text-lg font-medium text-left px-3 block sm:(text-base leading-4 mb-1.5) md:(px-4 py-1 table-cell)'],
-  ['category-carousel__link', 'uppercase ml-auto px-4 text-xs flex items-center mt-3 hover:underline'],
-
-  // Navigation
-  ['nav-link', 'text-slate-light hover:bg-blue-darker hover:text-white px-3 py-3.5 md:py-1 rounded-full text-sm font-medium'],
-  ['btn-navigation', 'bg-white drop-shadow-md rounded-full border flex items-center justify-center w-1/2 h-12 bottom-1 z-2 md:(bg-white/90 text-inherit hover:(text-light-blue-500 bg-white))'],
-  ['btn-navigation__active', 'border border-transparent md:(border-neutral-lighter focus:ring-0) font-medium text-white bg-blue-darker hover:bg-accent-darker focus:ring-2 focus:outline-none focus:ring-blue-300'],
-
-  // Carousel
-  ['carousel-tile', 'w-52 min-w-52 flex ml-1 lg:ml-1.5'],
-  ['carousel-product-tile', 'flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 lg:(w-28.57% min-w-28.57%) 2xl:(w-24.09% min-w-24.09%) relative'],
-  ['carousel-item', 'w-full w-full group-hover:filter-invert relative flex flex-col'],
-  ['carousel-big', 'shadow-[inset_0_10px_60px_-15px_rgba(0,0,0,0.1)] w-full h-full'],
-
-  // PDP (Product Detail Page)
-  ['pdp-headline', 'text-2xl mb-4 sm:(font-normal mb-6 text-4xl) lg:pr-0 2xl:text-5xl font-headbold text-black font-bold pr-7 pt-0 leading-none'],
-  ['pdp-detail-row', 'text-sm mt-1 md:mt-4 mb-4 grid grid-cols-2 sm:(grid-cols-details-desktop grid-flow-col auto-cols-max) gap-4'],
-  ['pdp-slider-thumb', 'block h-22.5 w-31 min-w-31 mb-2'],
-
-  // PLP (Product List Page)
-  ['plp-name', 'flex items-center leading-none font-headregular cursor-pointer sm:pr-6 md:pr-12'],
-  ['plp-desc', 'hidden sm:block col-span-3 md:col-span-1 md:col-start-3 relative px-2 sm:px-0'],
-  ['plp-materials', 'text-xs md:text-sm text-slate-darkest dark:text-neutral-light leading-tight font-textlight md:font-textregular whitespace-normal md:whitespace-pre-wrap'],
-  ['plp-b-desc', 'pb-4 bg-white text-base flex flex-wrap mt-6'],
-  ['plp-icons', 'absolute top-0 -right-2 md:(top-0.5 right-0) w-12 bottom-auto flex justify-end text-sm'],
-  ['plp-replacements', 'col-span-3 md:col-span-1 md:col-start-2 text-xs mt-3 md:mt-4'],
-
-
-  // Miscellaneous
-  ['flag-ua', 'inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]'],
-  ['engine-info', 'absolute z-20 inline-block w-56 text-xs font-light text-slate-light transition-opacity duration-300 bg-white border border-neutral-lighter rounded-lg shadow-sm dark:text-neutral-default dark:border-slate-default dark:bg-slate-darker bottom-full mb-2 invisible opacity-0 group-hover:(opacity-100 visible -left-full before:left-9) before:(absolute w-0 h-0 -bottom-3 border-l-transparent border-r-transparent border-t-neutral-lightest dark:border-t-slate-dark border-l-10 border-r-10 border-t-10 content-empty)'],
-  ['engine-code', 'underline decoration-dotted underline-offset-4 py-0.5 decoration-neutral-light group-hover:(decoration-blue-500 dark:decoration-accent-light)'],
-  ['number-secondary', 'block absolute inset-0 text-slate-light select-all bg-white dark:bg-accent-deepBlue'],
-  ['code-formatted', 'leading-none mt-0 relative text-xs'],
-
-  // Badges
-  ['badge', 'px-1.5 py-px text-white text-xs mb-1 max-w-fit whitespace-nowrap'],
-
-
-  ['detail-name', 'text-gray-900 leading-tight font-textlight line-clamp-3 whitespace-normal md:(whitespace-pre-wrap line-clamp-9 font-textregular)'],
-  ['detail-row', 'text-sm mt-1 md:mt-4 mb-4 grid grid-cols-2 gap-4 sm:(grid-cols-details-desktop grid-flow-col auto-cols-max)'],
-  ['slide-bg', 'scale-140 bg-center bg-no-repeat bg-contain h-full w-full absolute top-0 filter-blur overflow-hidden transform bg-gray-200 dark:bg-gray-700'],
-  ['slide-img', 'cursor-zoom-in my-auto z-50 h-full max-w-screen-2xl object-center object-contain pointer-events-none'],
-  ['slide-pic', 'w-full flex justify-end absolute top-0 bottom-0'],
-  ['slide-thumb', `block bg-gray-100 ${ASPECT_RATIO} w-30 h-22.5 cursor-grab active:cursor-grabbing`],
-  ['slide-thumb__img', 'pointer-events-none pb-px h-22.5 w-30 m-auto object-cover bg-white dark:bg-accent-deepBlue'],
-  ['product-carousel', 'flex-wrap content-between w-64 min-w-64 flex ml-1 first:ml-4'],
-  ['pdp-slide', `h-full bg-gray-100 ${ASPECT_RATIO} relative overflow-hidden border border-transparent`],
-  ['product-link', 'relative flex w-full bg-white after:(absolute bg-lightBlue-500 w-[calc(100%-1rem)] left-0 h-px top-[calc(100%-1px)] bottom-1 content-empty scale-x-0 transition-transform-300 origin-top-right) hover:after:(origin-top-left scale-x-100)'],
-  ['number-big', 'text-3.75 mr-2 mt-2 mb-0 sm:mt-0'],
-  ['product-thumb--related', `w-22 min-w-22 xl:w-30 xl:min-w-30 h-auto object-contain object-top bg-gray-100 ${ASPECT_RATIO} relative`],
-  ['product-thumb--carousel', `w-60 min-w-60 sm:w-22 sm:min-w-22 xl:w-30 xl:min-w-30 h-auto object-contain object-top bg-gray-100 ${ASPECT_RATIO} relative`]
-
+// shortcuts/components.ts
+import { 
+  COLORS, 
+  IMAGE_STYLES, 
+  LAYOUT, 
+  TRANSITIONS,
+  PRODUCT_STYLES,
+  aspectRatios
+} from './constants'
+
+export const componentShortcuts = [
+  // Product related
+  ['product-row', `${COLORS.bgWhite} ${LAYOUT.flex.wrap} odd:(pr-2.5 pl-3.5 sm:px-0) even:(pl-2.5 pr-3.5 sm:px-0) w-1/2 sm:(w-auto grid grid-cols-3) gap-x-1 gap-y-0 md:(${LAYOUT.grid.product} gap-x-4) justify-start content-start content-start place-content-start py-4 pb-6 sm:pb-4`],
+
+  ['product-row__photo', `${aspectRatios['4/3']} mb-2 sm:mb-0 ${IMAGE_STYLES.overlay} w-100 col-span-1 row-span-3 max-w-full text-left overflow-hidden ${LAYOUT.position.relative} ${COLORS.bgNeutralLightest} md:(col-span-1 row-span-1) box-content`],
+  ['product-row__description', `${PRODUCT_STYLES.description.base} mt-2 ${PRODUCT_STYLES.description.md}`],
+  ['product-row__main', 'w-full sm:w-auto col-span-2 leading-none relative sm:pl-1 md:(pl-0 row-start-1 col-start-2 col-span-1)'],
+
+  // Product elements
+  ['product-number', `font-novamono content-center ${LAYOUT.flex.wrap} flex-col content-start pr-5 ${COLORS.bgWhite}`],
+  ['p-number', 'inline-flex leading-none relative'],
+  ['tooltip', 'invisible absolute'],
+  ['has-tooltip', 'hover:(visible z-50)'],
+  ['product-code', 'text-blue-light mr-1 leading-none tracking-wide select-all'],
+  ['product-info', 'text-slate-light text-xxs font-textlight leading-none mt-0.5 md:(mt-0 text-xs)'],
+  ['product-date', 'inline-block text-xxs md:text-xs leading-none mt-1 md:(mt-4 mb-1) mr-2'],
+  ['product-thumb', PRODUCT_STYLES.thumb.base],
+  ['product-thumb--plp', PRODUCT_STYLES.thumb.container],
+  ['product-link--related', `${PRODUCT_STYLES.link.base} dark:bg-accent-deepBlue after:bg-accent-light`],
+  ['product-model', 'font-400'],
+  ['product-button', `text-blue-500 cursor-pointer text-base leading-none ${LAYOUT.flex.center} w-8 h-8 min-w-8 ${TRANSITIONS.base} ${COLORS.bgWhite} dark:bg-accent-deepBlue focus:(text-blue-500) hover:(text-blue-500)`],
+
+  // Category related
+  ['category-section', `pb-4 w-full ${COLORS.bgWhite} mb-4 overflow-x-hidden ${LAYOUT.flex.wrap} max-w-full`],
+  ['category-tile', `${LAYOUT.flex.wrap} sm:flex-nowrap content-between w-64 min-w-64 lg:(w-28.57% min-w-28.57%) 2xl:(w-24.09% min-w-24.09%) 3xl:(w-19.60% min-w-19.60%) flex ml-1 lg:ml-1.5 first:ml-4`],
+  ['category-toggler', 'sm:bg-opacity-20 pt-1 flex-inline items-center justify-center hover:text-light-blue-500 text-neutral-light hover:text-blue-500 px-4 leading-7 pb-0.5 md:pl-0'],
+  ['category-link', 'w-full sm:w-auto text-neutral-default hover:(bg-gray-50 sm:bg-inherit) py-2 sm:py-0 text-lg font-medium text-left px-3 block sm:(text-base leading-4 mb-1.5) md:(px-4 py-1 table-cell)'],
+  ['category-carousel__link', 'uppercase ml-auto px-4 text-xs flex items-center mt-3 hover:underline'],
+
+  // Navigation
+  ['nav-link', 'text-slate-light hover:bg-blue-darker hover:text-white px-3 py-3.5 md:py-1 rounded-full text-sm font-medium'],
+  ['btn-navigation', `${COLORS.bgWhite} drop-shadow-md rounded-full border ${LAYOUT.flex.center} w-1/2 h-12 bottom-1 z-2 md:(bg-white/90 text-inherit hover:(text-light-blue-500 bg-white))`],
+  ['btn-navigation__active', 'border border-transparent md:(border-neutral-lighter focus:ring-0) font-medium text-white bg-blue-darker hover:bg-accent-darker focus:ring-2 focus:outline-none focus:ring-blue-300'],
+
+  // Carousel
+  ['carousel-tile', 'w-52 min-w-52 flex ml-1 lg:ml-1.5'],
+  ['carousel-product-tile', `${LAYOUT.flex.wrap} sm:flex-nowrap content-between w-64 min-w-64 lg:(w-28.57% min-w-28.57%) 2xl:(w-24.09% min-w-24.09%) relative`],
+  ['carousel-item', 'w-full w-full group-hover:filter-invert relative flex flex-col'],
+  ['carousel-big', 'shadow-[inset_0_10px_60px_-15px_rgba(0,0,0,0.1)] w-full h-full'],
+
+  // PDP (Product Detail Page)
+  ['pdp-headline', 'text-2xl mb-4 sm:(font-normal mb-6 text-4xl) lg:pr-0 2xl:text-5xl font-headbold text-black font-bold pr-7 pt-0 leading-none'],
+  ['pdp-detail-row', `text-sm mt-1 md:mt-4 mb-4 grid ${LAYOUT.grid.cols2} sm:(grid-cols-details-desktop grid-flow-col auto-cols-max) gap-4`],
+  ['pdp-slider-thumb', 'block h-22.5 w-31 min-w-31 mb-2'],
+
+  // PLP (Product List Page)
+  ['plp-name', `${LAYOUT.flex.center} leading-none font-headregular cursor-pointer sm:pr-6 md:pr-12`],
+  ['plp-desc', `hidden sm:block col-span-3 md:col-span-1 md:col-start-3 ${LAYOUT.position.relative} px-2 sm:px-0`],
+  ['plp-materials', 'text-xs md:text-sm text-slate-darkest dark:text-neutral-light leading-tight font-textlight md:font-textregular whitespace-normal md:whitespace-pre-wrap'],
+  ['plp-b-desc', `pb-4 ${COLORS.bgWhite} text-base ${LAYOUT.flex.wrap} mt-6`],
+  ['plp-icons', `${LAYOUT.position.absolute} top-0 -right-2 md:(top-0.5 right-0) w-12 bottom-auto ${LAYOUT.flex.base} justify-end text-sm`],
+  ['plp-replacements', 'col-span-3 md:col-span-1 md:col-start-2 text-xs mt-3 md:mt-4'],
+
+  // Miscellaneous
+  ['flag-ua', 'inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]'],
+  ['engine-info', `${LAYOUT.position.absolute} z-20 inline-block w-56 text-xs font-light text-slate-light ${TRANSITIONS.base} ${COLORS.bgWhite} border border-neutral-lighter rounded-lg shadow-sm dark:text-neutral-default dark:border-slate-default dark:bg-slate-darker bottom-full mb-2 invisible opacity-0 group-hover:(opacity-100 visible -left-full before:left-9) before:(absolute w-0 h-0 -bottom-3 border-l-transparent border-r-transparent border-t-neutral-lightest dark:border-t-slate-dark border-l-10 border-r-10 border-t-10 content-empty)`],
+  ['engine-code', 'underline decoration-dotted underline-offset-4 py-0.5 decoration-neutral-light group-hover:(decoration-blue-500 dark:decoration-accent-light)'],
+  ['number-secondary', `block ${LAYOUT.position.absolute} inset-0 text-slate-light select-all ${COLORS.bgWhite} dark:bg-accent-deepBlue`],
+  ['code-formatted', 'leading-none mt-0 relative text-xs'],
+
+  // Badges
+  ['badge', 'px-1.5 py-px text-white text-xs mb-1 max-w-fit whitespace-nowrap'],
+
+  // Details
+  ['detail-name', 'text-gray-900 leading-tight font-textlight line-clamp-3 whitespace-normal md:(whitespace-pre-wrap line-clamp-9 font-textregular)'],
+  ['detail-row', `text-sm mt-1 md:mt-4 mb-4 grid ${LAYOUT.grid.cols2} gap-4 sm:(grid-cols-details-desktop grid-flow-col auto-cols-max)`],
+
+  // Slides
+  ['slide-bg', 'scale-140 bg-center bg-no-repeat bg-contain h-full w-full absolute top-0 filter-blur overflow-hidden transform bg-gray-200 dark:bg-gray-700'],
+  ['slide-img', 'cursor-zoom-in my-auto z-50 h-full max-w-screen-2xl object-center object-contain pointer-events-none'],
+  ['slide-pic', 'w-full flex justify-end absolute top-0 bottom-0'],
+  ['slide-thumb', `block bg-gray-100 ${aspectRatios['4/3']} w-30 h-22.5 cursor-grab active:cursor-grabbing`],
+  ['slide-thumb__img', `pointer-events-none pb-px h-22.5 w-30 m-auto object-cover ${COLORS.bgWhite} dark:bg-accent-deepBlue`],
+
+  // Product related components
+  ['product-carousel', `${LAYOUT.flex.wrap} content-between w-64 min-w-64 flex ml-1 first:ml-4`],
+  ['pdp-slide', `h-full bg-gray-100 ${aspectRatios['4/3']} ${LAYOUT.position.relative} overflow-hidden border border-transparent`],
+  ['product-link', PRODUCT_STYLES.link.base],
+  ['number-big', 'text-3.75 mr-2 mt-2 mb-0 sm:mt-0'],
+  ['product-thumb--related', `w-22 min-w-22 xl:w-30 xl:min-w-30 h-auto ${IMAGE_STYLES.objectContain} object-top bg-gray-100 ${aspectRatios['4/3']} ${LAYOUT.position.relative}`],
+  ['product-thumb--carousel', `w-60 min-w-60 sm:w-22 sm:min-w-22 xl:w-30 xl:min-w-30 h-auto ${IMAGE_STYLES.objectContain} object-top bg-gray-100 ${aspectRatios['4/3']} ${LAYOUT.position.relative}`]
 ];

package/uno-config/theme/shortcuts/constants.ts

@@ -1,3 +1,152 @@
-export const ASPECT_RATIO = 'aspect-ratio-[4/3]'
-// export const BG_WHITE = 'bg-white dark:bg-blue-901'
-// export const TEXT_SLATE = 'text-slate-500'
+// Aspect ratios configuration
+export const aspectRatios = {
+  '4/3': 'aspect-[4/3]',
+  '3/4': 'aspect-[3/4]',
+  '1/1': 'aspect-square',
+  '3/2': 'aspect-[3/2]',
+  '2/3': 'aspect-[2/3]',
+  '3/1': 'aspect-[3/1]',
+  '16/9': 'aspect-video',
+} as const
+
+// Theme colors
+export const COLORS = {
+  bgWhite: 'bg-white',
+  bgDark: 'dark:bg-blue-901',
+  textSlate: 'text-slate-500',
+  textNeutralLight: 'dark:text-neutral-light',
+  textSlateDark: 'text-slate-darkest',
+  bgNeutralLightest: 'bg-neutral-lightest',
+} as const
+
+// Image styles
+export const IMAGE_STYLES = {
+  base: 'relative object-cover bg-neutral-lightest h-auto max-w-full',
+  overlay: 'after:(content-empty bg-black bg-opacity-[.03] absolute w-full h-full top-0)',
+  objectContain: 'object-contain object-center',
+  aspectBase: aspectRatios['4/3'],
+} as const
+
+// Common layout properties
+export const LAYOUT = {
+  flex: {
+    base: 'flex',
+    center: 'flex items-center justify-center',
+    between: 'flex items-center justify-between',
+    wrap: 'flex flex-wrap',
+    nowrap: 'flex-nowrap',
+  },
+  spacing: {
+    topPadding: 'pt-24 sm:pt-14',
+    containerPadding: 'px-4',
+  },
+  grid: {
+    cols2: 'grid-cols-2',
+    cols3: 'grid-cols-3',
+    cols4: 'grid-cols-4',
+    product: 'grid-cols-product',
+  },
+  position: {
+    relative: 'relative',
+    absolute: 'absolute',
+    fixed: 'fixed',
+  },
+} as const
+
+// Common transitions
+export const TRANSITIONS = {
+  base: 'transition-all duration-300 ease-linear',
+  transform: 'transition-transform-300',
+  hover: 'transition duration-200 ease-in-out',
+} as const
+
+// Button base styles
+export const BUTTON_STYLES = {
+  base: {
+    layout: 'inline-flex items-center justify-center',
+    text: 'text-base font-medium text-center',
+    transition: 'transition-all duration-200 ease-in-out',
+  },
+  sizes: {
+    normal: 'md:px-10 md:py-2 md:text-lg px-8 py-3 whitespace-nowrap',
+    sm: 'px-6 py-2 text-sm whitespace-nowrap',
+    xs: 'px-4 py-1 text-sm whitespace-nowrap',
+  },
+  variants: {
+    primary: {
+      solid: 'bg-accent-lightest border border-transparent hover:bg-accent-light text-blue-darker shadow',
+      outline: 'border-accent-light border text-accent-default hover:(bg-accent-light text-white)',
+    },
+    secondary: {
+      solid: 'bg-neutral-dark border border-transparent hover:bg-neutral-darker text-white shadow',
+      outline: 'border-neutral-dark border text-neutral-dark hover:(text-white bg-neutral-dark)',
+    },
+    tertiary: {
+      solid: 'bg-blue-darker hover:bg-accent-darker text-white focus:(ring-4 outline-none ring-blue-light)',
+      outline: 'border-blue-darker text-blue-darker focus:(ring-2 outline-none ring-blue-light)',
+    },
+  },
+  hover: {
+    white: 'hover:(text-blue-darker bg-white border-blue-darker)',
+    light: 'hover:(text-blue-darker bg-accent-lightest border-accent-lightest)',
+    medium: 'hover:(text-white bg-brand-primary border-brand-primary)',
+    dark: 'hover:(bg-blue-darker text-white border-blue-darker)',
+  },
+} as const
+
+// Product specific styles
+export const PRODUCT_STYLES = {
+  thumb: {
+    base: 'h-full w-full object-cover object-center transform scale-100 group-hover:scale-110 absolute inset-0 will-change-transform bg-neutral-lightest',
+    container: `${aspectRatios['4/3']} flex items-center justify-center mb-3 sm:mb-0 ${IMAGE_STYLES.overlay}`,
+  },
+  link: {
+    base: 'relative flex w-full bg-white after:(absolute bg-lightBlue-500 w-[calc(100%-1rem)] left-0 h-px top-[calc(100%-1px)] bottom-1 content-empty scale-x-0 transition-transform-300 origin-top-right) hover:after:(origin-top-left scale-x-100)',
+    url: 'font-light leading-none mb-2 pr-4 line-clamp-2 h-[2em]',
+    urlOverlay: 'before:(content-empty absolute left-0 right-4 h-full top-0)',
+    bigTile: `aspect-[4/3] flex items-center justify-center mb-3 w-60 min-w-60 h-auto object-contain object-top bg-gray-50 relative ${IMAGE_STYLES.overlay}`,
+  },
+  description: {
+    base: `text-xs ${COLORS.textSlateDark} ${COLORS.textNeutralLight} leading-tight font-textlight line-clamp-3 whitespace-normal`,
+    md: 'md:(text-sm mt-0 font-textregular whitespace-pre-wrap)',
+  },
+} as const
+
+// Common typography styles
+export const TYPOGRAPHY = {
+  headline: {
+    base: 'font-headlight',
+    bold: 'font-headlight font-bold',
+    light: 'font-headlight font-300 tracking-tight',
+  },
+  text: {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
+    lg: 'text-lg',
+  },
+} as const
+
+// Product constants
+export const PRODUCT_CONSTANTS = {
+  link: {
+    base: 'relative flex w-full',
+    url: 'font-light leading-none mb-2 pr-4 line-clamp-2 h-[2em]',
+    urlOverlay: 'before:(content-empty absolute left-0 right-4 h-full top-0)',
+    bigTile: `${aspectRatios['4/3']} flex items-center justify-center mb-3 w-60 min-w-60 h-auto object-contain object-top bg-gray-50 relative ${IMAGE_STYLES.overlay}`,
+  },
+  image: {
+    base: `${aspectRatios['4/3']} ${IMAGE_STYLES.base} ${IMAGE_STYLES.overlay}`,
+    small: `${aspectRatios['4/3']} ${IMAGE_STYLES.base} ${IMAGE_STYLES.overlay} w-22 h-auto`,
+    large: `${aspectRatios['4/3']} ${IMAGE_STYLES.base} ${IMAGE_STYLES.overlay} w-60 h-auto`,
+  },
+  description: {
+    base: `text-xs ${COLORS.textSlateDark} ${COLORS.textNeutralLight} leading-tight font-textlight line-clamp-3 whitespace-normal`,
+    md: 'md:(text-sm mt-0 font-textregular whitespace-pre-wrap)',
+  },
+  sizes: {
+    small: 'w-22 min-w-22',
+    medium: 'w-30 min-w-30',
+    large: 'w-60 min-w-60',
+  },
+} as const

package/uno-config/theme/shortcuts/index.ts

@@ -1,17 +1,17 @@
-// shortcuts/index.ts
-import type { UserShortcuts } from 'unocss'
-import { buttonShortcuts } from './buttons';
-import { layoutShortcuts } from './layout';
-import { componentShortcuts } from './components';
-import { productShortcuts } from './product';
-
-const convertToShortcuts = (shortcuts: string[][]): UserShortcuts => {
-  return Object.fromEntries(shortcuts.map(([name, value]) => [name, value]));
-};
-
-export const shortcuts: UserShortcuts = {
-  ...convertToShortcuts(buttonShortcuts),
-  ...convertToShortcuts(layoutShortcuts),
-  ...convertToShortcuts(componentShortcuts),
-  ...convertToShortcuts(productShortcuts)
+// shortcuts/index.ts
+import type { UserShortcuts } from 'unocss'
+import { buttonShortcuts } from './buttons';
+import { layoutShortcuts } from './layout';
+import { componentShortcuts } from './components';
+import { productShortcuts } from './product';
+
+const convertToShortcuts = (shortcuts: string[][]): UserShortcuts => {
+  return Object.fromEntries(shortcuts.map(([name, value]) => [name, value]));
+};
+
+export const shortcuts: UserShortcuts = {
+  ...convertToShortcuts(buttonShortcuts),
+  ...convertToShortcuts(layoutShortcuts),
+  ...convertToShortcuts(componentShortcuts),
+  ...convertToShortcuts(productShortcuts)
 };

package/uno-config/theme/shortcuts/layout.ts

@@ -1,59 +1,64 @@
-// shortcuts/layout.ts
-export const layoutShortcuts = [
-    // Main Layout
-    ['l-main', 'text-slate-dark pt-24 sm:pt-14 bg-white'],
-    ['main', 'text-slate-dark dark:text-neutral-lighter dark:bg-blue-darker pt-24 sm:pt-14 relative'],
-    ['nav', 'bg-white dark:bg-black absolute sm:fixed w-full top-0 z-41 mx-auto px-4 pt-1 h-24 flex border-b border-neutral-lighter justify-between items-center flex-wrap sm:(flex-nowrap pt-0 h-14) max-w-screen print-hidden'],
-  
-    // View Toggles
-    ['view-grid', 'md:(grid grid-cols-2)'],
-    ['view-list', 'md:(flex flex-col gap-4 divide-y-1 divide-solid) divide-neutral-lighter'],
-  
-    // Containers
-    ['products-container', 'products-wrapper'],
-    ['products-wrapper', 'flex flex-wrap bg-white mb-4 w-full mb-auto md:(pl-4 px-2 -mt-3)'],
-    ['product-list', 'sm:block products-wrapper'],
-    ['products-grid', 'flex w-full flex-nowrap items-center pr-4 md:grid grid-rows-1 overflow-hidden grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 max-h-[6rem]'],
-    ['similar-products', 'flex items-center space-y-4 gap-8 flex-wrap px-4 md:grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5'],
-    ['similar-section', 'bg-white w-full drop-shadow-xl'],
-    ['search-container', 'mb-2 sm:mb-0'],
-  
-    // Category Menu
-    ['cat-menu', 'fixed h-21 bottom-[-6px] w-full z-10 border-t-1 border-neutral-light bg-white dark:bg-blue-darkest text-center sm:(static z-auto border-t-none h-28)'],
-    ['cat-card', 'p-4 text-base break-inside-avoid-column'],
-    ['cat-name', 'mt-2 h-[2em] text-xs leading-none group-hover:filter-invert 3xl:text-3.25'],
-    ['cats-slide', 'transition duration-300 ease-linear mb-0.5 min-h-tile-mobile sm:(min-h-tile h-tile mb-2 p-3) text-black dark:text-white hover:(text-white even:bg-blue-medium odd:bg-accent-light) cursor-pointer flex items-center flex-col justify-center transition ease-in-out duration-700 px-1.5 cursor-grab active:cursor-grabbing overflow-hidden'],
-    ['cats-img', 'max-w-full h-8 md:h-icon object-contain object-center w-full left-0 right-0 top-0 bottom-0'],
-  
-    // Sidebars and Navigation
-    ['sidebar-title', 'font-headregular text-light-blue-500 text-xl md:(text-2xl px-4) mb-2 px-14 sm:px-3 flex items-center justify-center sm:justify-start py-3'],
-    ['subcat', 'text-3.75 block cursor-pointer text-light-blue-darker hover:(text-accent-default underline) md:mb-1 py-2 md:py-0'],
-    ['subsubcat', 'pl-2'],
-  
-    // Headers and Banners
-    ['headline', 'font-headlight font-bold'],
-    ['headline-light', 'font-headlight font-300 tracking-tight'],
-    ['slimbanner', 'px-4 sm:px-8 flex items-center justify-center text-xs sm:text-base leading-none relative bg-gray-50 z-2 px-4 py-3 sm:(text-base px-8) text-blue-darker print-hidden'],
-  
-    // Image Styles
-    ['img--overlay', 'after:(content-empty bg-black bg-opacity-[.03] absolute w-full h-full top-0)'],
-    ['img--4/3', 'aspect-[4/3] relative object-cover bg-neutral-lightest h-auto max-w-full'],
-    ['img--3/4', 'aspect-[3/4] relative object-cover bg-neutral-lightest h-auto max-w-full'],
-    ['img--1/1', 'aspect-square relative object-cover bg-neutral-lightest h-auto max-w-full'],
-    ['img--3/2', 'aspect-[3/2] relative object-cover bg-neutral-lightest h-auto max-w-full'],
-    ['img--2/3', 'aspect-[2/3] relative object-cover bg-neutral-lightest h-auto max-w-full'],
-    ['img--3/1', 'aspect-[3/1] relative object-cover bg-neutral-lightest h-auto max-w-full'],
-    ['img--16/9', 'aspect-video relative object-cover bg-neutral-lightest h-auto max-w-full'],
-    ['img--small', 'h-full w-60 sm:(w-22) xl:(w-30)'],
-    ['img--medium', 'h-full w-60'],
-  
-    // Utility
-    ['close-light', 'before:bg-white after:bg-white'],
-    ['close-dark', 'before:bg-black after:bg-black'],
-    ['colon-after', 'after:content-[":"]'],
-    ['adsbygoogle', 'w-full text-center'],
-
-    ['underline-on-hover', 'relative flex w-full bg-white pb-1 after:absolute after:bg-lightBlue-55000 after:w-[calc(100%-1rem)] after:left-0 after:h-px after:top-[calc(100%-1px)] after:bottom-1 after:content-empty after:scale-x-0 after:transition-transform-300 after:origin-top-right hover:after:origin-top-left hover:after:scale-x-100'],
-    ['cat-link', 'cursor-pointer text-accent-deepBlue dark:text-white hover:(text-lightBlue-400 underline) uppercase py-2 md:py-0'],
-
-  ];
+import { 
+  COLORS, 
+  LAYOUT, 
+  IMAGE_STYLES, 
+  TYPOGRAPHY,
+  TRANSITIONS,
+  aspectRatios 
+} from './constants'
+
+// Generate image shortcuts dynamically
+const imageShortcuts = Object.entries(aspectRatios).map(([ratio, aspect]) => [
+  `img--${ratio}`,
+  `${aspect} ${IMAGE_STYLES.base}`
+])
+
+export const layoutShortcuts = [
+  // Main Layout
+  ['l-main', `text-slate-dark ${LAYOUT.spacing.topPadding} ${COLORS.bgWhite}`],
+  ['main', `text-slate-dark ${COLORS.textNeutralLight} ${COLORS.bgDark} ${LAYOUT.spacing.topPadding} ${LAYOUT.position.relative}`],
+  ['nav', `${COLORS.bgWhite} ${COLORS.bgDark} ${LAYOUT.position.absolute} sm:fixed w-full top-0 z-41 mx-auto ${LAYOUT.spacing.containerPadding} pt-1 h-24 ${LAYOUT.flex.base} border-b border-neutral-lighter justify-between items-center flex-wrap sm:(flex-nowrap pt-0 h-14) max-w-screen print-hidden`],
+
+  // View Toggles
+  ['view-grid', 'lg:flex-wrap'],
+  ['view-list', 'lg:flex-col divide-y-1 divide-solid divide-neutral-lighter'],
+
+  // Containers
+  ['products-container', 'products-wrapper'],
+  ['products-wrapper', `${LAYOUT.flex.wrap} gap-4 ${COLORS.bgWhite} mb-4 w-full mb-auto md:(pl-4 px-2 -mt-3)`],
+  ['product-list', 'sm:block products-wrapper'],
+  ['products-grid', `${LAYOUT.flex.base} w-full flex-nowrap items-center pr-4 md:grid grid-rows-1 overflow-hidden ${LAYOUT.grid.cols2} lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 max-h-[6rem]`],
+  ['similar-products', `${LAYOUT.flex.center} space-y-4 gap-8 flex-wrap px-4 md:grid ${LAYOUT.grid.cols2} lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5`],
+  ['similar-section', `${COLORS.bgWhite} w-full drop-shadow-xl`],
+  ['search-container', 'mb-2 sm:mb-0'],
+
+  // Category Menu
+  ['cat-menu', `fixed h-21 bottom-[-6px] w-full z-10 border-t-1 border-neutral-light ${COLORS.bgWhite} dark:bg-blue-darkest text-center sm:(static z-auto border-t-none h-28)`],
+  ['cat-card', 'p-4 text-base break-inside-avoid-column'],
+  ['cat-name', 'mt-2 h-[2em] text-xs leading-none group-hover:filter-invert 3xl:text-3.25'],
+  ['cats-slide', `${TRANSITIONS.base} mb-0.5 min-h-tile-mobile sm:(min-h-tile h-tile mb-2 p-3) text-black ${COLORS.textNeutralLight} hover:(text-white even:bg-blue-medium odd:bg-accent-light) cursor-pointer ${LAYOUT.flex.center} flex-col justify-center transition ease-in-out duration-700 px-1.5 cursor-grab active:cursor-grabbing overflow-hidden`],
+  ['cats-img', `max-w-full h-8 md:h-icon ${IMAGE_STYLES.objectContain} w-full left-0 right-0 top-0 bottom-0`],
+
+  // Sidebars and Navigation
+  ['sidebar-title', 'font-headregular text-light-blue-500 text-xl md:(text-2xl px-4) mb-2 px-14 sm:px-3 flex items-center justify-center sm:justify-start py-3'],
+  ['subcat', 'text-3.75 block cursor-pointer text-light-blue-darker hover:(text-accent-default underline) md:mb-1 py-2 md:py-0'],
+  ['subsubcat', 'pl-2'],
+
+  // Headers and Banners
+  ['headline', TYPOGRAPHY.headline.bold],
+  ['headline-light', TYPOGRAPHY.headline.light],
+  ['slimbanner', `px-4 sm:px-8 ${LAYOUT.flex.center} text-xs sm:text-base leading-none ${LAYOUT.position.relative} bg-gray-50 z-2 px-4 py-3 sm:(text-base px-8) text-blue-darker print-hidden`],
+
+  // Image Shortcuts
+  ...imageShortcuts,
+  ['img--small', `h-full w-60 sm:(w-22) xl:(w-30) ${IMAGE_STYLES.base}`],
+  ['img--medium', `h-full w-60 ${IMAGE_STYLES.base}`],
+
+  // Utility Classes
+  ['close-light', 'before:bg-white after:bg-white'],
+  ['close-dark', 'before:bg-black after:bg-black'],
+  ['colon-after', 'after:content-[":"]'],
+  ['adsbygoogle', 'w-full text-center'],
+  ['underline-on-hover', `${LAYOUT.position.relative} ${LAYOUT.flex.base} w-full ${COLORS.bgWhite} pb-1 after:absolute after:bg-lightBlue-55000 after:w-[calc(100%-1rem)] after:left-0 after:h-px after:top-[calc(100%-1px)] after:bottom-1 after:content-empty after:scale-x-0 after:transition-transform-300 after:origin-top-right hover:after:origin-top-left hover:after:scale-x-100`],
+  ['cat-link', `cursor-pointer text-accent-deepBlue ${COLORS.textNeutralLight} hover:(text-lightBlue-400 underline) uppercase py-2 md:py-0`],
+];

package/uno-config/theme/shortcuts/product.ts

@@ -1,6 +1,15 @@
 // shortcuts/product.ts
+import { PRODUCT_CONSTANTS, IMAGE_STYLES, aspectRatios } from './constants'
+
+const { link } = PRODUCT_CONSTANTS
+
 export const productShortcuts = [
-  ['product-link--url', 'font-light leading-none mb-2 pr-4 line-clamp-2 h-[2em] before:(content-empty absolute left-0 right-4 h-full top-0)'],
-  ['product-link--big-tile', 'aspect-ratio-[4/3] flex items-center flex justify-center mb-3 w-60 min-w-60 h-auto object-contain object-top bg-gray-50 aspect-[4/3] relative img--overlay'],
-  // Add other product-specific shortcuts here
+  // Product links
+  ['product-link--url', `${link.url} ${link.urlOverlay}`],
+  ['product-link--big-tile', link.bigTile],
+  
+  // Product images
+  ['product-image', `${aspectRatios['4/3']} ${IMAGE_STYLES.base} ${IMAGE_STYLES.overlay}`],
+  ['product-image--small', `${aspectRatios['4/3']} ${IMAGE_STYLES.base} ${IMAGE_STYLES.overlay} w-22 h-auto`],
+  ['product-image--large', `${aspectRatios['4/3']} ${IMAGE_STYLES.base} ${IMAGE_STYLES.overlay} w-60 h-auto`],
 ];

package/uno-config/theme/typography.ts

@@ -1,30 +1,30 @@
-// theme/typography.ts
-interface FontFamily {
-    [key: string]: string[];
-  }
-  
-  interface FontSize {
-    [key: string]: string;
-  }
-  
-  interface Typography {
-    fontFamily: FontFamily;
-    fontSize: FontSize;
-  }
-  
-  export const typography: Typography = {
-    fontFamily: {
-      sans: ['vw_textregular', 'system-ui', 'ui-sans-serif'],
-      novamono: ['Nova Mono'],
-      mono: ['Nova Mono'],
-      headlight: ['vw_headlight', 'system-ui'],
-      headregular: ['vw_headregular'],
-      headbold: ['vw_headbold'],
-      textlight: ['vw_textlight'],
-      textregular: ['vw_textregular'],
-      textbold: ['vw_textbold']
-    },
-    fontSize: {
-      xxs: '.625rem',
-    }
+// theme/typography.ts
+interface FontFamily {
+    [key: string]: string[];
+  }
+  
+  interface FontSize {
+    [key: string]: string;
+  }
+  
+  interface Typography {
+    fontFamily: FontFamily;
+    fontSize: FontSize;
+  }
+  
+  export const typography: Typography = {
+    fontFamily: {
+      sans: ['vw_textregular', 'system-ui', 'ui-sans-serif'],
+      novamono: ['Nova Mono'],
+      mono: ['Nova Mono'],
+      headlight: ['vw_headlight', 'system-ui'],
+      headregular: ['vw_headregular'],
+      headbold: ['vw_headbold'],
+      textlight: ['vw_textlight'],
+      textregular: ['vw_textregular'],
+      textbold: ['vw_textbold']
+    },
+    fontSize: {
+      xxs: '.625rem',
+    }
   };

package/uno.config.ts

@@ -1,3 +1,3 @@
-import { createSdsConfig } from './uno-config';
-
+import { createSdsConfig } from './uno-config';
+
 export default createSdsConfig();