spoko-design-system 0.2.84 → 0.2.86

package/src/uno-config/theme/effects.ts

@@ -0,0 +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',
+    },
+  };

package/src/uno-config/theme/grid.ts

@@ -0,0 +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)'
+    }
+  };

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

@@ -0,0 +1,26 @@
+// 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';
+
+export const theme = {
+  colors,
+  ...typography,
+  ...dimensions,
+  ...effects,
+  gridTemplateColumns: gridTemplates.columns,
+  breakpoints,
+  screens: breakpoints,
+};
+
+export {
+  colors,
+  typography,
+  breakpoints,
+  dimensions,
+  effects,
+  gridTemplates,
+};

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

@@ -0,0 +1,36 @@
+// shortcuts/buttons.ts
+export const buttonShortcuts = [
+    // Primary buttons
+    ['btn-primary', 'bg-accent-lightest border border-transparent hover:bg-accent-light inline-flex items-center justify-center shadow text-base text-blue-darker'],
+    ['btn-primary-outline', 'border-accent-light border font-medium inline-flex items-center justify-center shadow text-base text-accent-default transition-all hover:(bg-accent-light text-white)'],
+    
+    // Secondary buttons
+    ['btn-secondary', 'bg-neutral-dark border border-transparent hover:bg-neutral-darker inline-flex items-center justify-center shadow text-base text-white'],
+    ['btn-secondary-outline', 'border-neutral-dark border text-neutral-dark font-medium inline-flex items-center justify-center shadow text-base hover:(text-white bg-neutral-dark)'],
+    
+    // Tertiary buttons
+    ['btn-tertiary', 'inline-flex border border-transparent items-center font-medium text-center text-white bg-blue-darker hover:bg-accent-darker focus:ring-4 focus:outline-none focus:ring-blue-light'],
+    ['btn-tertiary-outline', 'inline-flex border items-center font-medium text-center text-blue-darker border-blue-darker transition-colors focus:(ring-2 outline-none ring-blue-light)'],
+    
+    // Utility buttons
+    ['btn-text', 'text-neutral-dark border border-transparent hover:underline transition-all'],
+    ['btn-tag', 'bg-blue-ultralight text-blue-darker font-medium mr-2 dark:bg-neutral-darker dark:text-blue-light border border-blue-default hover:border-blue-medium justify-center'],
+    
+    // Size variants
+    ['btn-normal', 'md:px-10 md:py-2 md:text-lg px-8 py-3 whitespace-nowrap'],
+    ['btn-sm', 'px-6 py-2 text-sm whitespace-nowrap'],
+    ['btn-xs', 'px-4 py-1 text-sm whitespace-nowrap'],
+
+    // Hover variants
+    ['btn-white-hover', 'hover:(text-blue-darker bg-white border-blue-darker)'],
+    ['btn-light-hover', 'hover:(text-blue-darker bg-accent-lightest border-accent-lightest)'],
+    ['btn-medium-hover', 'hover:(text-white bg-brand-primary border-brand-primary)'],
+    ['btn-dark-hover', 'hover:(bg-blue-darker text-white border-blue-darker)'],
+
+    ['btn-copy', 'leading-none opacity-10 hover:opacity-80 ml-auto w-6 h-6 -right-7 sm:(h-4 w-4 -right-5) absolute'],
+    ['btn-copy-text', 'shadow-sm py-0.5 px-1 bg-gray-100 -ml-1 -mt-4 text-xxs whitespace-nowrap'],
+
+    ['btn-prcode', '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-700 absolute w-4 pl-0.5)']
+
+
+];

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

@@ -0,0 +1,62 @@
+// 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'],
+
+];

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

@@ -0,0 +1,15 @@
+// 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)
+};

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

@@ -0,0 +1,55 @@
+// 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'],
+  ];

package/src/uno-config/theme/typography.ts

@@ -0,0 +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',
+    }
+  };

package/uno.config.ts

@@ -1,251 +1,4 @@
-// uno.config.ts
-import {
-    defineConfig,
-   transformerVariantGroup,
-   presetAttributify,
-   presetIcons,
-   presetTypography,
-   presetUno,
-   presetWebFonts,
-   transformerDirectives,
-  } from 'unocss'
+// uno.config.ts w projekcie
+import { createSdsConfig } from 'uno-config';
 
-export default defineConfig({
-  transformers: [
-    transformerDirectives(),
-    transformerVariantGroup(),
-  ],
-  shortcuts: [
-    ['btn-white-hover', 'hover:(text-blue-700 bg-white border-blue-700)'],
-    ['btn-light-hover', 'hover:(text-blue-700 bg-lightBlue-400 border-lightBlue-400)'],
-    ['btn-medium-hover', 'hover:(text-white bg-blue-400 border-blue-700)'],
-    ['btn-dark-hover', 'hover:(bg-blue-700 text-white border-blue-700)'],
-    ['img-base', 'relative object-cover bg-gray-100 h-auto max-w-full'],
-    ['close-light','@apply before:bg-white after:bg-white'],
-    ['close-dark','@apply before:bg-black after:bg-black'],
-    ['headline-light', 'font-headlight font-300 tracking-tight'],
-    ['detail-name', 'text-gray-900  leading-tight font-textlight line-clamp-3 whitespace-normal md:(whitespace-pre-wrap line-clamp-9 font-textregular)'],
-    ['product-number','font-novamono content-center flex flex-wrap flex-col content-start pr-5 bg-white'],
-    ['colon-after', 'after:content-[":"]'],
-    ['headline','font-headlight font-bold	'],
-    ['badge', 'px-1.5 py-px text-white text-xs mb-1 max-w-fit whitespace-nowrap'],
-    ['img--overlay','after:(content-empty bg-black bg-opacity-[.03] absolute w-full h-full top-0)'],
-    ['img--4/3', 'aspect-[4/3] img-base'],
-    ['img--3/4', 'aspect-[3/4] img-base'],
-    ['img--1/1', 'aspect-square img-base'],
-    ['img--3/2', 'aspect-[3/2] img-base'],
-    ['img--2/3', 'aspect-[2/3] img-base'],
-    ['img--3/1', 'aspect-[3/1] img-base'],
-    ['img--16/9', 'aspect-video img-base'],
-    ['img--small', 'h-full w-60 sm:(w-22) xl:(w-30)'],
-    ['img--medium', 'h-full w-60'],
-    ['underline-on-hover', 'relative flex w-full bg-white pb-1 dark:bg-blue-901 after:absolute after:bg-lightBlue-500 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'],
-    ['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'],
-    ['btn-primary', 'bg-lightBlue-400 border border-transparent font-medium hover:bg-lightBlue-500 inline-flex items-center justify-center shadow text-base text-blue-700'],
-    ['btn-primary-outline', 'border-lightBlue-500 border font-medium inline-flex items-center justify-center shadow text-base text-lightBlue-500 transition-all hover:(bg-lightBlue-500 text-white)'],
-    ['btn-secondary', 'bg-gray-500 border border-transparent font-medium hover:bg-gray-600 inline-flex items-center justify-center shadow text-base text-white'],
-    ['btn-secondary-outline', 'border-gray-500 border text-gray-500 font-medium inline-flex items-center justify-center shadow text-base hover:(text-white bg-gray-500)'],
-    ['btn-tertiary', 'inline-flex border border-transparent items-center font-medium text-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300'],
-    ['btn-tertiary-outline', 'inline-flex border items-center font-medium text-center text-blue-700 border-blue-700 transition-colors focus:(ring-2 outline-none ring-blue-300)'],
-    ['btn-text', 'text-gray-500 border border-transparent hover:underline transition-all'],
-    ['btn-tag', 'bg-blue-100 text-blue-800 font-medium mr-2 dark:bg-gray-700 dark:text-blue-400 border border-blue-400 hover:border-blue-600 justify-center'],
-    ['btn-normal', 'md:px-10 md:py-2 md:text-lg px-8 py-3 whitespace-nowrap'],
-    ['btn-sm', 'px-6 py-2 text-sm whitespace-nowrap	'],
-    ['btn-xs', 'px-4 py-1 text-sm whitespace-nowrap	'],
-
-    ['main','text-gray-700 dark:text-gray-200 dark:bg-blue-700 pt-24 sm:pt-14 relative'],
-    ['nav','bg-white dark:bg-black absolute sm:fixed w-full top-0 z-40 sm:z-30 max-w-screen'],
-    ['cat-menu','fixed bottom-[-4px] w-full z-10 border-t-1 border-gray-300 bg-white dark:bg-blue-900 text-center sm:(static z-auto border-t-none) sm:min-h-32'],
-    ['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-600 odd:bg-lightBlue-500) 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','w-full h-8 md:h-icon group-hover:filter-invert dark:filter-invert relative'],
-    ['subcat', 'cursor-pointer text-light-blue-700 hover:text-lightBlue-600 font-light mb-1 py-2 md:py-0'],
-    ['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-gray-100 md:(col-span-1 row-span-1) box-content'], //filter drop-shadow-sm
-    ['product-row__description', 'text-xs text-gray-900 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-date', 'inline-block text-xxs md:text-xs leading-none mt-1 md:(mt-4 mb-1) mr-2'],
-
-    ['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)'],
-    ['product-thumb', 'h-full w-full object-cover object-center transform scale-100 group-hover:scale-110 absolute inset-0 will-change-transform bg-gray-100'],
-    ['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)'], //filter drop-shadow-sm
-    ['product-link--related', 'relative flex w-full bg-white dark:bg-blue-901 after:absolute after:bg-lightBlue-500 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'],
-    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
-    ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:(opacity-100 text-teal-600)'],
-    ['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'],
-    ['product-info','text-gray-500 text-xxs font-textlight leading-none mt-0.5 md:(mt-0 text-xs)'],
-    ['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-blue-901 focus:(text-blue-500) hover:(text-blue-500)'],
-    ['pdp-headline','text-2xl sm:text-4xl 2xl:text-5xl font-headlight mb-6 font-bold sm:font-normal pr-7 lg:pr-0 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-slide','h-full bg-gray-100 aspect-[4/3] relative overflow-hidden border border-transparent'],
-    ['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','bg-gray-100 aspect-[4/3] w-auto h-auto cursor-grab active:cursor-grabbing max-h-44'],
-    ['slide-thumb__img','pointer-events-none pb-px h-full m-auto object-cover bg-white dark:bg-blue-901'],
-    ['cat-card','p-4 text-base md:text-sm'],
-    ['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%]'],
-    ['slimbanner','px-4 sm:px-8  flex items-center justify-center text-xs sm:text-base leading-none relative bg-gray-100  z-2 px-4 py-3 sm:(text-base px-8) text-blue-700 print-hidden'],
-    ['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'],
-    ['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]'],
-    ['cat-link','whitespace-nowrap cursor-pointer text-blue-901 dark:text-white hover:text-lightBlue-400 font-light uppercase py-2 md:py-0'],
-    ['plp-name','flex items-center leading-none font-headregular cursor-pointer sm:pr-6 md:pr-12'],
-    ['plp-replacements','col-span-3 md:col-span-1 md:col-start-2 text-xs mt-3 md:mt-4'],
-    ['product-code','text-blue-600 mr-1 leading-none tracking-wide select-all'],
-    ['code-formatted','font-novamono leading-none mt-0 relative text-xs'],
-    ['btn-copy', 'leading-none opacity-10 hover:opacity-80 ml-auto w-6 h-6 -right-7 sm:(h-4 w-4 -right-5) absolute'],
-    ['btn-copy-text','shadow-sm py-0.5 px-1 bg-gray-100 -ml-1 -mt-4 text-xxs whitespace-nowrap'],
-    ['plp-icons','absolute top-0 -right-2 md:(top-0.5 right-0) w-12 bottom-auto flex justify-end text-sm'],
-    ['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-gray-900 dark:text-gray-300 leading-tight font-textlight md:font-textregular whitespace-normal md:whitespace-pre-wrap'],
-    ['plp-b-desc','whitespace-pre-wrap text-xs md:text-sm font-textlight leading-4 md:leading-5'],
-    ['carousel-tile', 'w-52 min-w-52 flex ml-1 lg:ml-1.5'],
-    ['category-carousel__link', 'uppercase ml-auto px-4 text-xs flex items-center mt-3 hover:underline'],
-    ['adsbygoogle', 'w-full text-center'],
-    ['search-container', 'mb-2 sm:mb-0'],
-    ['l-main', 'text-gray-700 dark:text-gray-200 pt-24 sm:pt-14 bg-white dark:bg-blue-901'],
-    ['category-section', 'pb-4 w-full bg-white mb-4 overflow-x-hidden flex flex-wrap max-w-full'],
-    ['number-secondary', 'block absolute inset-0 text-gray-500 select-all bg-white dark:bg-blue-901'],
-    ['product-list', 'flex flex-wrap sm:block bg-white dark:bg-blue-901 sm:divide-y-1 sm:divide-solid divide-gray-200 dark:divide-white dark:divide-opacity-10 md:px-2 md:pl-4 mb-4 w-full bg-gray-100 dark:bg-gray-700 mb-auto'],
-    ['btn-prcode', '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-700 absolute w-4 pl-0.5)']
-  ],
-  theme: {
-    colors: {
-      blue: {
-        400: '#0040c5',
-        500: '#3b82f6',
-        540: '#0069ff',
-        545: '#005ad7',
-        550: '#0040c5',
-        600: '#02307d',
-        601: '#002059',
-        700: '#001e50',
-        800: '#00437a',
-        900: '#000f28',
-        901: '#0c1a32',
-        wrc: '#0000c8'
-      },
-      lightBlue: {
-        400: '#00b0f0',
-        500: '#0099da',
-        600: '#0087c1',
-        700: '#006ea6',
-      },
-      gray: {
-        100: '#f3f4f6',
-        200: '#e5e7eb',
-        300: '#b5bbc5',
-        400: '#9ca3af',
-        500: '#64748B'
-      }
-    },
-    gridTemplateColumn: {
-      16: 'repeat(16, minmax(0, 1fr))',
-      product: '15rem 20rem minmax(15rem, 1fr) ',
-      productGalleryDesktop: 'calc(100% - 14% - 0.9375rem) 14%',
-      replacement: '6.25rem 12rem auto', // minmax(10rem, 1fr)
-      'details-desktop': '12.5rem calc(100% - 12.5rem - 1rem)'
-    },
-    height: {
-      'tile': ' 104px',
-      'tile-mobile': ' 78px',
-      'sidebar': 'calc(100vh - 5.125rem)',
-      'full-mobile': 'calc(var(--vh, 1vh) * 100)',
-      icon: '46px',
-    },
-    filter: {
-      blur: 'blur(5px)',
-    },
-    backgroundSize: {
-      full: '100% 100%',
-    },
-    maxHeight: {
-      icon: '46px',
-      sidebar: 'calc(100vh - 5.125rem)',
-    },
-    minHeight: {
-      'tile': ' 104px',
-      'tile-mobile': ' 78px',
-    },
-    scale: ['group-hover'],
-    cursor: {
-      'zoom-in': 'zoom-in',
-    },
-    breakpoints: {
-      'sm': '640px',
-      'md': '768px',
-      'lg': '1024px',
-      'xl': '1280px',
-      '2xl': '1536px',
-      '3xl': '1920px',
-      '4xl': '2400px',
-    },
-    screens: {
-      'sm': '640px',
-      'md': '768px',
-      'lg': '1024px',
-      'xl': '1280px',
-      '2xl': '1536px',
-      '3xl': '1920px',
-      'print': { 'raw': 'print' },
-    },
-    fontSize: {
-      xxs: '.625rem',
-    },
-    aspectRatio: {
-      '4/3': '4 / 3',
-    },
-  },
-  presets: [
-      presetUno(),
-      presetAttributify(),
-      presetIcons({
-        scale: 1.2,
-        warn: true,
-        prefix: 'i-',
-        extraProperties: {
-          'display': 'inline-block',
-          'vertical-align': 'middle',
-          // ...
-        },
-      }),
-      // presetTypography(),
-      presetWebFonts({
-        provider: 'none',
-        fonts: {
-          sans: [{
-            name: 'vw_textregular',
-            provider: 'none'
-          }],
-          novamono: [{
-            name: 'Nova Mono',
-            provider: 'none'
-          }],
-          mono: [{
-              name: 'Nova Mono',
-              provider: 'none'
-            }],
-          headlight: ['vw_headlight', 'system-ui', 'ui-sans-serif'],
-          headregular: [{
-            name: 'vw_headregular',
-            provider: 'none'
-          }],
-          headbold: [{
-            name: 'vw_headbold',
-            provider: 'none'
-          }],
-          textlight: [{
-            name: 'vw_textlight',
-            provider: 'none'
-          }],
-          textregular: [{
-            name: 'vw_textregular',
-            provider: 'none'
-          }],
-          textbold: [{
-            name: 'vw_textbold',
-            provider: 'none'
-          }]
-        }
-    })
-  ]
-})
+export default createSdsConfig();