spoko-design-system 0.3.0 → 0.3.2

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

@@ -1,92 +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 ${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}`]
+// 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', `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/constants.ts

@@ -12,7 +12,7 @@ export const aspectRatios = {
 // Theme colors
 export const COLORS = {
   bgWhite: 'bg-white',
-  bgDark: 'dark:bg-blue-901',
+  bgDark: 'dark:bg-accent-deepBlue',
   textSlate: 'text-slate-500',
   textNeutralLight: 'dark:text-neutral-light',
   textSlateDark: 'text-slate-darkest',
@@ -32,9 +32,17 @@ export const LAYOUT = {
   flex: {
     base: 'flex',
     center: 'flex items-center justify-center',
+    alignCenter: 'flex items-center',
+    justifyCenter: 'flex justify-center',
     between: 'flex items-center justify-between',
     wrap: 'flex flex-wrap',
     nowrap: 'flex-nowrap',
+    col: 'flex flex-col',
+    colCenter: 'flex flex-col items-center',
+    start: 'flex items-start',
+    end: 'flex items-end',
+    justifyEnd: 'flex justify-end',
+    alignEnd: 'flex items-end',
   },
   spacing: {
     topPadding: 'pt-24 sm:pt-14',
@@ -74,7 +82,7 @@ export const BUTTON_STYLES = {
   },
   variants: {
     primary: {
-      solid: 'bg-accent-lightest border border-transparent hover:bg-accent-light text-blue-darker shadow',
+      solid: 'bg-brand-secondary 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: {
@@ -88,30 +96,12 @@ export const BUTTON_STYLES = {
   },
   hover: {
     white: 'hover:(text-blue-darker bg-white border-blue-darker)',
-    light: 'hover:(text-blue-darker bg-accent-lightest border-accent-lightest)',
+    light: 'hover:(text-blue-darker bg-brand-secondary border-brand-secondary)',
     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: {
@@ -127,13 +117,17 @@ export const TYPOGRAPHY = {
   },
 } as const
 
-// Product constants
-export const PRODUCT_CONSTANTS = {
+// Product specific styles (merged PRODUCT_STYLES and PRODUCT_CONSTANTS)
+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']} ${LAYOUT.flex.alignCenter} mb-3 sm:mb-0 ${IMAGE_STYLES.overlay}`,
+  },
   link: {
-    base: 'relative flex w-full',
+    base: 'relative flex w-full bg-white after:(absolute bg-accent-light 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: `${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}`,
+    bigTile: `${aspectRatios['4/3']} ${LAYOUT.flex.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}`,

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,64 +1,65 @@
-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-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`],
+// 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} 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.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`],
 ];

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

@@ -1,7 +1,7 @@
 // shortcuts/product.ts
-import { PRODUCT_CONSTANTS, IMAGE_STYLES, aspectRatios } from './constants'
+import { PRODUCT_STYLES } from './constants'
 
-const { link } = PRODUCT_CONSTANTS
+const { link, image } = PRODUCT_STYLES
 
 export const productShortcuts = [
   // Product links
@@ -9,7 +9,7 @@ export const productShortcuts = [
   ['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`],
+  ['product-image', image.base],
+  ['product-image--small', image.small],
+  ['product-image--large', image.large],
 ];

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();