spoko-design-system 0.2.80 → 0.2.81

package/tsconfig.json

@@ -1,29 +1,29 @@
-{
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.astro", "src/**/*.d.ts"],
-  "compilerOptions": {
-    "baseUrl": "src",
-
-    // Enable JSON imports.
-    "resolveJsonModule": true,
-    
-    // Enable stricter transpilation for better output.
-    "isolatedModules": true,
-    
-    // Astro will directly run your TypeScript code, no transpilation needed.
-    "noEmit": true,
-
-    "target": "esnext",
-    "useDefineForClassFields": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "jsx": "preserve",
-    "allowJs": true,
-    "types": ["vite/client", "vitest", "@vue/runtime-dom", "@astrojs/ts", "@astrojs/ts-plugin", "unplugin-vue-macros/macros-global", "unplugin-icons/types/astro"],
-    "paths": {
-      "@components/*": ["components/*"],
-      "@utils/*": ["utils/*"],
-      "@types/*": ["types/*"]
-    }
-  },
-  "exclude": ["dist", "node_modules"]
+{
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.astro", "src/**/*.d.ts"],
+  "compilerOptions": {
+    "baseUrl": "src",
+
+    // Enable JSON imports.
+    "resolveJsonModule": true,
+    
+    // Enable stricter transpilation for better output.
+    "isolatedModules": true,
+    
+    // Astro will directly run your TypeScript code, no transpilation needed.
+    "noEmit": true,
+
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "allowJs": true,
+    "types": ["vite/client", "vitest", "@vue/runtime-dom", "@astrojs/ts", "@astrojs/ts-plugin", "unplugin-vue-macros/macros-global", "unplugin-icons/types/astro"],
+    "paths": {
+      "@components/*": ["components/*"],
+      "@utils/*": ["utils/*"],
+      "@types/*": ["types/*"]
+    }
+  },
+  "exclude": ["dist", "node_modules"]
 }

package/uno.config.ts

@@ -1,257 +1,257 @@
-// uno.config.ts
-import {
-    defineConfig,
-   transformerVariantGroup,
-   presetAttributify,
-   presetIcons,
-   presetTypography,
-   presetUno,
-   presetWebFonts,
-   transformerDirectives,
-  } from 'unocss'
-
-
-// import transformerVariantGroup from '@unocss/transformer-variant-group'
-
-// import presetWind from '@unocss/preset-wind';
-// import presetUno from '@unocss/preset-uno';
-// import presetAttributify from '@unocss/preset-attributify';
-// import presetTypography from '@unocss/preset-typography';
-// import presetWebFonts from '@unocss/preset-web-fonts';
-
-
-
-export default defineConfig({
-  // ...
-  transformers: [
-    transformerDirectives(),
-    transformerVariantGroup(),
-  ],
-  shortcuts: [
-    ['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] relative object-cover bg-gray-100 h-auto max-w-full'],
-    ['img--3/4', 'aspect-[3/4] relative object-cover bg-gray-100 h-auto max-w-full'],
-    ['img--1/1', 'aspect-square relative object-cover bg-gray-100 h-auto max-w-full'],
-    ['img--3/2', 'aspect-[3/2] relative object-cover bg-gray-100 h-auto max-w-full'],
-    ['img--2/3', 'aspect-[2/3] relative object-cover bg-gray-100 h-auto max-w-full'],
-    ['img--3/1', 'aspect-[3/1] relative object-cover bg-gray-100 h-auto max-w-full'],
-    ['img--16/9', 'aspect-video relative object-cover bg-gray-100 h-auto max-w-full'],
-    ['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-all hover:(bg-blue-700 text-white) focus:ring-4 focus:outline-none focus: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: {
-        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'
-          }]
-        }
-    })
-  ]
+// uno.config.ts
+import {
+    defineConfig,
+   transformerVariantGroup,
+   presetAttributify,
+   presetIcons,
+   presetTypography,
+   presetUno,
+   presetWebFonts,
+   transformerDirectives,
+  } from 'unocss'
+
+
+// import transformerVariantGroup from '@unocss/transformer-variant-group'
+
+// import presetWind from '@unocss/preset-wind';
+// import presetUno from '@unocss/preset-uno';
+// import presetAttributify from '@unocss/preset-attributify';
+// import presetTypography from '@unocss/preset-typography';
+// import presetWebFonts from '@unocss/preset-web-fonts';
+
+
+
+export default defineConfig({
+  // ...
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
+  shortcuts: [
+    ['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] relative object-cover bg-gray-100 h-auto max-w-full'],
+    ['img--3/4', 'aspect-[3/4] relative object-cover bg-gray-100 h-auto max-w-full'],
+    ['img--1/1', 'aspect-square relative object-cover bg-gray-100 h-auto max-w-full'],
+    ['img--3/2', 'aspect-[3/2] relative object-cover bg-gray-100 h-auto max-w-full'],
+    ['img--2/3', 'aspect-[2/3] relative object-cover bg-gray-100 h-auto max-w-full'],
+    ['img--3/1', 'aspect-[3/1] relative object-cover bg-gray-100 h-auto max-w-full'],
+    ['img--16/9', 'aspect-video relative object-cover bg-gray-100 h-auto max-w-full'],
+    ['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-all hover:(bg-blue-700 text-white) focus:ring-4 focus:outline-none focus: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: {
+        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'
+          }]
+        }
+    })
+  ]
 })