spoko-design-system 0.5.4 → 0.5.5

package/uno-config/theme/dimensions.ts

@@ -1,18 +1,18 @@
-// theme/dimensions.ts
-export const dimensions = {
-    height: {
-      'tile': '104px',
-      'tile-mobile': '78px',
-      'sidebar': 'calc(100vh - 5.125rem)',
-      'full-mobile': 'calc(var(--vh, 1vh) * 100)',
-      'icon': '46px',
-    },
-    maxHeight: {
-      'icon': '46px',
-      'sidebar': 'calc(100vh - 5.125rem)',
-    },
-    minHeight: {
-      'tile': '104px',
-      'tile-mobile': '78px',
-    }
+// theme/dimensions.ts
+export const dimensions = {
+    height: {
+      'tile': '104px',
+      'tile-mobile': '78px',
+      'sidebar': 'calc(100vh - 5.125rem)',
+      'full-mobile': 'calc(var(--vh, 1vh) * 100)',
+      'icon': '46px',
+    },
+    maxHeight: {
+      'icon': '46px',
+      'sidebar': 'calc(100vh - 5.125rem)',
+    },
+    minHeight: {
+      'tile': '104px',
+      'tile-mobile': '78px',
+    }
   };

package/uno-config/theme/effects.ts

@@ -1,15 +1,15 @@
-// theme/effects.ts
-export const effects = {
-    filter: {
-      blur: 'blur(5px)',
-    },
-    backgroundSize: {
-      full: '100% 100%',
-    },
-    aspectRatio: {
-      '4/3': '4 / 3',
-    },
-    cursor: {
-      'zoom-in': 'zoom-in',
-    },
+// theme/effects.ts
+export const effects = {
+    filter: {
+      blur: 'blur(5px)',
+    },
+    backgroundSize: {
+      full: '100% 100%',
+    },
+    aspectRatio: {
+      '4/3': '4 / 3',
+    },
+    cursor: {
+      'zoom-in': 'zoom-in',
+    },
   };

package/uno-config/theme/grid.ts

@@ -1,11 +1,11 @@
-// theme/grid.ts
-export const gridTemplates = {
-    columns: {
-      16: 'repeat(16, minmax(0, 1fr))',
-      product: '15rem 20rem minmax(15rem, 1fr)',
-      productGrid: '15rem minmax(20rem, 1fr)',
-      productGalleryDesktop: 'calc(100% - 14% - 0.9375rem) 14%',
-      replacement: '6.25rem 12rem auto',
-      'details-desktop': '12.5rem calc(100% - 12.5rem - 1rem)'
-    }
+// theme/grid.ts
+export const gridTemplates = {
+    columns: {
+      16: 'repeat(16, minmax(0, 1fr))',
+      product: '15rem 20rem minmax(15rem, 1fr)',
+      productGrid: '15rem minmax(20rem, 1fr)',
+      productGalleryDesktop: 'calc(100% - 14% - 0.9375rem) 14%',
+      replacement: '6.25rem 12rem auto',
+      'details-desktop': '12.5rem calc(100% - 12.5rem - 1rem)'
+    }
   };

package/uno-config/theme/index.ts

@@ -1,29 +1,29 @@
-// uno-config/theme/index.ts
-import { colors } from './colors';
-import { typography } from './typography';
-import { breakpoints } from './breakpoints';
-import { dimensions } from './dimensions';
-import { effects } from './effects';
-import { gridTemplates } from './grid';
-import { container } from './container';
-
-export const theme = {
-  colors,
-  ...typography,
-  ...dimensions,
-  ...effects,
-  gridTemplateColumn: gridTemplates.columns, 
-  breakpoints,
-  screens: breakpoints,
-  container,
-};
-
-export {
-  colors,
-  typography,
-  breakpoints,
-  dimensions,
-  effects,
-  gridTemplates,
-  container,
+// uno-config/theme/index.ts
+import { colors } from './colors';
+import { typography } from './typography';
+import { breakpoints } from './breakpoints';
+import { dimensions } from './dimensions';
+import { effects } from './effects';
+import { gridTemplates } from './grid';
+import { container } from './container';
+
+export const theme = {
+  colors,
+  ...typography,
+  ...dimensions,
+  ...effects,
+  gridTemplateColumn: gridTemplates.columns, 
+  breakpoints,
+  screens: breakpoints,
+  container,
+};
+
+export {
+  colors,
+  typography,
+  breakpoints,
+  dimensions,
+  effects,
+  gridTemplates,
+  container,
 };

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

@@ -1,54 +1,54 @@
-// shortcuts/buttons.ts
-import { BUTTON_STYLES, TRANSITIONS, LAYOUT, COLORS } from './constants'
-
-const { base, sizes, variants, hover } = BUTTON_STYLES
-
-export const buttonShortcuts = [
-    // Base buttons
-    ['btn', `px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:(cursor-default bg-gray-600 opacity-50) ${TRANSITIONS.base}`],
-    ['icon-btn', `text-[0.9em] inline-block cursor-pointer select-none opacity-75 ${TRANSITIONS.base} hover:(opacity-100 text-teal-600)`],
-
-    // Primary buttons
-    ['btn-primary', `${base.layout} ${base.text} ${variants.primary.solid} ${TRANSITIONS.base}`],
-    ['btn-primary-outline', `${base.layout} ${base.text} ${variants.primary.outline} ${TRANSITIONS.base} ${TRANSITIONS.base}`],
-    
-    // Secondary buttons
-    ['btn-secondary', `${base.layout} ${base.text} ${variants.secondary.solid} ${TRANSITIONS.base}`],
-    ['btn-secondary-outline', `${base.layout} ${base.text} ${variants.secondary.outline} ${TRANSITIONS.base}`],
-    
-    // Tertiary buttons
-    ['btn-tertiary', `${base.layout} ${base.text} ${variants.tertiary.solid} ${TRANSITIONS.base}`],
-    ['btn-tertiary-outline', `${base.layout} border ${base.text} ${variants.tertiary.outline} ${TRANSITIONS.base}`],
-    
-    // Utility buttons
-    ['btn-text', `text-neutral-dark border border-transparent hover:underline ${TRANSITIONS.base}`],
-    ['btn-tag', `
-        inline-flex items-center
-        px-3 py-1
-        text-sm
-        bg-blue-ultralight text-blue-medium
-        dark:bg-accent-deepBlue dark:text-neutral-lighter
-        rounded-full
-        border border-blue-ultralight dark:border-accent-darker
-        transition-all duration-200
-        hover:(bg-neutral-lightest dark:bg-accent-darker)
-        hover:scale-105
-        active:scale-95
-    `],    
-    // Size variants
-    ['btn-normal', sizes.normal],
-    ['btn-sm', sizes.sm],
-    ['btn-xs', sizes.xs],
-
-    // Hover variants
-    ['btn-white-hover', hover.white],
-    ['btn-light-hover', hover.light],
-    ['btn-medium-hover', hover.medium],
-    ['btn-dark-hover', hover.dark],
-
-    // Special buttons
-    ['btn-circle', `rounded-full !p-0 aspect-square inline-flex`],
-    ['btn-copy', `leading-none opacity-10 hover:opacity-80 ml-auto w-6 h-6 -right-7 sm:(h-4 w-4 -right-5) ${LAYOUT.position.absolute}`],
-    ['btn-copy-text', 'shadow-sm py-0.5 px-1 bg-gray-100 -ml-1 -mt-4 text-xxs whitespace-nowrap'],
-    ['btn-prcode', `${LAYOUT.position.relative} inline-block text-center leading-none px-1 py-0.5 mr-1 cursor-pointer font-mono border-solid border-1 border-gray-200 select-none text-gray-500 last:mr-0 not-last:mr-2 not-last:after:content-[+] after:(text-blue-darker ${LAYOUT.position.absolute} w-4 pl-0.5)`]
+// shortcuts/buttons.ts
+import { BUTTON_STYLES, TRANSITIONS, LAYOUT, COLORS } from './constants'
+
+const { base, sizes, variants, hover } = BUTTON_STYLES
+
+export const buttonShortcuts = [
+    // Base buttons
+    ['btn', `px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:(cursor-default bg-gray-600 opacity-50) ${TRANSITIONS.base}`],
+    ['icon-btn', `text-[0.9em] inline-block cursor-pointer select-none opacity-75 ${TRANSITIONS.base} hover:(opacity-100 text-teal-600)`],
+
+    // Primary buttons
+    ['btn-primary', `${base.layout} ${base.text} ${variants.primary.solid} ${TRANSITIONS.base}`],
+    ['btn-primary-outline', `${base.layout} ${base.text} ${variants.primary.outline} ${TRANSITIONS.base} ${TRANSITIONS.base}`],
+    
+    // Secondary buttons
+    ['btn-secondary', `${base.layout} ${base.text} ${variants.secondary.solid} ${TRANSITIONS.base}`],
+    ['btn-secondary-outline', `${base.layout} ${base.text} ${variants.secondary.outline} ${TRANSITIONS.base}`],
+    
+    // Tertiary buttons
+    ['btn-tertiary', `${base.layout} ${base.text} ${variants.tertiary.solid} ${TRANSITIONS.base}`],
+    ['btn-tertiary-outline', `${base.layout} border ${base.text} ${variants.tertiary.outline} ${TRANSITIONS.base}`],
+    
+    // Utility buttons
+    ['btn-text', `text-neutral-dark border border-transparent hover:underline ${TRANSITIONS.base}`],
+    ['btn-tag', `
+        inline-flex items-center
+        px-3 py-1
+        text-sm
+        bg-blue-ultralight text-blue-medium
+        dark:bg-accent-deepBlue dark:text-neutral-lighter
+        rounded-full
+        border border-blue-ultralight dark:border-accent-darker
+        transition-all duration-200
+        hover:(bg-neutral-lightest dark:bg-accent-darker)
+        hover:scale-105
+        active:scale-95
+    `],    
+    // Size variants
+    ['btn-normal', sizes.normal],
+    ['btn-sm', sizes.sm],
+    ['btn-xs', sizes.xs],
+
+    // Hover variants
+    ['btn-white-hover', hover.white],
+    ['btn-light-hover', hover.light],
+    ['btn-medium-hover', hover.medium],
+    ['btn-dark-hover', hover.dark],
+
+    // Special buttons
+    ['btn-circle', `rounded-full !p-0 aspect-square inline-flex`],
+    ['btn-copy', `leading-none opacity-10 hover:opacity-80 ml-auto w-6 h-6 -right-7 sm:(h-4 w-4 -right-5) ${LAYOUT.position.absolute}`],
+    ['btn-copy-text', 'shadow-sm py-0.5 px-1 bg-gray-100 -ml-1 -mt-4 text-xxs whitespace-nowrap'],
+    ['btn-prcode', `${LAYOUT.position.relative} inline-block text-center leading-none px-1 py-0.5 mr-1 cursor-pointer font-mono border-solid border-1 border-gray-200 select-none text-gray-500 last:mr-0 not-last:mr-2 not-last:after:content-[+] after:(text-blue-darker ${LAYOUT.position.absolute} w-4 pl-0.5)`]
 ];

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

@@ -1,93 +1,93 @@
-// 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 flex flex-wrap flex-col content-start pr-5 ${COLORS.bgWhite}`],
-
-  ['p-number', `${LAYOUT.flex.base} 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-lightest 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-lightest) hover:(text-blue-lightest)`],
-
-  // 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', `w-8 sm:bg-opacity-20 pt-1 ${LAYOUT.flex.center} hover:text-accent-light text-neutral-light hover:text-blue-lightest 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 ${LAYOUT.flex.alignCenter} 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-accent-light 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', `${LAYOUT.flex.base} w-52 min-w-52 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 ${LAYOUT.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.alignCenter} 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.justifyEnd} 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-lightest 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 ${LAYOUT.flex.justifyEnd} 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 ${LAYOUT.flex.base} 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}`]
+// 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 flex flex-wrap flex-col content-start pr-5 ${COLORS.bgWhite}`],
+
+  ['p-number', `${LAYOUT.flex.base} 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-lightest 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-lightest) hover:(text-blue-lightest)`],
+
+  // 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', `w-8 sm:bg-opacity-20 pt-1 ${LAYOUT.flex.center} hover:text-accent-light text-neutral-light hover:text-blue-lightest 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 ${LAYOUT.flex.alignCenter} 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-accent-light 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', `${LAYOUT.flex.base} w-52 min-w-52 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 ${LAYOUT.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.alignCenter} 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.justifyEnd} 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-lightest 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 ${LAYOUT.flex.justifyEnd} 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 ${LAYOUT.flex.base} 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/index.ts

@@ -1,19 +1,19 @@
-// shortcuts/index.ts
-import type { UserShortcuts } from 'unocss'
-import { buttonShortcuts } from './buttons';
-import { layoutShortcuts } from './layout';
-import { componentShortcuts } from './components';
-import { productShortcuts } from './product';
-import { jumbotronShortcuts } from './jumbotron';
-
-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),
-  ...convertToShortcuts(jumbotronShortcuts),
+// shortcuts/index.ts
+import type { UserShortcuts } from 'unocss'
+import { buttonShortcuts } from './buttons';
+import { layoutShortcuts } from './layout';
+import { componentShortcuts } from './components';
+import { productShortcuts } from './product';
+import { jumbotronShortcuts } from './jumbotron';
+
+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),
+  ...convertToShortcuts(jumbotronShortcuts),
 };

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

@@ -44,5 +44,5 @@ export const jumbotronShortcuts = [
   ['jumbotron-split-meta', 'order-3 flex items-center text-gray-100'],
   ['jumbotron-split-image-wrapper', 'relative -mb-8 md:(mt-4 -ml-4 mr-4) xl:(ml-0 mr-0)'],
   ['jumbotron-split-image', 'relative shadow-xl md:max-h-112'],
-  ['jumbotron-split-img', 'aspect-video'] // border-white border-4
+  ['jumbotron-split-img', 'aspect-video object-cover']
 ];

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

@@ -1,65 +1,65 @@
-// shortcuts/layout.ts
-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.between} 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} ${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.alignCenter} w-full flex-nowrap 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.colCenter} 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-accent-light text-xl md:(text-2xl px-4) mb-2 px-14 sm:px-3 ${LAYOUT.flex.center} sm:justify-start py-3`],
-  ['subcat', 'text-3.75 block cursor-pointer text-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: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-brand-secondary underline) uppercase py-2 md:py-0`],
+// shortcuts/layout.ts
+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.between} 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} ${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.alignCenter} w-full flex-nowrap 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.colCenter} 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-accent-light text-xl md:(text-2xl px-4) mb-2 px-14 sm:px-3 ${LAYOUT.flex.center} sm:justify-start py-3`],
+  ['subcat', 'text-3.75 block cursor-pointer text-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: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-brand-secondary underline) uppercase py-2 md:py-0`],
 ];