spoko-design-system 0.2.88 → 0.2.89

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

@@ -1,62 +1,81 @@
-// shortcuts/components.ts
-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 sm:grid sm: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-[4/3] 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-medium 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-[4/3] 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-medium 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-medium 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-medium 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'],
-
+// 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 sm:grid sm: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-blue-901'],
+  ['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`]
+
 ];

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

@@ -0,0 +1,3 @@
+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'

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

@@ -1,15 +1,17 @@
-// shortcuts/index.ts
-import type { UserShortcuts } from 'unocss'
-import { buttonShortcuts } from './buttons';
-import { layoutShortcuts } from './layout';
-import { componentShortcuts } from './components';
-
-const convertToShortcuts = (shortcuts: string[][]): UserShortcuts => {
-  return Object.fromEntries(shortcuts.map(([name, value]) => [name, value]));
-};
-
-export const shortcuts: UserShortcuts = {
-  ...convertToShortcuts(buttonShortcuts),
-  ...convertToShortcuts(layoutShortcuts),
-  ...convertToShortcuts(componentShortcuts)
+// 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,55 +1,59 @@
-// 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 shadow-md justify-between items-center flex-wrap sm:(flex-nowrap pt-0 h-14) max-w-screen print-hidden'],
-  
-    // View Toggles
-    ['view-grid', 'grid grid-cols-2'],
-    ['view-list', 'flex flex-col gap-4'],
-  
-    // Containers
-    ['products-container', 'products-wrapper'],
-    ['products-wrapper', 'bg-white sm:(divide-y-1 divide-solid) divide-neutral-lighter mb-4 w-full mb-auto md:(pl-4 px-2 -mt-3)'],
-    ['product-list', 'flex flex-wrap 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', '@apply before:bg-white after:bg-white'],
-    ['close-dark', '@apply before:bg-black after:bg-black'],
-    ['colon-after', 'after:content-[":"]'],
-    ['adsbygoogle', 'w-full text-center'],
+// 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 shadow-md justify-between items-center flex-wrap sm:(flex-nowrap pt-0 h-14) max-w-screen print-hidden'],
+  
+    // View Toggles
+    ['view-grid', 'grid grid-cols-2'],
+    ['view-list', 'flex flex-col gap-4'],
+  
+    // Containers
+    ['products-container', 'products-wrapper'],
+    ['products-wrapper', 'bg-white sm:(divide-y-1 divide-solid) divide-neutral-lighter mb-4 w-full mb-auto md:(pl-4 px-2 -mt-3)'],
+    ['product-list', 'flex flex-wrap 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-blue-901 dark:text-white hover:(text-lightBlue-400 underline) uppercase py-2 md:py-0'],
+
   ];

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

@@ -0,0 +1,6 @@
+// shortcuts/product.ts
+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
+];

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